* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --mt-blue: rgb(0, 170, 255);
    --mt-bg: rgba(0, 0, 0, 0.02);
    --mt-sidebar: rgb(21, 24, 26);
    --mt-text: rgb(61, 71, 77);
    --mt-muted: rgb(138, 148, 153);
    --mt-border: rgb(225, 228, 230);
    --mt-white: rgb(255, 255, 255);
    --sidebar-width: 270px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --pwa-gap: 0px;
    --bottom-nav-visual-height: 0px;
    --bottom-nav-height: 0px;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--mt-text);
    background: var(--mt-bg);
    line-height: 1.45;
}

body:not(.login-page) {
    overflow: hidden;
}

body.project-page {
    overflow: clip;
}

/* Login */
body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt-bg);
}

.login-container {
    width: 100%;
    max-width: 420px;
    padding: 24px;
}

.login-box {
    background: var(--mt-white);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 2px 8px 0;
    padding: 28px;
}

.login-box h1 {
    font-size: 26px;
    margin-bottom: 18px;
}

.login-box p.login-intro {
    color: var(--mt-text-light, #555);
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
}

.login-links {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
}

.login-links a {
    color: var(--mt-blue);
    text-decoration: none;
}

.login-links a:hover {
    text-decoration: underline;
}

.login-success {
    background: #e6f4ea;
    color: #1e7e34;
    border: 1px solid #b7e1c0;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 13px;
}

.login-info {
    background: #eef5ff;
    color: #204a87;
    border: 1px solid #c5d9f1;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════
   Multi-Select-Dropdown (Form-Komponente)
   ═══════════════════════════════════════════════════ */
.multi-select-dropdown {
    position: relative;
    width: 100%;
}

.multi-select-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: inherit;
    text-align: left;
    transition: border-color 0.15s ease;
}

.multi-select-toggle:hover {
    border-color: var(--mt-blue);
}

.multi-select-dropdown.open .multi-select-toggle {
    border-color: var(--mt-blue);
}

.multi-select-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multi-select-caret {
    flex-shrink: 0;
    color: var(--mt-muted);
    transition: transform 0.15s ease;
}

.multi-select-dropdown.open .multi-select-caret {
    transform: rotate(180deg);
}

.multi-select-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.04) 0 0 0 1px, rgba(0, 0, 0, 0.06) 0 4px 12px 0;
    max-height: 320px;
    flex-direction: column;
    overflow: hidden;
}

.multi-select-dropdown.open .multi-select-panel {
    display: flex;
}

.multi-select-search {
    padding: 8px;
    border-bottom: 1px solid var(--mt-border);
}

.multi-select-search input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--mt-border);
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
}

.multi-select-actions {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mt-border);
    background: rgba(0, 0, 0, 0.015);
}

.multi-select-action {
    background: none;
    border: none;
    color: var(--mt-blue);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
}

.multi-select-action:hover {
    text-decoration: underline;
}

.multi-select-options {
    overflow-y: auto;
    flex: 1;
    padding: 4px 0;
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
}

.multi-select-option:hover {
    background: rgba(0, 170, 255, 0.06);
}

.multi-select-option input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

.multi-select-option.is-owner {
    cursor: default;
    opacity: 0.85;
}

.multi-select-option-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multi-select-meta {
    color: var(--mt-muted);
    font-size: 12px;
}

.multi-select-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: var(--mt-bg);
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    font-size: 11px;
    color: var(--mt-muted);
}

.multi-select-empty {
    padding: 12px;
    text-align: center;
    color: var(--mt-muted);
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════
   Sidebar Menu (Jampack-Style)
   ═══════════════════════════════════════════════════ */

.hk-menu {
    display: flex;
    flex-flow: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    z-index: 1032;
    border-right: 1px solid var(--mt-border);
    background: #fff;
    transition: width 0.2s ease, left 0.2s ease;
    overflow: hidden;
}

.menu-header {
    padding: 0 1rem;
    display: flex;
    flex: 0 0 auto;
    height: 65px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--mt-border);
}

.menu-header .navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.menu-header .brand-icon {
    height: 32px;
    width: 32px;
    flex-shrink: 0;
}

.menu-header .brand-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--mt-text);
    margin-left: 10px;
    white-space: nowrap;
}

.navbar-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: #262a2e;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.navbar-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.menu-content-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
}

.menu-content-wrap::-webkit-scrollbar {
    width: 4px;
}

.menu-content-wrap::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.menu-gap {
    height: 20px;
}

.menu-group .nav-header {
    padding: 0 0 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #9e9e9e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
}

.navbar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.nav-item .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    margin: 1px 0;
    white-space: nowrap;
    color: #262a2e;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
}

.nav-item .nav-link > * {
    transition: transform 0.2s ease;
}

.nav-item .nav-link:hover {
    background: rgba(0, 0, 0, 0.04);
}

.nav-item .nav-link:hover > * {
    transform: translateX(3px);
}

.nav-item.active > .nav-link {
    background: rgba(0, 170, 255, 0.1);
    color: var(--mt-blue);
}

.nav-item.active > .nav-link > * {
    transform: none;
}

.nav-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.nav-icon-wrap svg {
    width: 22px;
    height: 22px;
    color: inherit;
    opacity: 0.7;
}

.nav-item.active .nav-icon-wrap svg {
    opacity: 1;
}

.nav-link-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Collapsible Submenu (nav-children) ─────────────────────────── */

.nav-link-collapse {
    position: relative;
}

.nav-link-collapse::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.4;
    transition: transform 0.25s ease;
    margin-left: auto;
    flex-shrink: 0;
}

.nav-link-collapse.open::after {
    transform: rotate(45deg);
}

.nav-children {
    list-style: none;
    padding: 2px 0 2px 0;
    margin: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.nav-children .nav-item .nav-link {
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem 0.35rem 2.75rem;
    color: var(--mt-muted);
    border-radius: 0.375rem;
    display: block;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

.nav-children .nav-item .nav-link:hover {
    color: var(--mt-text);
    background: rgba(0, 0, 0, 0.03);
}

.nav-children .nav-item .nav-link.active {
    color: var(--mt-blue);
    background: rgba(0, 170, 255, 0.08);
    font-weight: 500;
}

/* ─── Menu Backdrop (Mobile) ──────────────────────────────────────── */

.hk-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1031;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.hk-menu-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* ─── Desktop: Expanded (default) ─────────────────────────────────── */

@media (min-width: 769px) {
    .hk-menu-backdrop {
        display: none;
    }
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* ─── Desktop: Collapsed State ────────────────────────────────────── */

body.sidebar-collapsed {
    --sidebar-width: 72px;
}

body.sidebar-collapsed .hk-menu {
    width: 72px;
}

body.sidebar-collapsed .menu-header .navbar-brand {
    display: none;
}

body.sidebar-collapsed .menu-content-wrap .nav-header {
    display: none;
}

body.sidebar-collapsed .menu-content-wrap .nav-link-text {
    visibility: hidden;
    width: 0;
    overflow: hidden;
}

body.sidebar-collapsed .menu-content-wrap .nav-link {
    justify-content: center;
    padding: 0.625rem;
}

body.sidebar-collapsed .menu-content-wrap .nav-icon-wrap {
    margin-right: 0;
}

body.sidebar-collapsed .menu-gap {
    height: 12px;
}

body.sidebar-collapsed .nav-children {
    display: none !important;
}

body.sidebar-collapsed .nav-link-collapse::after {
    display: none;
}

body.sidebar-collapsed .navbar-toggle svg {
    transform: rotate(180deg);
}

/* Hover-expand on collapsed desktop */
@media (min-width: 769px) {
    body.sidebar-collapsed .hk-menu:hover {
        width: 270px;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
    }

    body.sidebar-collapsed .hk-menu:hover .menu-header .navbar-brand {
        display: flex;
    }

    body.sidebar-collapsed .hk-menu:hover .menu-content-wrap .nav-header {
        display: block;
    }

    body.sidebar-collapsed .hk-menu:hover .menu-content-wrap .nav-link-text {
        visibility: visible;
        width: auto;
    }

    body.sidebar-collapsed .hk-menu:hover .menu-content-wrap .nav-link {
        justify-content: flex-start;
        padding: 0.5rem 0.75rem;
    }

    body.sidebar-collapsed .hk-menu:hover .menu-content-wrap .nav-icon-wrap {
        margin-right: 0.75rem;
    }

    body.sidebar-collapsed .hk-menu:hover .menu-gap {
        height: 20px;
    }

    body.sidebar-collapsed .hk-menu:hover .nav-children {
        display: block !important;
    }

    body.sidebar-collapsed .hk-menu:hover .nav-link-collapse::after {
        display: inline-block;
    }
}

/* ─── Mobile: Sidebar as slide-in ─────────────────────────────────── */

@media (max-width: 768px) {
    .hk-menu {
        left: -280px;
        width: 280px;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
        z-index: 1100;
    }

    .hk-menu.mobile-open {
        left: 0;
    }

    .hk-menu-backdrop {
        z-index: 1099;
    }

    /* Mobile hamburger button (in top navbar) */
    .mobile-menu-toggle {
        display: flex;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        border: none;
        background: none;
        color: var(--mt-text);
        border-radius: 8px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-toggle:active {
        background: rgba(0, 0, 0, 0.05);
    }
}

/* ===== Projekt Slide Panel (Template File-Manager Style) ===== */
.project-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.project-panel-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

.project-panel {
    position: fixed;
    top: 65px;
    bottom: 0;
    left: var(--sidebar-width);
    width: 270px;
    background: #fff;
    z-index: 10;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.2s ease, visibility 0s 0.2s;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.06);
    visibility: hidden;
    pointer-events: none;
    border-right: 1px solid var(--mt-border);
}

.project-panel.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.2s ease, visibility 0s 0s;
}

.pp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 65px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--mt-border);
}

.pp-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mt-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.pp-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    color: var(--mt-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.pp-icon-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--mt-text);
}

.pp-add-btn {
    background: var(--mt-blue);
    color: #fff;
}

.pp-add-btn:hover {
    background: rgb(0, 145, 220);
    color: #fff;
}

/* (+) Dropdown */
.pp-add-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    width: 240px;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--mt-border);
    z-index: 30;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s;
}

.pp-add-dropdown.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.pp-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    font-size: 14px;
    color: var(--mt-text);
    transition: background 0.12s;
}

.pp-dropdown-item:hover {
    background: rgba(0, 170, 255, 0.06);
}

/* Filter */
.pp-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0.75rem 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--mt-bg);
    border: 1px solid var(--mt-border);
}

.pp-filter-icon {
    flex-shrink: 0;
    color: var(--mt-muted);
    opacity: 0.6;
}

.pp-filter-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--mt-text);
    font-size: 13px;
}

.pp-filter-input::placeholder {
    color: var(--mt-muted);
    opacity: 0.7;
}

/* Panel Content */
.pp-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0 1rem;
}

.pp-content::-webkit-scrollbar {
    width: 4px;
}

.pp-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.pp-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--mt-muted);
    text-transform: uppercase;
}

.pp-section-icon {
    flex-shrink: 0;
}

.pp-group {
    margin-top: 2px;
}

.pp-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    cursor: pointer;
    border-radius: 0.5rem;
    margin: 1px 0.5rem;
    transition: background 0.12s;
}

.pp-group-header:hover {
    background: rgba(0, 0, 0, 0.03);
}

.pp-group-header.pp-drop-target {
    background: rgba(0, 170, 255, 0.1);
    outline: 1px dashed rgba(0, 170, 255, 0.4);
}

.pp-group-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.pp-group-chevron {
    flex-shrink: 0;
    color: var(--mt-muted);
    opacity: 0.5;
    transition: transform 0.2s ease;
    transform: rotate(90deg);
}

.pp-group-chevron.pp-chevron-collapsed {
    transform: rotate(0deg);
}

.pp-group-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--mt-text);
    opacity: 0.65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-group-options {
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    color: var(--mt-muted);
}

.pp-group-header:hover .pp-group-options {
    opacity: 1;
}

.pp-group-options:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--mt-text);
}

/* Gruppen-Kontextmenü (Overlay bei Klick auf Dots) */
.pp-group-context-menu {
    min-width: 160px;
    background: #fff;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.12) 0 4px 16px, rgba(0, 0, 0, 0.04) 0 0 0 1px;
    padding: 4px;
    z-index: 10000;
}

.pp-group-context-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: var(--mt-text);
    border-radius: 6px;
    transition: background 0.15s;
    text-align: left;
}

.pp-group-context-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.pp-group-context-item svg {
    flex-shrink: 0;
    color: var(--mt-muted);
}

.pp-group-context-item--danger {
    color: #d63031;
}

.pp-group-context-item--danger svg {
    color: #d63031;
}

.pp-group-context-item--danger:hover {
    background: rgba(214, 48, 49, 0.08);
}

.pp-group-projects {
    transition: background 0.15s;
    border-radius: 0.5rem;
    margin: 0 0.5rem;
}

.pp-group-projects.pp-drop-zone-active {
    background: rgba(0, 170, 255, 0.05);
}

.pp-group-empty {
    padding: 8px 16px 12px 44px;
    font-size: 12px;
    color: var(--mt-muted);
    opacity: 0.5;
    font-style: italic;
}

/* Drag & Drop auf Projekt-Items */
.pp-project-item.pp-dragging {
    opacity: 0.4;
}

/* Projekt-Item */
.pp-project-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    text-decoration: none;
    transition: background 0.12s;
    cursor: pointer;
    border-radius: 0.5rem;
    margin: 1px 0.5rem;
}

.pp-project-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

.pp-project-item.active {
    background: rgba(0, 170, 255, 0.1);
}

.pp-project-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.pp-project-icon svg {
    color: #fff;
    width: 16px;
    height: 16px;
}

.pp-project-icon svg path,
.pp-project-icon svg rect,
.pp-project-icon svg polygon {
    fill: #fff !important;
}

.pp-project-icon svg path[stroke],
.pp-project-icon svg rect[stroke] {
    stroke: #fff !important;
}

.pp-project-name {
    flex: 1;
    font-size: 14px;
    color: var(--mt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-project-lock {
    flex-shrink: 0;
    color: var(--mt-muted);
    opacity: 0.4;
}

.pp-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--mt-muted);
    font-size: 14px;
}

/* ===== Admin Panel Items (legacy, kept for compat) ===== */
.ap-section-label {
    padding: 18px 16px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--mt-muted);
    text-transform: uppercase;
}

.ap-section-label:first-child {
    padding-top: 8px;
}

/* ═══════════════════════════════════════════════════
   Admin Layout — File Manager Style Secondary Sidebar
   ═══════════════════════════════════════════════════ */
.admin-app-wrap {
    position: fixed;
    top: 65px;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    display: flex;
    z-index: 1;
}

.admin-sidebar {
    width: 270px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #eaeaea;
    overflow-y: auto;
    overflow-x: hidden;
}

.admin-sidebar-content {
    padding: 0 0 8px;
}

.admin-sidebar-group {
    padding: 0 0 8px;
}

.admin-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 12px;
}

.admin-sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--mt-text);
    letter-spacing: -0.01em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-sidebar-separator {
    height: 1px;
    background: #eaeaea;
    margin: 8px 16px;
}

.admin-sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--mt-text);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.admin-sidebar-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.admin-sidebar-item.active {
    color: var(--mt-blue);
    background: rgba(0, 170, 255, 0.08);
    font-weight: 500;
}

/* Untermenü-Items (z.B. unter "Anwesenheit", "Abwesenheit") */
.admin-sidebar-sub {
    padding-left: 38px;
    font-size: 13px;
    color: var(--mt-text-secondary, #555);
}

/* Gruppen-Label (z.B. "Anwesenheit", "Abwesenheit") als Sub-Header */
.admin-sidebar-group-label {
    padding: 12px 20px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mt-muted);
    list-style: none;
}

.admin-sidebar-item.active .admin-sidebar-icon {
    color: var(--mt-blue);
}

.admin-sidebar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--mt-muted);
    flex-shrink: 0;
}

.admin-content-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.admin-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #eaeaea;
    background: #fff;
    flex-shrink: 0;
}

.admin-content-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--mt-text);
    margin: 0;
}

.admin-main-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: var(--mt-bg, #f8f9fa);
}

/* Hide old top-navbar on admin page (replaced by admin-app-wrap layout) */
body.admin-page .top-navbar {
    display: none;
}

/* Admin action icon buttons (template style) */
.action-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--mt-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.action-icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--mt-text);
}

.action-icon-btn.action-icon-danger:hover {
    background: rgba(208, 31, 46, 0.08);
    color: rgb(208, 31, 46);
}

.actions {
    /* WICHTIG: kein `display:flex` direkt — `td.actions` wuerde sonst seine
       table-cell-Semantik verlieren, vertikales Alignment & Border-Linien
       verrutschen. Kinder (.action-icon-btn) sind selbst `inline-flex`. */
    white-space: nowrap;
    vertical-align: middle;
}
.actions > .action-icon-btn + .action-icon-btn,
.actions > .action-icon-btn + button,
.actions > .action-icon-btn + a {
    margin-left: 2px;
}

/* Admin section description */
.admin-section-desc {
    padding: 0 0 20px;
}

.admin-section-desc p {
    margin: 0;
    font-size: 13px;
    color: var(--mt-muted);
    max-width: 640px;
}

/* ═══════════════════════════════════════════════════════
   Berichte / Reports
   ═══════════════════════════════════════════════════════ */
.reports-total {
    font-size: 13px;
    color: var(--mt-muted);
    font-weight: 500;
}
.reports-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reports-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    margin-bottom: 16px;
    align-items: flex-start;
}
body.dark-mode .reports-filters {
    background: #1e2124;
    border-color: #2d3135;
}
.reports-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}
.reports-filter-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--mt-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.reports-filter-period {
    flex: 1;
    min-width: 320px;
}
.reports-period-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.reports-period-sep {
    color: var(--mt-muted);
    margin: 0 2px;
}
.reports-input {
    padding: 8px 10px;
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: var(--mt-text);
    min-height: 36px;
}
body.dark-mode .reports-input {
    background: #14161a;
    border-color: #2d3135;
    color: #e7eaec;
}
.reports-date {
    width: 150px;
}
.reports-input:focus {
    outline: none;
    border-color: var(--mt-blue, rgb(0, 170, 255));
}
.reports-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
}
.reports-preset-btn {
    padding: 6px 10px;
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    background: #fff;
    color: var(--mt-text);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.reports-preset-btn:hover {
    border-color: var(--mt-blue, rgb(0, 170, 255));
    color: var(--mt-blue, rgb(0, 170, 255));
}
.reports-preset-btn.active {
    background: var(--mt-blue, rgb(0, 170, 255));
    border-color: var(--mt-blue, rgb(0, 170, 255));
    color: #fff;
}
body.dark-mode .reports-preset-btn {
    background: #14161a;
    border-color: #2d3135;
    color: #e7eaec;
}
.reports-filter-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-left: auto;
}

/* Summen-Leiste */
.reports-summary-bar {
    display: flex;
    gap: 24px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid var(--mt-border, rgb(225,228,230));
    border-radius: 10px;
}
body.dark-mode .reports-summary-bar {
    background: #14161a;
    border-color: #2d3135;
}
.reports-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.reports-summary-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgb(138, 148, 153);
    font-weight: 600;
}
.reports-summary-value {
    font-size: 20px;
    font-weight: 700;
    color: rgb(61, 71, 77);
}
body.dark-mode .reports-summary-value {
    color: #e7eaec;
}

/* Ergebnis-Tabelle */
.reports-table-wrap {
    background: #fff;
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    overflow: hidden;
}
body.dark-mode .reports-table-wrap {
    background: #1e2124;
    border-color: #2d3135;
}
.reports-table tbody tr.rt-summary-row {
    cursor: pointer;
    transition: background 0.1s;
}
.reports-table tbody tr.rt-summary-row:hover {
    background: rgba(0, 170, 255, 0.04);
}
.reports-table tbody tr.rt-summary-row.rt-expanded {
    background: rgba(0, 170, 255, 0.06);
}
.rt-expand-cell {
    padding-left: 10px !important;
    padding-right: 0 !important;
}
.rt-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--mt-muted);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rt-expand-btn:hover { color: var(--mt-text); }
.rt-task-link {
    color: var(--mt-text);
    text-decoration: none;
    font-weight: 500;
}
.rt-task-link:hover {
    color: var(--mt-blue, rgb(0, 170, 255));
    text-decoration: underline;
}
.rt-project-name {
    color: var(--mt-muted);
    font-size: 13px;
}
.rt-detail-row td {
    padding: 0 !important;
    background: rgba(0, 170, 255, 0.04);
    border-top: none !important;
}
body.dark-mode .rt-detail-row td {
    background: rgba(0, 170, 255, 0.07);
}
.rt-detail-cell {
    padding: 0 !important;
}
.rt-detail-placeholder {
    padding: 14px;
    color: var(--mt-muted);
    font-size: 13px;
}

/* Detail-Einträge als Grid — aligned mit den Spalten der Summary-Tabelle */
.rt-entries {
    display: flex;
    flex-direction: column;
}
.rt-entry-head,
.rt-entry-row {
    display: grid;
    /* 5 Spalten: Mitarbeiter | Datum | Start | Ende | Dauer
       Gleiche 14px links/rechts Padding wie Haupttabelle, leicht eingerückt */
    grid-template-columns: 1.5fr 1fr 0.7fr 0.7fr 1fr;
    gap: 8px;
    padding: 8px 14px 8px 42px;
    font-size: 13px;
    color: var(--mt-text);
}
.rt-entry-head {
    padding-top: 10px;
    padding-bottom: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--mt-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
body.dark-mode .rt-entry-head {
    border-bottom-color: rgba(255,255,255,0.06);
}
.rt-entry-row {
    border-bottom: 1px solid rgba(0,0,0,0.03);
}
body.dark-mode .rt-entry-row {
    border-bottom-color: rgba(255,255,255,0.03);
}
.rt-entry-row:last-child {
    border-bottom: none;
    padding-bottom: 12px;
}
.rt-entry-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .reports-filters {
        flex-direction: column;
        gap: 12px;
    }
    .reports-filter-group,
    .reports-filter-period {
        width: 100%;
        min-width: 0;
    }
    .reports-presets {
        margin-left: 0;
        width: 100%;
    }
    .reports-date {
        width: 100%;
    }
    .reports-filter-actions {
        margin-left: 0;
        width: 100%;
    }
}

/* ───── Projekt-Berechtigungen Matrix (Delta zu .kc-access-table) ───── */
.ppr-col-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ppr-col-name {
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
    color: var(--mt-text);
}
.ppr-col-actions {
    display: flex;
    gap: 2px;
    justify-content: center;
    align-items: center;
    min-height: 18px;
}
.ppr-role-action {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 4px;
    color: var(--mt-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.ppr-role-action:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--mt-text);
}
.ppr-role-action--danger:hover {
    background: rgba(214, 48, 49, 0.1);
    color: #d63031;
}
.ppr-role-lock {
    font-size: 12px;
    opacity: 0.55;
}
.kc-access-cell.ppr-locked {
    opacity: 0.55;
    cursor: not-allowed;
}
.kc-access-cell.ppr-locked:hover {
    border-color: var(--mt-border);
}

/* Modal */
.ppr-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.ppr-modal {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.18) 0 8px 32px;
    overflow: hidden;
}
.ppr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgb(235, 238, 240);
}
.ppr-modal-header h3 { margin: 0; font-size: 16px; }
.ppr-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--mt-muted);
    width: 30px;
    height: 30px;
    border-radius: 4px;
}
.ppr-modal-close:hover { background: rgba(0,0,0,0.06); }
.ppr-modal-body {
    padding: 20px;
}
.ppr-modal-body .form-group {
    margin-bottom: 14px;
}
.ppr-modal-body label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--mt-muted);
    margin-bottom: 6px;
}
.ppr-modal-body input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 6px;
    font-size: 14px;
}
.ppr-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid rgb(235, 238, 240);
}
.ppr-default-toggle-group {
    border-top: 1px solid var(--mt-border, rgb(235, 238, 240));
    padding-top: 12px;
    margin-top: 4px;
}
.ppr-default-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mt-text, #1a1a1a);
    cursor: pointer;
}
.ppr-default-hint {
    font-size: 12px;
    color: var(--mt-muted, rgb(138, 148, 153));
    margin-top: 4px;
    line-height: 1.4;
}
.ppr-default-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--mt-blue, #2563eb);
    background: color-mix(in srgb, var(--mt-blue, #2563eb) 12%, transparent);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════
   Global Header Navbar (Template hk-navbar Style)
   ═══════════════════════════════════════════════════ */
.hk-navbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: 65px;
    /* Höher als .board-sidebar (z-index: 100), damit Dropdowns (Notification,
       User-Menu) nicht hinter der seitlichen Filter-Bar verschwinden. */
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    background: var(--mt-white);
    border-bottom: 1px solid var(--mt-border);
    transition: left 0.2s ease;
}

.nav-start-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-end-wrap {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

#hkNavProfile {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    overflow: visible;
    margin-left: 4px;
}

#hkNavProfile img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

#hkNavProfile .avatar {
    width: 32px;
    height: 32px;
}

#hkNavProfile .initial-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

#hkNavBell {
    position: relative;
    flex-shrink: 0;
}

/* Hamburger (mobile only, hidden on desktop) */
.hk-navbar-togglable {
    display: none !important;
}

/* Nav icon button (template flush-soft-hover style) */
.hk-nav-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #262a2e;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    padding: 0;
    flex-shrink: 0;
}

.hk-nav-btn:hover {
    background: #f7f7f7;
}

/* ─── Search Bar (template style) ────────────────────────────────── */
.navbar-search {
    display: flex;
}

.input-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 18rem;
    height: 38px;
    background: var(--mt-bg);
    border: 1px solid var(--mt-border);
    border-radius: 0.5rem;
    padding: 0 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.input-search-wrap:focus-within {
    border-color: var(--mt-blue);
    box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.1);
}

.input-search-icon {
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.input-search {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.875rem;
    color: var(--mt-text);
    min-width: 0;
}

.input-search::placeholder {
    color: var(--mt-muted);
    opacity: 0.7;
}

/* Global Search Dropdown */
.gs-dropdown {
    position: fixed;
    z-index: 10000;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.14) 0 8px 28px, rgba(0, 0, 0, 0.04) 0 0 0 1px;
    padding: 6px;
}
body.dark-mode .gs-dropdown {
    background: #1e2124;
    box-shadow: rgba(0, 0, 0, 0.35) 0 8px 28px, rgba(255,255,255,0.04) 0 0 0 1px;
}
.gs-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mt-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gs-group-header svg {
    flex-shrink: 0;
    opacity: 0.7;
}
.gs-count {
    margin-left: auto;
    font-weight: 400;
    font-size: 11px;
    color: var(--mt-muted);
}
.gs-item {
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}
.gs-item-title {
    font-size: 14px;
    color: var(--mt-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gs-item-subtitle {
    font-size: 12px;
    color: var(--mt-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gs-item-active {
    background: rgba(0, 170, 255, 0.08);
}
body.dark-mode .gs-item-active {
    background: rgba(0, 170, 255, 0.14);
}
.gs-empty {
    padding: 18px 14px;
    font-size: 13px;
    color: var(--mt-muted);
    text-align: center;
}

/* ─── Filter-Chips (Desktop-Dropdown + Mobile-Overlay) ────────── */
.gs-filters {
    display: flex;
    flex-direction: column;
    padding: 4px 6px 6px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 4px;
}
body.dark-mode .gs-filters {
    border-bottom-color: rgba(255,255,255,0.06);
}
.gs-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    border: none;
    background: transparent;
    color: var(--mt-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
}
.gs-filters-toggle:hover {
    color: var(--mt-text);
    background: rgba(0,0,0,0.04);
}
body.dark-mode .gs-filters-toggle:hover {
    background: rgba(255,255,255,0.06);
}
.gs-filters-toggle svg { opacity: 0.7; flex-shrink: 0; }
.gs-filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    background: var(--mt-blue, #00aaff);
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.gs-filters-chevron {
    transition: transform 0.2s ease;
    margin-left: 2px;
}
.gs-filters.open .gs-filters-chevron { transform: rotate(180deg); }
.gs-filters-body {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 8px 4px 4px;
}
.gs-filters.open .gs-filters-body { display: flex; }
.gs-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.gs-filter-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--mt-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 4px;
    min-width: 64px;
}
.gs-filter-chip {
    padding: 4px 10px;
    border: 1px solid rgba(0,0,0,0.10);
    background: transparent;
    border-radius: 999px;
    font-size: 12px;
    color: var(--mt-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.gs-filter-chip:hover {
    background: rgba(0,170,255,0.06);
    border-color: rgba(0,170,255,0.3);
}
.gs-filter-chip.active {
    background: var(--mt-blue, #00aaff);
    border-color: var(--mt-blue, #00aaff);
    color: #fff;
}
body.dark-mode .gs-filter-chip {
    border-color: rgba(255,255,255,0.12);
    color: var(--mt-text);
}
body.dark-mode .gs-filter-chip:hover {
    background: rgba(0,170,255,0.12);
    border-color: rgba(0,170,255,0.4);
}

/* ─── Mobile-Overlay (Fullscreen-Suche) ──────────────────────── */
.gs-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 10500;
    background: #f5f6f8;
    flex-direction: column;
}
.gs-mobile-overlay.show {
    display: flex;
}
body.dark-mode .gs-mobile-overlay {
    background: #15171a;
}
.gs-mo-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(var(--safe-top, 0px) + 8px) 10px 10px;
    background: #fff;
    border-bottom: 1px solid var(--mt-border);
}
body.dark-mode .gs-mo-header {
    background: #1e2124;
    border-bottom-color: rgba(255,255,255,0.06);
}
.gs-mo-back {
    border: none;
    background: none;
    color: var(--mt-text);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.gs-mo-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: #f0f1f3;
    border-radius: 10px;
}
body.dark-mode .gs-mo-input-wrap {
    background: rgba(255,255,255,0.06);
}
.gs-mo-input-icon {
    color: var(--mt-muted);
    flex-shrink: 0;
}
.gs-mo-input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 15px;
    color: var(--mt-text);
    font-family: inherit;
    min-width: 0;
}
.gs-mo-input::placeholder { color: var(--mt-muted); }
.gs-mo-clear {
    border: none;
    background: none;
    color: var(--mt-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    flex-shrink: 0;
}
.gs-mo-filters {
    background: #fff;
    border-bottom: 1px solid var(--mt-border);
    padding: 8px 12px 10px;
}
.gs-mo-filters:empty { display: none; }
body.dark-mode .gs-mo-filters {
    background: #1e2124;
    border-bottom-color: rgba(255,255,255,0.06);
}
.gs-mo-filters .gs-filters {
    border-bottom: none;
    padding: 0;
    margin-bottom: 0;
}
.gs-mo-results {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    background: #f5f6f8;
    min-height: 0;
}
body.dark-mode .gs-mo-results {
    background: #15171a;
}
.gs-mo-results .gs-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--mt-muted);
    font-size: 14px;
}
.gs-mo-results .gs-group-header {
    padding: 10px 6px 4px;
}
.gs-mo-results .gs-item {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--mt-border);
}
body.dark-mode .gs-mo-results .gs-item {
    background: #1e2124;
    border-color: rgba(255,255,255,0.06);
}
body.gs-mo-active { overflow: hidden; }

/* Mobile-Such-Icon in hk-navbar (Desktop versteckt) */
.hk-navbar-search-mobile {
    display: none;
    border: none;
    background: none;
    color: var(--mt-text);
    width: 38px;
    height: 38px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.hk-navbar-search-mobile:hover { background: rgba(0,0,0,0.04); }
body.dark-mode .hk-navbar-search-mobile:hover { background: rgba(255,255,255,0.06); }
@media (max-width: 768px) {
    .hk-navbar-search-mobile { display: inline-flex; }
}

/* Search auf Admin/Account/Keycabinet-Seiten global ausblenden (kein Scope) */
body.admin-page .navbar-search,
body.account-page-body .navbar-search,
body.kc-page .navbar-search,
body.admin-page .hk-navbar-search-mobile,
body.account-page-body .hk-navbar-search-mobile,
body.kc-page .hk-navbar-search-mobile {
    display: none !important;
}

.input-search-shortcut {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid var(--mt-border);
    background: var(--mt-white);
    font-size: 0.75rem;
    color: var(--mt-muted);
    font-weight: 500;
}

/* ─── Profile avatar in navbar ───────────────────────────────────── */
.hk-nav-profile {
    padding-left: 0.5rem;
    cursor: pointer;
    position: relative;
}

.hk-nav-profile .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
}

.hk-nav-profile .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.hk-nav-profile .avatar .initial-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

/* ─── Notification bell in navbar ────────────────────────────────── */
.hk-nav-bell .notif-bell-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #262a2e;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    padding: 0;
}

.hk-nav-bell .notif-bell-btn:hover {
    background: #f7f7f7;
}

.hk-nav-bell .notif-bell-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    border-radius: 50rem;
    background: #22c55e;
    color: #fff;
    padding: 0 4px;
}

/* ─── Timer pill in navbar ───────────────────────────────────────── */
.nav-end-wrap .gt-pill-wrap {
    margin-right: 0.25rem;
}

/* ─── User dropdown (repositioned for hk-navbar) ────────────────── */
.hk-nav-profile .pnav-user-dropdown {
    top: 44px;
    right: 0;
    left: auto;
}

/* ─── Notification dropdown (repositioned for hk-navbar) ─────── */
.nav-end-wrap .notif-dropdown {
    top: 50px;
    right: 0;
}

/* ─── Mobile responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .hk-navbar {
        left: 0;
        padding: 0 0.75rem;
    }

    .hk-navbar-togglable {
        display: flex !important;
    }

    .navbar-search {
        display: none;
    }
}

/* Top bar (page-specific, below global navbar) */
.top-navbar {
    position: fixed;
    left: var(--sidebar-width);
    right: 0;
    top: 65px;
    height: 60px;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: var(--mt-white);
    border-bottom: 1px solid var(--mt-border);
    box-shadow: none;
}

/* Hide old user avatar in page navbars (now in global header) */
.top-navbar .pnav-user-avatar {
    display: none;
}

/* Hide old notification bell in page navbars */
.top-navbar .notif-bell-wrap {
    display: none;
}

/* Hide old timer pill in page navbars */
.top-navbar .gt-pill-wrap {
    display: none;
}

.top-navbar-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-link {
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--mt-text);
    font-size: 14px;
    background: transparent;
}

.nav-link:hover {
    background: rgba(0, 0, 0, 0.05);
}

.nav-user {
    color: var(--mt-muted);
    font-size: 14px;
    margin-right: 6px;
}

/* ========== Project Navbar ========== */
.project-navbar {
    border-bottom: 1px solid var(--mt-border);
    box-shadow: none;
    padding: 0 16px;
}

.pnav-left {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

.pnav-icon-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 0;
    transition: background 0.15s;
}

.pnav-icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.pnav-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255, 186, 51);
    color: #fff;
}

.pnav-icon-wrap svg {
    width: 20px;
    height: 20px;
}

.pnav-project-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--mt-text);
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.pnav-dropdown-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0;
    margin-left: 4px;
    color: var(--mt-muted);
    transition: background 0.15s, color 0.15s;
}

.pnav-dropdown-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--mt-text);
}

/* Projekt Dropdown Menü */
.pnav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 250px;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.08) 0 2px 12px, rgba(0, 0, 0, 0.04) 0 0 0 1px;
    z-index: 100;
    overflow: hidden;
}

.pnav-dropdown.show {
    display: block;
}

.pnav-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 8px;
}

.pnav-dropdown-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--mt-text);
}

.pnav-dropdown-close {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    color: var(--mt-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s;
}

.pnav-dropdown-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.pnav-dropdown-items {
    padding: 4px 8px 8px;
}

.pnav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: var(--mt-text);
    border-radius: 6px;
    transition: background 0.15s;
    text-align: left;
}

.pnav-dropdown-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.pnav-dropdown-item svg {
    flex-shrink: 0;
    color: var(--mt-muted);
}

.pnav-dropdown-divider {
    height: 1px;
    background: var(--mt-border);
    margin: 4px 10px;
}

.pnav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pnav-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 100%;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pnav-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.pnav-user-avatar .ap-user-avatar-initials {
    width: 34px;
    height: 34px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* User Dropdown (Avatar-Klick) */

/* ─── Globale Zeiterfassung-Pill (Header) ─────────────────────────── */

.gt-pill-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.gt-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px 0 10px;
    border-radius: 17px;
    background: #e53935;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: background 0.15s;
    line-height: 1;
    letter-spacing: 0.3px;
    user-select: none;
}

.gt-pill:hover {
    background: #c62828;
}

.gt-pill svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.gt-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--mt-white, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.08);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    overflow: hidden;
}

.gt-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gt-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--mt-border, #e5e7eb);
}

.gt-dropdown-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mt-text, #1f2937);
}

.gt-task-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: default;
}

.gt-task-stop {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #e53935;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.gt-task-stop:hover {
    background: #c62828;
}

.gt-task-stop svg {
    width: 16px;
    height: 16px;
}

.gt-task-info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.gt-task-info:hover .gt-task-title {
    color: #e53935;
}

.gt-task-code {
    font-size: 11px;
    font-weight: 600;
    color: var(--mt-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

.gt-task-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--mt-text, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
    line-height: 1.4;
}

.gt-task-time {
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #e53935;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

/* ─── Stopwatch-Icon (links neben Bell, sichtbar wenn KEIN Timer läuft) ─── */
.gt-icon-btn {
    /* Erbt von .hk-nav-btn (Größe, Hover etc.) */
    color: var(--mt-text, #1f2937);
}
.gt-icon-btn svg { opacity: 0.85; }
.gt-icon-btn:hover svg { opacity: 1; }

/* ─── Recent-Section im Dropdown ─────────────────────────────────────── */
.gt-recent-section {
    border-top: 1px solid var(--mt-border, #e5e7eb);
    padding: 6px 0 4px;
}
.gt-recent-header {
    padding: 6px 16px 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mt-muted, #6b7280);
}
.gt-recent-list {
    display: flex;
    flex-direction: column;
}
.gt-recent-empty {
    padding: 12px 16px;
    font-size: 12px;
    color: var(--mt-muted, #6b7280);
    text-align: center;
}
.gt-recent-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    text-decoration: none;
    color: var(--mt-text, #1f2937);
    transition: background 0.1s;
}
.gt-recent-item:hover {
    background: rgba(0, 0, 0, 0.04);
}
.gt-recent-info {
    flex: 1;
    min-width: 0;
}
.gt-recent-project {
    font-size: 10px;
    font-weight: 600;
    color: var(--mt-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gt-recent-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--mt-text, #1f2937);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}
.gt-recent-time {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--mt-muted, #6b7280);
    flex-shrink: 0;
}
body.dark-mode .gt-recent-section {
    border-top-color: #2e3338;
}
body.dark-mode .gt-recent-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* ─── Mobile Timer-Banner ─────────────────────────────────────────── */

.gt-mob-banner {
    display: none;
}

@media (max-width: 768px) {
    .gt-pill-wrap {
        display: none !important;
    }

    .gt-mob-banner {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: 44px;
        z-index: 1100;
        background: #e53935;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 12px;
        transform: translateY(-100%);
        transition: transform 0.25s ease;
    }

    .gt-mob-banner.visible {
        transform: translateY(0);
    }

    .gt-mob-stop {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,0.4);
        background: transparent;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .gt-mob-stop:active {
        background: rgba(255,255,255,0.2);
    }

    .gt-mob-stop svg {
        width: 16px;
        height: 16px;
    }

    .gt-mob-info {
        flex: 1;
        min-width: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .gt-mob-title {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    .gt-mob-time {
        font-size: 15px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: #fff;
        flex-shrink: 0;
        letter-spacing: 0.5px;
    }

}

/* ─── Benachrichtigungs-Glocke ──────────────────────────────────────── */

.notif-bell-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.notif-bell-btn {
    position: relative;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--mt-muted);
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-bell-btn:hover {
    background: rgba(0,0,0,0.06);
    color: var(--mt-text);
}

.notif-bell-badge {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.notif-dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 1001;
    overflow: hidden;
}

.notif-dropdown.show {
    display: flex;
}

.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--mt-border);
}

.notif-dropdown-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--mt-text);
}

.notif-dropdown-mark-read {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--mt-muted);
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.notif-dropdown-mark-read:hover {
    background: rgba(0,0,0,0.06);
    color: var(--mt-blue);
}

.notif-dropdown-body {
    overflow-y: auto;
    max-height: 400px;
    flex: 1;
}

.notif-dropdown-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--mt-muted);
}

.notif-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mt-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}

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

.notif-item:hover {
    background: rgba(0,0,0,0.03);
}

.notif-item-unread {
    background: rgba(74,158,218,0.06);
}

.notif-item-unread:hover {
    background: rgba(74,158,218,0.1);
}

.notif-item-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(74,158,218,0.12);
    color: var(--mt-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-item-content {
    flex: 1;
    min-width: 0;
}

.notif-item-text {
    font-size: 13px;
    color: var(--mt-text);
    line-height: 1.4;
}

.notif-item-text strong {
    font-weight: 600;
}

.notif-item-time {
    font-size: 11px;
    color: var(--mt-muted);
    margin-top: 2px;
}

/* ─── Recently Viewed Tasks Dropdown ─────────────────────────────── */

.recent-tasks-wrap {
    display: none;
    position: relative;
    margin-left: 8px;
}

body.app-projects-page .recent-tasks-wrap,
body.mytasks-page .recent-tasks-wrap,
body.project-page .recent-tasks-wrap {
    display: flex;
    align-items: center;
}

.rv-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    background: var(--mt-bg);
    border: 1px solid var(--mt-border);
    border-radius: 0.5rem;
    padding: 0 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--mt-muted);
    transition: border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    line-height: 1;
}

.rv-trigger:hover {
    border-color: var(--mt-blue, #4a9eda);
    box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.1);
}

.rv-trigger svg {
    flex-shrink: 0;
}

.rv-trigger-label {
    color: var(--mt-muted);
    opacity: 0.7;
}

.rv-trigger-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--mt-blue, #4a9eda);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.rv-trigger-chevron {
    transition: transform 0.2s;
}

.rv-dropdown.show ~ .rv-trigger .rv-trigger-chevron,
.rv-trigger[aria-expanded="true"] .rv-trigger-chevron {
    transform: rotate(180deg);
}

.rv-dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 380px;
    max-height: 520px;
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 1001;
    overflow: hidden;
}

.rv-dropdown.show {
    display: flex;
}

.rv-dropdown-header {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--mt-border);
}

.rv-dropdown-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--mt-text);
}

.rv-dropdown-subtitle {
    font-size: 12px;
    color: var(--mt-muted);
    margin-top: 2px;
}

.rv-dropdown-body {
    overflow-y: auto;
    max-height: 430px;
    flex: 1;
}

.rv-dropdown-empty {
    padding: 32px 18px;
    text-align: center;
    font-size: 13px;
    color: var(--mt-muted);
}

.rv-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--mt-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}

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

.rv-item:hover {
    background: rgba(0,0,0,0.03);
}

.rv-item-completed {
    opacity: 0.55;
}

.rv-item-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    font-weight: 600;
}

.rv-item-content {
    flex: 1;
    min-width: 0;
}

.rv-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--mt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-item-project {
    font-size: 12px;
    color: var(--mt-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-item-time {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--mt-muted);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .recent-tasks-wrap {
        display: none !important;
    }
}

/* ─── Quick-Start Tasks Dropdown ─────────────────────────────────── */

.quick-start-wrap {
    display: none;
    position: relative;
    margin-left: 8px;
}

body.app-projects-page .quick-start-wrap,
body.mytasks-page .quick-start-wrap,
body.project-page .quick-start-wrap {
    display: flex;
}

.qs-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    background: linear-gradient(135deg, rgba(0, 170, 255, 0.08), rgba(0, 170, 255, 0.04));
    border: 1px solid rgba(0, 170, 255, 0.25);
    border-radius: 0.5rem;
    padding: 0 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--mt-blue, #00aaff);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    white-space: nowrap;
    line-height: 1;
}

.qs-trigger:hover {
    border-color: var(--mt-blue, #00aaff);
    box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.15);
    background: linear-gradient(135deg, rgba(0, 170, 255, 0.12), rgba(0, 170, 255, 0.06));
}

.qs-trigger svg {
    flex-shrink: 0;
}

.qs-trigger-label {
    opacity: 0.85;
}

.qs-trigger-chevron {
    transition: transform 0.2s;
}

.qs-dropdown.show ~ .qs-trigger .qs-trigger-chevron,
.qs-trigger[aria-expanded="true"] .qs-trigger-chevron {
    transform: rotate(180deg);
}

.qs-dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 380px;
    max-height: 520px;
    background: var(--mt-white);
    border: 1px solid rgba(0, 170, 255, 0.2);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 120, 200, 0.12);
    z-index: 1001;
    overflow: hidden;
}

.qs-dropdown.show {
    display: flex;
}

.qs-dropdown-header {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--mt-border);
    background: linear-gradient(135deg, rgba(0, 170, 255, 0.06), transparent);
}

.qs-dropdown-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--mt-blue, #00aaff);
}

.qs-dropdown-subtitle {
    font-size: 12px;
    color: var(--mt-muted);
    margin-top: 2px;
}

.qs-dropdown-body {
    overflow-y: auto;
    max-height: 430px;
    flex: 1;
}

.qs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    text-decoration: none;
    color: var(--mt-text);
    transition: background 0.1s;
    border-bottom: 1px solid var(--mt-border-light, rgba(0,0,0,0.04));
    cursor: pointer;
}

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

.qs-item:hover {
    background: rgba(0, 170, 255, 0.06);
}

.qs-item-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
}

.qs-item-content {
    flex: 1;
    min-width: 0;
}

.qs-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--mt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qs-item-project {
    font-size: 11px;
    color: var(--mt-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qs-item-play {
    flex-shrink: 0;
    color: var(--mt-blue, #00aaff);
    opacity: 0.5;
    transition: opacity 0.15s;
}

.qs-item:hover .qs-item-play {
    opacity: 1;
}

/* Quick-Start Mobile Button */
.qs-mobile-btn {
    display: none;
    color: var(--mt-blue, #00aaff);
}

@media (max-width: 768px) {
    .quick-start-wrap {
        display: none !important;
    }
    .qs-mobile-btn {
        display: inline-flex;
        border: none;
        background: none;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Quick-Start Mobile Overlay */
.qs-mobile-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: var(--mt-white);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.qs-mobile-overlay.show {
    right: 0;
}

.qs-mobile-overlay-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--mt-border);
    background: linear-gradient(135deg, rgba(0, 170, 255, 0.06), transparent);
}

.qs-mobile-overlay-back {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    color: var(--mt-blue, #00aaff);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.qs-mobile-overlay-back:hover {
    background: rgba(0, 170, 255, 0.08);
}

.qs-mobile-overlay-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--mt-blue, #00aaff);
}

.qs-mobile-overlay-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.qs-mobile-overlay-body .qs-item {
    padding: 14px 18px;
}

/* ─── Quick-Start Toggle in Time Tracking Popover ────────────────── */

.tt-quickstart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 2px;
    margin-top: 8px;
    border-top: 1px solid var(--mt-border-light, rgba(0,0,0,0.06));
}

.tt-quickstart-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mt-muted);
    cursor: pointer;
    user-select: none;
}

.tt-quickstart-label svg {
    color: var(--mt-blue, #00aaff);
    opacity: 0.6;
}

.tt-quickstart-toggle {
    position: relative;
    width: 40px;
    height: 22px;
    border: none;
    border-radius: 11px;
    background: var(--mt-border, #d1d5db);
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
}

.tt-quickstart-toggle.active {
    background: var(--mt-blue, #00aaff);
}

.tt-quickstart-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.tt-quickstart-toggle.active .tt-quickstart-toggle-knob {
    transform: translateX(18px);
}

/* ─── User Dropdown ───────────────────────────────────────────────── */

.pnav-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 200px;
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 1000;
    overflow: hidden;
}

.pnav-user-dropdown.show {
    display: block;
}

.pnav-user-dropdown-header {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pnav-user-dropdown-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--mt-text);
}

.pnav-user-dropdown-role {
    font-size: 12px;
    color: var(--mt-muted);
}

.pnav-user-dropdown-divider {
    height: 1px;
    background: var(--mt-border);
}

.pnav-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--mt-text);
    transition: background 0.15s;
}

.pnav-user-dropdown-item:hover {
    background: rgba(0,0,0,0.04);
}

.pnav-user-dropdown-item svg {
    flex-shrink: 0;
    color: var(--mt-muted);
}

/* Layout content */
.main-content {
    position: fixed;
    left: var(--sidebar-width);
    right: 0;
    top: 125px; /* 65px hk-navbar + 60px page navbar */
    bottom: 0;
    overflow: auto;
    padding: 24px;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.page-header h1 {
    font-size: 24px;
    font-weight: 600;
}

.back-link {
    color: var(--mt-muted);
    text-decoration: none;
    font-size: 20px;
    line-height: 1;
}

/* Buttons / forms */
.btn {
    border: 1px solid transparent;
    border-radius: 18px;
    height: 36px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--mt-blue);
    color: var(--mt-white);
    border-color: var(--mt-blue);
}

.btn-primary:hover {
    background: rgb(0, 156, 234);
    border-color: rgb(0, 156, 234);
}

.btn-secondary {
    background: rgba(0, 0, 0, 0);
    color: var(--mt-text);
    border-color: rgba(61, 71, 77, 0.35);
}

.btn-secondary:hover {
    background: rgba(0, 0, 0, 0.04);
}

.btn-danger {
    background: rgb(208, 31, 46);
    color: #fff;
    border-color: rgb(208, 31, 46);
}

.form-group {
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--mt-text);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(61, 71, 77, 0.2);
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    color: var(--mt-text);
    font-size: 15px;
}

.form-group textarea {
    min-height: 90px;
    height: auto;
    padding-top: 10px;
}

.form-group small {
    color: var(--mt-muted);
    font-size: 12px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Dashboard cards */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.project-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 2px 8px 0;
    padding: 16px;
    color: inherit;
    text-decoration: none;
}

.project-card h3 {
    font-size: 16px;
    margin-bottom: 6px;
}

.project-card p {
    font-size: 13px;
    color: var(--mt-muted);
    margin-bottom: 10px;
}

.project-card-footer {
    font-size: 12px;
    color: var(--mt-muted);
}

/* Project/Kanban */
.project-view.main-content {
    padding: 0;
}

/* project-toolbar-left/actions entfernt – Header jetzt in project-navbar */

.kanban-board {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow-x: auto;
    min-height: 100%;
}

.kanban-column {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    border-radius: 0;
    background: rgb(241, 243, 245);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.kanban-column:nth-child(even) {
    background: rgb(248, 249, 250);
}

.column-header {
    height: 60px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.kanban-column:nth-child(6n + 1) .column-header { background: rgb(76, 191, 130); }
.kanban-column:nth-child(6n + 2) .column-header { background: rgb(255, 186, 51); }
.kanban-column:nth-child(6n + 3) .column-header { background: rgb(76, 191, 130); }
.kanban-column:nth-child(6n + 4) .column-header { background: rgb(61, 204, 61); }
.kanban-column:nth-child(6n + 5) .column-header { background: rgb(0, 170, 255); }
.kanban-column:nth-child(6n + 6) .column-header { background: rgb(208, 31, 46); }

.ch-icon {
    color: #fff;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.9;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.15s;
}

.ch-icon:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ch-icon svg {
    width: 18px;
    height: 18px;
}

.column-header h3 {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Spaltenoptionen-Trigger (...) */
.ch-options-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}

.column-header:hover .ch-options-trigger {
    opacity: 1;
}

.ch-options-trigger:hover {
    background: rgba(255, 255, 255, 0.25);
}

.ch-count {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 10px;
    padding: 2px 8px;
    flex-shrink: 0;
}

/* ===== Spaltenoptionen-Menü ===== */
.col-options-menu {
    display: none;
    position: fixed;
    z-index: 9999;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    width: 300px;
    overflow: hidden;
    animation: colMenuFadeIn 0.12s ease-out;
}

.col-options-menu.show {
    display: block;
}

@keyframes colMenuFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.col-options-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgb(235, 238, 240);
}

.col-options-title {
    font-size: 15px;
    font-weight: 600;
    color: rgb(61, 71, 77);
}

.col-options-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    font-size: 20px;
    color: rgb(138, 148, 153);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.col-options-close:hover {
    background: rgb(243, 244, 246);
}

.col-options-body {
    padding: 6px 0;
}

.col-options-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    color: rgb(61, 71, 77);
    transition: background 0.1s;
}

.col-options-item:hover {
    background: rgb(243, 244, 246);
}

.col-options-item svg {
    flex-shrink: 0;
    color: rgb(138, 148, 153);
}

.col-options-has-sub {
    position: relative;
}

.col-options-arrow {
    margin-left: auto;
    color: rgb(138, 148, 153);
}

.col-options-submenu {
    padding: 2px 0 2px 0;
    background: rgb(249, 250, 251);
    border-top: 1px solid rgb(235, 238, 240);
    border-bottom: 1px solid rgb(235, 238, 240);
}

.col-options-sub-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px 9px 46px;
    cursor: pointer;
    font-size: 13px;
    color: rgb(61, 71, 77);
    transition: background 0.1s;
}

.col-options-sub-item:hover {
    background: rgb(235, 238, 240);
}

.col-sort-check {
    color: rgb(76, 191, 130);
    font-weight: 700;
    font-size: 14px;
}

.col-options-separator {
    height: 1px;
    background: rgb(235, 238, 240);
    margin: 4px 0;
}

.col-options-danger {
    color: rgb(208, 31, 46) !important;
    justify-content: center;
    font-weight: 500;
}

.col-options-danger:hover {
    background: rgba(208, 31, 46, 0.06) !important;
}

.col-options-no-hover {
    flex-wrap: wrap;
    cursor: default;
}

.col-options-no-hover:hover {
    background: transparent !important;
}

/* Farb-Swatches im Spaltenmenü */
.mt-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    width: 100%;
}

.mt-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s, border-color 0.1s;
}

.mt-color-swatch:hover {
    transform: scale(1.15);
}

.mt-color-swatch.active {
    border-color: rgb(61, 71, 77);
    box-shadow: 0 0 0 2px #fff inset;
}

/* ===== Spalte-Umbenennen-Overlay ===== */
.col-rename-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.col-rename-dialog {
    background: #fff;
    border-radius: 12px;
    width: 380px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.col-rename-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    font-size: 16px;
    font-weight: 600;
    color: rgb(61, 71, 77);
}

.col-rename-close {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    font-size: 22px;
    color: rgb(138, 148, 153);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.col-rename-close:hover {
    background: rgb(243, 244, 246);
}

.col-rename-body {
    padding: 0 20px 16px;
}

.col-rename-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgb(210, 215, 218);
    border-radius: 8px;
    font-size: 15px;
    color: rgb(61, 71, 77);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.col-rename-input:focus {
    border-color: rgb(0, 170, 255);
}

.col-rename-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 20px 16px;
}

.col-rename-cancel {
    padding: 8px 18px;
    border: 1px solid rgb(210, 215, 218);
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
    color: rgb(61, 71, 77);
    cursor: pointer;
    transition: background 0.15s;
}

.col-rename-cancel:hover {
    background: rgb(243, 244, 246);
}

.col-rename-save {
    padding: 8px 18px;
    border: none;
    background: rgb(0, 170, 255);
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.col-rename-save:hover {
    background: rgb(0, 150, 230);
}

.task-list {
    padding: 8px;
    min-height: 0;
}

.task-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 2px 8px 0;
    padding: 17px 20px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: box-shadow 0.15s;
    overflow: hidden;
}

.task-card:hover {
    box-shadow: rgba(0, 0, 0, 0.04) 0 0 0 1px, rgba(0, 0, 0, 0.08) 0 2px 6px 0, rgba(0, 0, 0, 0.08) 0 4px 12px 0;
}

/* Status Badges */
.tc-badge {
    display: flex;
    align-items: center;
    height: 40px;
    margin: -17px -20px 17px -20px;
    padding: 0 20px;
    border-radius: 10px 10px 0 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    gap: 0;
}

.tc-badge svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    flex-shrink: 0;
}

.tc-badge-done {
    color: rgb(61, 204, 61);
    background: rgba(61, 204, 61, 0.2);
}

.tc-badge-overdue {
    color: rgb(255, 170, 0);
    background: rgba(255, 170, 0, 0.2);
}

/* Projekt-Info (nur Aufgaben-Bereich) */
.tc-project-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.tc-project-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.tc-project-icon svg {
    width: 16px;
    height: 16px;
}

.tc-project-text {
    flex: 1;
    min-width: 0;
}

.tc-project-name {
    font-size: 12px;
    font-weight: 500;
    color: rgb(61, 71, 77);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-project-column {
    font-size: 11px;
    color: rgb(138, 148, 153);
    line-height: 1.3;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Title + Assignee */
.tc-title-row {
    display: flex;
    align-items: flex-start;
}

.task-card h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 23px;
    flex: 1;
    min-width: 0;
    color: var(--mt-text);
    padding-right: 10px;
}

.tc-assignee {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    overflow: hidden;
    align-self: flex-start;
}

.tc-assignee img,
.tc-assignee .ap-user-avatar-initials {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    object-fit: cover;
}

/* Title completed */
.tc-title-completed {
    text-decoration: line-through;
    color: rgb(138, 148, 153);
}

/* Footer Icons + Tags */
.tc-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0;
}

.tc-mini {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    margin-top: 10px;
    color: rgb(138, 148, 153);
    white-space: nowrap;
}

.tc-mini svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tc-mini-text {
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    padding-left: 6px;
}

.tc-mini.tc-mini-due .tc-mini-text {
    padding-left: 4px;
}

.tc-mini.tc-mini-overdue {
    color: rgb(255, 170, 0);
}

.tc-mini.tc-mini-overdue .tc-mini-text {
    color: orange;
}

.tc-mini.tc-mini-budget-warn {
    color: #e53935;
}

.tc-tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    margin-right: 10px;
    margin-top: 10px;
}

/* Add Task Button */
.add-task-btn {
    margin: 4px 8px 8px;
    padding: 6px 16px;
    width: auto;
    align-self: center;
    height: auto;
    border-radius: 20px;
    border: 1px solid rgb(225, 228, 230);
    color: var(--mt-text);
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
    box-shadow: rgba(0, 0, 0, 0.04) 0 1px 2px;
    white-space: nowrap;
}

.add-task-btn:hover {
    border-color: rgb(200, 205, 208);
    box-shadow: rgba(0, 0, 0, 0.08) 0 2px 6px;
}

/* Empty Column State */
.column-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: rgb(210, 215, 218);
}

.column-empty span {
    font-size: 14px;
    color: rgb(180, 185, 190);
    margin-top: 12px;
}

.kanban-column.drag-over {
    outline: 2px dashed var(--mt-blue);
    outline-offset: -6px;
}

.task-card.dragging {
    opacity: 0.7;
}

/* ===== Column Icon Picker ===== */
.cip-overlay {
    position: fixed;
    z-index: 5000;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    min-width: 0;
}

.cip-content {
    padding: 12px;
}

/* Kompaktansicht: Icons + Expand-Button */
.cip-compact {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cip-icons {
    display: flex;
    gap: 6px;
}

.cip-icon-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 7.5px;
    background: rgb(240, 241, 242);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(61, 71, 77);
    padding: 0;
    transition: background 0.15s, box-shadow 0.15s;
}

.cip-icon-btn:hover {
    background: rgb(225, 228, 230);
}

.cip-icon-btn.selected {
    box-shadow: 0 0 0 2px #00aaff;
    background: rgba(0, 170, 255, 0.1);
}

.cip-icon-btn svg {
    width: 22px;
    height: 22px;
}

.cip-expand-btn {
    width: 32px;
    height: 40px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(138, 148, 153);
    padding: 0;
    margin-left: 2px;
    transition: background 0.15s, color 0.15s;
}

.cip-expand-btn:hover {
    background: rgb(240, 241, 242);
    color: rgb(61, 71, 77);
}

/* Farb-Palette */
.cip-colors {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgb(240, 242, 243);
}

.cip-color-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    padding: 0;
    background: none;
    position: relative;
}

.cip-color-dot:hover {
    transform: scale(1.2);
}

.cip-color-dot.selected {
    border-color: rgb(61, 71, 77);
}

.cip-color-dot-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
}

/* Erweiterte Ansicht */
.cip-expanded {
    padding: 0;
    width: 340px;
    max-height: 400px;
    overflow-y: auto;
}

.cip-expanded-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgb(240, 242, 243);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    font-size: 14px;
    font-weight: 600;
    color: rgb(61, 71, 77);
}

.cip-back-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(138, 148, 153);
    padding: 0;
    transition: background 0.15s;
}

.cip-back-btn:hover {
    background: rgb(240, 241, 242);
}

.cip-expanded-body {
    padding: 10px 14px 14px;
}

.cip-category-label {
    font-size: 12px;
    color: rgb(138, 148, 153);
    margin-bottom: 10px;
    margin-top: 14px;
}

.cip-category-label:first-child {
    margin-top: 0;
}

.cip-category-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.cip-expanded .cip-icon-btn {
    width: 48px;
    height: 48px;
    border-radius: 7.5px;
}

.cip-expanded .cip-icon-btn svg {
    width: 24px;
    height: 24px;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.42);
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 20px 0;
}

.modal-content {
    width: min(540px, calc(100% - 24px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.12) 0 8px 28px;
    padding: 22px;
    position: relative;
    flex-shrink: 0;
}

.close {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 28px;
    color: var(--mt-muted);
    cursor: pointer;
}

/* Table/Admin */
.table-container {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 2px 8px 0;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mt-border);
    font-size: 14px;
}

.data-table th {
    background: #fff;
    color: var(--mt-muted);
    font-weight: 500;
}

.data-table .actions {
    /* Gleiches Prinzip wie globales .actions — kein `display:flex` auf td */
    white-space: nowrap;
    vertical-align: middle;
}
.data-table .actions > .action-icon-btn + .action-icon-btn,
.data-table .actions > .action-icon-btn + button,
.data-table .actions > .action-icon-btn + a {
    margin-left: 4px;
}

.error-message {
    color: rgb(208, 31, 46);
    margin-top: 8px;
    display: none;
    font-size: 13px;
}

.error-message.show {
    display: block;
}

/* ===== TASK OVERLAY (MeisterTask-Style) ===== */

#taskModal.modal {
    background: rgba(138, 148, 153, 0.8);
}

#taskModal.modal.show {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
}

.task-overlay-scroll {
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 50px 20px;
}

/* Dialog container */
.task-dialog {
    width: 800px;
    max-width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(0,0,0,0.07) 0 0 0 1px, rgba(0,0,0,0.15) 0 5px 10px -5px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* ---------- HEADER ---------- */
.td-header {
    min-height: 80px;
    padding: 22px 20px 22px 30px;
    border-bottom: 1px solid rgb(225, 228, 230);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.td-header-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.td-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
    flex-shrink: 0;
}

/* ===== Zeiterfassung Recording-Status ===== */
.td-sb-timer.recording .td-sb-timer-play {
    color: #c0392b;
}

.td-sb-timer.recording .tt-icon-play {
    display: none !important;
}

.td-sb-timer.recording .tt-icon-stop {
    display: block !important;
}

.td-sb-timer:not(.recording) .tt-icon-play {
    display: block;
}

.td-sb-timer:not(.recording) .tt-icon-stop {
    display: none !important;
}

.td-sb-timer.recording .td-sb-timer-display {
    color: #c0392b;
}

#taskTtHeaderBtn.recording {
    color: #e53935;
}

#taskTtHeaderBtn.recording svg path {
    fill: #e53935;
}

/* Zeiterfassung Popover */
.tt-popover {
    display: none;
    position: fixed;
    width: 300px;
    max-height: 80vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 1100;
    overflow: hidden;
}



.tt-popover.show {
    display: block;
}

.tt-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 8px;
}

.tt-popover-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--mt-text);
}

/* Gemeinsamer Close-Button für alle Popovers / Sheets */
.sheet-close-btn,
.tt-popover-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    border-radius: 6px;
    color: var(--mt-muted);
    transition: background 0.15s;
}

.sheet-close-btn:hover,
.tt-popover-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.tt-popover-body {
    padding: 12px 20px 20px;
    max-height: calc(80vh - 50px);
    overflow-y: auto;
}

.tt-total-time {
    font-size: 32px;
    font-weight: 300;
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    color: var(--mt-text);
    letter-spacing: -0.5px;
}

.tt-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    margin-bottom: 18px;
}

.tt-total-label {
    font-size: 13px;
    color: var(--mt-muted);
}

.tt-legend {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tt-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--mt-muted);
}

.tt-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.tt-legend-others {
    background: rgb(225, 228, 230);
}

.tt-legend-me {
    background: #c0392b;
}

/* Zeitbudget-Fortschrittsbalken */
.tt-budget-progress {
    margin-bottom: 14px;
}

.tt-bp-track {
    position: relative;
    width: 100%;
    height: 22px;
    background: rgb(235, 237, 240);
    border-radius: 11px;
    overflow: hidden;
}

.tt-bp-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 11px;
    transition: width 0.4s ease;
    min-width: 0;
}

.tt-bp-green  { background: #43a047; }
.tt-bp-yellow { background: #f9a825; }
.tt-bp-red    { background: #e53935; }

.tt-bp-label {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    white-space: nowrap;
}

.tt-bp-label-inside {
    left: 0;
    right: 0;
    justify-content: flex-start;
    padding-left: 10px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tt-bp-label-outside {
    right: 0;
    left: 0;
    justify-content: flex-end;
    padding-right: 10px;
    color: var(--mt-text, rgb(23, 43, 77));
    text-shadow: none;
}

/* Wochen-Chart */
.tt-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
    margin-bottom: 20px;
    padding: 0 2px;
}

.tt-chart-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.tt-chart-bar-container {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.tt-chart-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tt-chart-bar-others {
    width: 100%;
    background: rgb(225, 228, 230);
    border-radius: 3px 3px 0 0;
}

.tt-chart-bar-me {
    width: 100%;
    background: #c0392b;
}

.tt-chart-day {
    font-size: 11px;
    color: var(--mt-muted);
    margin-top: 5px;
    line-height: 1;
}

/* Personen-Liste unter dem Chart */
.tt-persons {
    margin-top: 12px;
    border-top: 1px solid rgb(225, 228, 230);
}

.tt-person-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgb(240, 241, 242);
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 4px;
    margin: 0 -4px;
    padding-left: 4px;
    padding-right: 4px;
}

.tt-person-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

.tt-person-row:last-child {
    border-bottom: none;
}

.tt-person-avatar {
    flex-shrink: 0;
}

.tt-person-avatar img,
.tt-person-avatar .avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.tt-person-time {
    font-size: 16px;
    font-weight: 500;
    color: rgb(61, 71, 77);
    font-variant-numeric: tabular-nums;
    min-width: 70px;
}

.tt-person-name {
    flex: 1;
    font-size: 14px;
    color: rgb(138, 148, 153);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-person-arrow {
    flex-shrink: 0;
    color: rgb(178, 187, 192);
    display: flex;
    align-items: center;
}

/* Einträge-Detail Panel */
.tt-entries-panel {
    margin-top: 8px;
    border-top: 1px solid rgb(225, 228, 230);
}

.tt-entries-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 6px;
}

.tt-entries-back {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: rgb(138, 148, 153);
    transition: background 0.15s;
    flex-shrink: 0;
}

.tt-entries-back:hover {
    background: rgba(0, 0, 0, 0.06);
}

.tt-entries-user {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: rgb(61, 71, 77);
}

.tt-entries-user img,
.tt-entries-user .avatar-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.tt-entry-add-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(138, 148, 153);
    flex-shrink: 0;
    margin-left: auto;
}

.tt-entry-add-btn:hover {
    background: rgba(0, 170, 255, 0.1);
    color: rgb(0, 170, 255);
}

.tt-add-entry-link {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: rgb(138, 148, 153);
    transition: color .15s;
}

.tt-add-entry-link:hover {
    color: rgb(0, 170, 255);
}

.tt-entries-list {
    max-height: 200px;
    overflow-y: auto;
}

.tt-entry-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid rgb(240, 241, 242);
    font-size: 13px;
    color: rgb(61, 71, 77);
}

.tt-entry-row:last-child {
    border-bottom: none;
}

.tt-entry-date {
    font-size: 12px;
    color: rgb(138, 148, 153);
    min-width: 95px;
    white-space: nowrap;
}

.tt-entry-duration {
    font-size: 14px;
    font-weight: 500;
    color: rgb(61, 71, 77);
    font-variant-numeric: tabular-nums;
    flex: 1;
}

.tt-entry-edit {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: rgb(178, 187, 192);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    opacity: 0;
}

.tt-entry-row:hover .tt-entry-edit {
    opacity: 1;
}

.tt-entry-edit:hover {
    background: rgba(0, 0, 0, 0.06);
    color: rgb(61, 71, 77);
}

.tt-entry-delete {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: rgb(178, 187, 192);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    opacity: 0;
}

.tt-entry-row:hover .tt-entry-delete {
    opacity: 1;
}

.tt-entry-delete:hover {
    background: rgba(231, 76, 60, 0.08);
    color: #c0392b;
}

/* Inline-Bearbeitung eines Zeiteintrags */
.tt-entry-edit-form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border-bottom: 1px solid rgb(240, 241, 242);
}

.tt-entry-edit-form input {
    width: 70px;
    padding: 4px 6px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    text-align: center;
}

.tt-entry-edit-form input:focus {
    border-color: rgb(0, 170, 255);
    outline: none;
}

.tt-entry-edit-form .tt-edit-save,
.tt-entry-edit-form .tt-edit-cancel {
    width: 26px;
    height: 26px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 14px;
    transition: background 0.15s;
}

.tt-entry-edit-form .tt-edit-save {
    background: rgb(0, 170, 255);
    color: #fff;
}

.tt-entry-edit-form .tt-edit-save:hover {
    background: rgb(0, 150, 230);
}

.tt-entry-edit-form .tt-edit-cancel {
    background: transparent;
    color: rgb(138, 148, 153);
}

.tt-entry-edit-form .tt-edit-cancel:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Start/Stop Button */
.tt-start-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgb(225, 228, 230);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #c0392b;
    transition: background 0.15s, border-color 0.15s;
}

.tt-start-btn:hover {
    background: rgba(192, 57, 43, 0.04);
    border-color: rgba(192, 57, 43, 0.3);
}

.tt-start-btn svg {
    color: #c0392b;
    fill: #c0392b;
}

.tt-start-btn .tt-start-icon-play {
    display: inline-block;
}

.tt-start-btn .tt-start-icon-stop {
    display: none !important;
}

.tt-start-btn.recording .tt-start-icon-play {
    display: none !important;
}

.tt-start-btn.recording .tt-start-icon-stop {
    display: inline-block !important;
}

/* Header Open/Completed toggle containers */
.td-header-open {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.td-header-completed {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 16px;
}

/* Archivieren button */
.td-archive-btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 15px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 7px;
    background: transparent;
    color: rgb(61, 71, 77);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.td-archive-btn:hover {
    background: rgba(61, 71, 77, 0.04);
    border-color: rgb(178, 187, 192);
}

/* Completed info area */
.td-completed-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.td-completed-check {
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity 0.15s;
}

.td-completed-check:hover {
    opacity: 0.7;
}

.td-completed-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.td-completed-label {
    font-size: 15px;
    font-weight: 400;
    color: rgb(61, 71, 77);
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-completed-label strong {
    font-weight: 700;
}

.td-completed-date {
    font-size: 13px;
    font-weight: 400;
    color: rgb(138, 148, 153);
    line-height: 18px;
    white-space: nowrap;
}

/* Header: Archiviert- und Gelöscht-Ansicht (gleiche Struktur) */
.td-header-archived,
.td-header-deleted,
.td-header-agent {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 12px;
}

/* KI-Agent Live-Run Banner */
.td-header-agent {
    background: rgba(0, 170, 255, 0.08);
    border-radius: 8px;
    padding: 6px 12px;
}
.td-agent-spinner {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.td-agent-text {
    flex: 1;
    min-width: 0;
}
.td-agent-label {
    font-weight: 600;
    color: rgb(0, 170, 255);
    font-size: 14px;
    line-height: 18px;
}
.td-agent-meta {
    font-size: 12px;
    color: var(--mt-muted);
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-archived-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgb(178, 187, 192);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.td-archived-icon svg {
    width: 20px;
    height: 20px;
}

/* Dots menu dropdown */
.td-dots-wrap {
    position: relative;
}

.td-dots-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.08) 0 2px 12px, rgba(0, 0, 0, 0.04) 0 0 0 1px;
    z-index: 200;
    padding: 4px;
    overflow: hidden;
}

.td-dots-dropdown.show {
    display: block;
}

.td-dots-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: rgb(61, 71, 77);
    font-family: inherit;
    border-radius: 6px;
    transition: background 0.15s;
    text-align: left;
}

.td-dots-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.td-dots-item svg {
    flex-shrink: 0;
    color: rgb(138, 148, 153);
}
.td-dots-item--danger {
    color: rgb(208, 31, 46);
}
.td-dots-item--danger svg {
    color: rgb(208, 31, 46);
}
.td-dots-item--danger:hover {
    background: rgba(208, 31, 46, 0.06);
}

/* "Verschieben"-Submenu-Indikator (Chevron-Right) */
.td-dots-item--has-sub {
    position: relative;
}

.td-dots-item-chevron {
    margin-left: auto;
    color: rgb(180, 188, 195) !important;
    flex-shrink: 0;
}

/* ===== TD-MOVE-CARD (Verschieben: Card mit zwei sliding inner pages) ===== */
.td-move-card {
    /* Position wird via JS inline gesetzt (positionCardForDesktop / mobile fullscreen).
       Defaults nur als Fallback, falls JS-Positionierung nicht greift. */
    position: fixed;
    top: 80px;
    right: 20px;
    width: 280px;
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: 14px;
    box-shadow: rgba(0, 0, 0, 0.08) 0 0 0 1px,
                rgba(0, 0, 0, 0.16) 0 12px 32px -8px;
    /* Über dem Task-Modal-Overlay (z-index: 1000) und allen anderen Modals */
    z-index: 10600;
    overflow: hidden;
    display: none;
}

.td-move-card.td-move-show {
    display: block;
}

/* Inner: Projekte-Page in Flow (definiert Card-Höhe), Spalten-Page absolut darüber */
.td-move-pages {
    position: relative;
    overflow: hidden;
}

.td-move-page {
    display: flex;
    flex-direction: column;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

/* Projekte-Page bleibt in Normal-Flow → definiert die Card-Höhe */
.td-move-page-projects {
    transform: translateX(0);
}

/* Spalten-Page legt sich darüber, ist initial rechts versteckt */
.td-move-page-columns {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    background: #fff;
}

/* Slide: beide Pages gleichzeitig nach links */
.td-move-card.td-move-show-columns .td-move-page-projects {
    transform: translateX(-100%);
}
.td-move-card.td-move-show-columns .td-move-page-columns {
    transform: translateX(0);
}

.td-move-spacer {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.td-move-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 6px;
    flex-shrink: 0;
}

.td-move-back,
.td-move-close {
    width: 28px;
    height: 28px;
    border: none;
    background: rgb(242, 244, 246);
    border-radius: 100%;
    color: rgb(61, 71, 77);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.td-move-back:hover,
.td-move-close:hover {
    background: rgb(225, 230, 234);
}

.td-move-title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: rgb(34, 41, 46);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-move-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 16px 8px;
    padding: 0 12px;
    height: 38px;
    border: 1px solid rgb(180, 188, 195);
    border-radius: 8px;
    background: #fff;
    flex-shrink: 0;
}

.td-move-search:focus-within {
    border-color: rgb(0, 170, 255);
    box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.18);
}

.td-move-search-icon {
    color: rgb(138, 148, 153);
    flex-shrink: 0;
}

.td-move-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: rgb(34, 41, 46);
    height: 100%;
}

.td-move-search input::placeholder {
    color: rgb(180, 188, 195);
}

.td-move-list {
    overflow-y: auto;
    padding: 4px 0 12px;
    /* Liste scrollt intern, falls Inhalt > Card-Höhe */
    max-height: calc(100vh - 260px);
}

.td-move-section {
    padding: 12px 16px 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgb(138, 148, 153);
    text-transform: none;
    letter-spacing: 0;
}

.td-move-section:first-child {
    padding-top: 8px;
}

.td-move-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.1s;
    color: rgb(34, 41, 46);
    font-size: 14px;
}

.td-move-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.td-move-item.td-move-item-active {
    background: rgba(0, 170, 255, 0.08);
}

.td-move-item-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgb(138, 148, 153);
}

.td-move-item-icon svg {
    width: 14px;
    height: 14px;
}

.td-move-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.td-move-empty {
    padding: 24px 16px;
    text-align: center;
    color: rgb(138, 148, 153);
    font-size: 13px;
}

/* Mobile: Card vollflächig (wie andere fp-Popover) */
@media (max-width: 768px) {
    body.project-page .td-move-card {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        max-height: none;
        border-radius: 0;
        z-index: 10600;
        display: none;
    }
    body.project-page .td-move-card.td-move-show {
        display: flex;
        flex-direction: column;
    }
    body.project-page .td-move-card .td-move-pages {
        flex: 1;
        min-height: 0;
    }
    body.project-page .td-move-card .td-move-page-projects {
        height: 100%;
    }
    body.project-page .td-move-card .td-move-header {
        padding: 16px;
        height: 56px;
    }
    body.project-page .td-move-card .td-move-list {
        flex: 1;
        max-height: none;
    }
}

/* Hover für Items: bei Active leicht stärker */
.td-move-item.td-move-item-active:hover {
    background: rgba(0, 170, 255, 0.12);
}

/* Pin-Dropdown */
.td-pin-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    min-width: 220px;
    z-index: 100;
    padding: 16px 20px 20px;
}

.td-pin-dropdown.show {
    display: block;
}

.td-pin-header {
    font-size: 15px;
    font-weight: 600;
    color: rgb(61, 71, 77);
    margin-bottom: 14px;
}

.td-pin-empty {
    font-size: 13px;
    color: rgb(138, 148, 153);
    line-height: 1.5;
}

.td-pin-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.td-pin-pill {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 20px;
    background: rgb(235, 238, 240);
    color: rgb(61, 71, 77);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: center;
}

.td-pin-pill:hover {
    background: rgb(220, 224, 227);
}

.td-pin-pill-active {
    color: #fff;
}

.td-pin-pill-active:hover {
    filter: brightness(0.9);
}

/* ===== Archivierte Aufgaben Overlay ===== */
.archived-overlay {
    position: fixed;
    inset: 0;
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

.archived-panel {
    width: 580px;
    max-width: 90vw;
    max-height: 80vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.archived-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 12px;
}

.archived-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: rgb(61, 71, 77);
    margin: 0;
}

.archived-close {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    color: rgb(138, 148, 153);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s;
}

.archived-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.archived-subheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 24px 12px;
}

.archived-count {
    font-size: 14px;
    color: rgb(138, 148, 153);
    font-weight: 400;
}

.archived-search-link {
    font-size: 14px;
    color: rgb(0, 170, 255);
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
}

.archived-search-link:hover {
    text-decoration: underline;
}

.archived-search {
    padding: 0 24px 12px;
}

.archived-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}

.archived-search input:focus {
    border-color: rgb(0, 170, 255);
}

.archived-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px;
}

.archived-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.archived-item:hover {
    background: rgba(0, 170, 255, 0.04);
}

.archived-item.active {
    background: rgba(0, 170, 255, 0.08);
}

.archived-item-icon {
    flex-shrink: 0;
    color: rgb(178, 187, 192);
}

.archived-item-info {
    flex: 1;
    min-width: 0;
}

.archived-item-title {
    font-size: 15px;
    font-weight: 500;
    color: rgb(61, 71, 77);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archived-item-meta {
    font-size: 13px;
    color: rgb(138, 148, 153);
    font-weight: 400;
}

.archived-item-restore {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: rgb(0, 170, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s;
    opacity: 0;
}

.archived-item:hover .archived-item-restore {
    opacity: 1;
}

.archived-item-restore:hover {
    background: rgba(0, 170, 255, 0.1);
}

.archived-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgb(138, 148, 153);
    font-size: 14px;
}

/* Complete button */
.td-complete-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 15px;
    border: 1px solid rgb(0, 170, 255);
    border-radius: 7px;
    background: transparent;
    color: rgb(0, 170, 255);
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
}

.td-complete-btn svg {
    flex-shrink: 0;
}

.td-complete-btn[data-completed="1"] {
    background: rgb(61, 204, 61);
    border-color: rgb(61, 204, 61);
    color: #fff;
}

/* Assignee trigger in header */
.td-assignee-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-right: 20px;
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Full-page nav bar — hidden on desktop, shown on mobile via @media block */
.fp-nav { display: none; }
/* Mobile-only elements — hidden on desktop */
.td-sb-value { display: none; }
/* Tags: show inline value on desktop too */
.td-sb-row-tags .td-sb-value { display: inline-flex; }
.td-sb-tt-icon { display: none; }
.td-sb-tt-label { display: none; }
/* Mobile tab bar — hidden on desktop */
.td-mobile-tabs { display: none; }
/* Mobile history section — hidden on desktop */
.td-history-section { display: none; }

/* ===== ASSIGNEE POPOVER ===== */
.assignee-popover {
    display: none;
    position: absolute;
    top: 100%;
    left: -30px;
    margin-top: 8px;
    width: 260px;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.08) 0 0 0 1px,
                rgba(0, 0, 0, 0.12) 0 8px 24px -4px;
    z-index: 200;
    flex-direction: column;
    overflow: hidden;
}

.assignee-popover.open {
    display: flex;
}

.ap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: rgb(61, 71, 77);
}

.ap-search {
    display: flex;
    align-items: center;
    margin: 12px 16px;
    padding: 0 12px;
    height: 40px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 8px;
    background: #fff;
}

.ap-search-icon {
    color: rgb(138, 148, 153);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ap-search-input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 15px;
    font-family: inherit;
    color: rgb(61, 71, 77);
    padding: 0 10px;
    height: 100%;
}

.ap-search-input::placeholder {
    color: rgb(200, 205, 208);
}

.ap-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 0 0 8px;
}

.ap-user-row {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.1s;
    gap: 12px;
}

.ap-user-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

.ap-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    object-fit: cover;
}

.ap-user-avatar-initials {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    font-weight: 500;
    font-weight: 600;
}

.ap-user-name {
    flex: 1;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: rgb(61, 71, 77);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-user-check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: rgb(0, 170, 255);
}

/* Separator line between assigned and unassigned */
.ap-separator {
    height: 1px;
    background: rgb(225, 228, 230);
    margin: 4px 20px;
}

.td-assignee-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 100%;
    overflow: hidden;
    background: rgb(225, 228, 230);
}

.td-assignee-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    object-fit: cover;
    display: block;
}

.td-assignee-info {
    display: flex;
    flex-direction: column;
    padding-left: 8px;
    min-width: 0;
    position: relative;
    height: 36px;
    justify-content: center;
}

.td-assignee-label {
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: rgb(138, 148, 153);
    white-space: nowrap;
    opacity: 0.8;
    position: absolute;
    top: -2px;
}

.td-assignee-name-row {
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.td-assignee-name {
    font-size: 17px;
    line-height: 25px;
    font-weight: 500;
    color: rgb(61, 71, 77);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron icon (small, used everywhere) */
.td-chevron {
    color: rgba(61, 71, 77, 0.5);
    flex-shrink: 0;
    margin-left: 4px;
    width: 16px;
    height: 16px;
}

/* Header icon buttons (pin, dots) */
.td-icon-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: rgb(61, 71, 77);
    cursor: pointer;
    padding: 6px;
}

.td-icon-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Pin-Wrapper */
.td-pin-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Pin-Pill-Button (wenn gepinnt) */
.td-pin-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: filter 0.15s;
}

.td-pin-pill-btn:hover {
    filter: brightness(0.92);
}

.td-pin-pill-btn svg {
    flex-shrink: 0;
}

.td-pin-pill-label {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Close button */
.td-close-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
    color: rgb(61, 71, 77);
    cursor: pointer;
    padding: 4px;
}

.td-close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* ---------- BODY (two columns) ---------- */
.td-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Left main area */
.td-main {
    width: 560px;
    flex-shrink: 0;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Title */
.td-title-wrap {
    padding: 0 30px 0 20px;
    margin-bottom: 0;
}

.td-title {
    width: 100%;
    padding: 5px 10px;
    font-size: 21px;
    font-weight: 500;
    line-height: 29px;
    color: rgb(61, 71, 77);
    outline: none;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: text;
    min-height: 36px;
}

.td-title:hover,
.td-title:focus {
    border-color: rgb(225, 228, 230);
    background: rgba(0, 0, 0, 0.02);
}

.td-title:empty::before {
    content: attr(data-placeholder);
    color: rgb(138, 148, 153);
}

/* Description */
.td-desc-wrap {
    padding: 5px 30px 5px 20px;
    margin-bottom: 10px;
}

.td-description {
    width: 100%;
    padding: 5px 10px;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: rgb(138, 148, 153);
    outline: none;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: text;
    min-height: 28px;
    white-space: pre-wrap;
    /* Lange URLs / Wörter ohne Leerzeichen sollen brechen,
       statt rechts aus dem Feld zu laufen */
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}
.td-description a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.td-description:hover,
.td-description:focus {
    border-color: rgb(225, 228, 230);
    background: rgba(0, 0, 0, 0.02);
    color: rgb(61, 71, 77);
}

.td-description:empty::before {
    content: attr(data-placeholder);
    color: rgb(138, 148, 153);
}

/* View mode: no white-space pre-wrap (markdown renders block elements) */
.td-description--view {
    white-space: normal;
    cursor: pointer;
    color: rgb(61, 71, 77);
}
.td-description--view:empty::before {
    content: attr(data-placeholder);
    color: rgb(138, 148, 153);
}
/* Edit mode */
.td-description--edit {
    white-space: pre-wrap;
    cursor: text;
}

/* Markdown rendered content inside description */
.td-description--view p { margin: 0 0 6px; }
.td-description--view p:last-child { margin-bottom: 0; }
.td-description--view ul,
.td-description--view ol { margin: 4px 0 6px 20px; padding: 0; }
.td-description--view li { margin-bottom: 2px; }
.td-description--view h1 { font-size: 20px; font-weight: 700; margin: 8px 0 4px; }
.td-description--view h2 { font-size: 17px; font-weight: 700; margin: 6px 0 4px; }
.td-description--view h3 { font-size: 15px; font-weight: 700; margin: 4px 0 4px; }
.td-description--view hr { border: none; border-top: 1px solid rgb(225,228,230); margin: 8px 0; }
.td-description--view blockquote { border-left: 3px solid rgb(200,210,215); margin: 4px 0 4px 8px; padding: 2px 10px; color: rgb(100,115,125); }
.td-description--view code { background: rgb(245,246,247); border-radius: 3px; padding: 1px 5px; font-family: monospace; font-size: 13px; color: #e44; }
.td-description--view pre { background: rgb(245,246,247); border-radius: 4px; padding: 8px 12px; overflow-x: auto; }
.td-description--view pre code { background: none; padding: 0; color: inherit; }
.td-description--view strong { font-weight: 700; color: rgb(40,55,65); }
.td-description--view s { text-decoration: line-through; }

/* Hint below description – nur im Edit-Modus sichtbar */
.td-desc-hint {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: rgb(138, 148, 153);
    padding: 4px 10px 2px;
}
.td-desc-hint--visible {
    display: flex;
}
.td-desc-hint-icon { font-size: 13px; }
.td-desc-format-link {
    color: rgb(80, 150, 220);
    text-decoration: none;
    font-size: 12px;
}
.td-desc-format-link:hover { text-decoration: underline; }

/* Formatting Guide Overlay */
.fmt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fmt-modal {
    background: #fff;
    border-radius: 10px;
    width: 680px;
    max-width: 96vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}
.fmt-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid rgb(230,235,238);
}
.fmt-modal-logo { flex-shrink: 0; margin-top: 2px; }
.fmt-modal-title-wrap { flex: 1; }
.fmt-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: rgb(30, 40, 50);
    margin-bottom: 5px;
}
.fmt-modal-sub {
    font-size: 13px;
    color: rgb(100, 115, 130);
    line-height: 1.5;
}
.fmt-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: rgb(150, 160, 170);
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
}
.fmt-modal-close:hover { color: rgb(60, 75, 90); }
.fmt-modal-body {
    overflow-y: auto;
    padding: 16px 24px 24px;
}
.fmt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.fmt-table tr { border-bottom: 1px solid rgb(240,243,245); }
.fmt-table tr:last-child { border-bottom: none; }
.fmt-table td {
    padding: 10px 12px;
    vertical-align: middle;
    width: 50%;
    color: rgb(50, 65, 75);
    line-height: 1.55;
}
.fmt-table td:first-child {
    color: rgb(100, 115, 130);
    font-family: monospace;
    font-size: 13px;
}
.fmt-table code {
    background: rgb(245,246,247);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: monospace;
    font-size: 13px;
}
.fmt-table ul, .fmt-table ol { margin: 2px 0 2px 18px; padding: 0; }
.fmt-table h1 { font-size: 18px; font-weight: 700; margin: 0; }
.fmt-table h2 { font-size: 15px; font-weight: 700; margin: 0; }
.fmt-table h3 { font-size: 13px; font-weight: 700; margin: 0; }
.fmt-table hr { border: none; border-top: 1px solid rgb(210,218,224); margin: 4px 0; }
.fmt-table blockquote { border-left: 3px solid rgb(200,210,215); margin: 0 0 0 6px; padding: 2px 10px; color: rgb(100,115,125); }
.fmt-code-red { color: #e44 !important; background: rgb(245,246,247); border-radius: 3px; padding: 1px 5px; }

/* Sections */
.td-section {
    padding: 0 30px 0 20px;
}

/* + Add row (blue links) */
.td-add-row {
    display: flex;
    align-items: center;
    height: 32px;
    padding-left: 15px;
    gap: 0;
    cursor: pointer;
    margin-bottom: 5px;
}

.td-add-icon {
    color: rgb(0, 170, 255);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.td-add-link {
    padding-left: 14px;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    color: rgb(0, 170, 255);
    cursor: pointer;
}

.td-add-link:hover {
    text-decoration: underline;
}

/* Badge (BUSINESS) */
.td-badge-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 5px;
    background: rgb(61, 71, 77);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 17px;
    margin-left: 16px;
    user-select: none;
    white-space: nowrap;
}

/* Section title (Anhänge, Aktivität) */
.td-section-title {
    display: flex;
    align-items: center;
    height: 45px;
    margin-top: 20px;
    padding: 0 10px;
}

.td-section-title-text {
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    color: rgb(61, 71, 77);
    cursor: default;
}

.td-dots-icon {
    color: rgb(138, 148, 153);
    width: 16px;
    height: 16px;
    margin-left: 8px;
    cursor: pointer;
}

/* Attachment grid */
.td-attachment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px 0 4px 10px;
}

/* Shared attachment item base */
.td-attachment-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

/* Image thumbnail */
.td-attachment-image {
    width: 108px;
    height: 108px;
    background: rgb(240, 242, 243);
}

.td-attachment-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.td-attachment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    transition: opacity 0.15s;
}

@media (hover: hover) {
    .td-attachment-image:hover img {
        opacity: 0.85;
    }
}

.td-attachment-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 8px;
    font-size: 10px;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,0.55));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0 0 10px 10px;
    pointer-events: none;
}

/* File attachment (non-image) */
.td-attachment-file {
    width: 108px;
    height: 108px;
    background: rgb(240, 242, 243);
    display: flex;
    flex-direction: column;
}

.td-attachment-file a,
.td-attachment-file-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: inherit;
    text-decoration: none;
    padding: 10px 8px;
}

.td-attachment-file-icon {
    margin-bottom: 6px;
}

.td-attachment-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.td-attachment-filename {
    font-size: 11px;
    font-weight: 500;
    color: rgb(61, 75, 84);
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.td-attachment-size {
    font-size: 10px;
    color: rgb(138, 148, 153);
}

/* Menu button on attachments (arrow-down) */
.td-att-menu-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: rgb(61, 75, 84);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

@media (hover: hover) {
    .td-attachment-item:hover .td-att-menu-btn {
        opacity: 1;
    }
    .td-att-menu-btn:hover {
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.22);
    }
}

@media (hover: none) {
    .td-att-menu-btn {
        opacity: 1;
    }
}

/* Video thumbnail in attachment grid */
.td-attachment-video {
    width: 108px;
    height: 108px;
    background: #000;
}

.td-attachment-video-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.td-attachment-video-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    pointer-events: none;
}

.td-attachment-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

@media (hover: hover) {
    .td-attachment-video:hover .td-attachment-video-inner video {
        opacity: 0.85;
    }
}

/* Attachment context menu popover */
.att-menu {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.10);
    min-width: 180px;
    padding-bottom: 6px;
    overflow: hidden;
}

.att-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    border-bottom: 1px solid rgb(225, 228, 230);
    margin-bottom: 4px;
}

.att-menu-title {
    font-size: 14px;
    font-weight: 600;
    color: rgb(61, 75, 84);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.att-menu-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: rgb(138, 148, 153);
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
}

.att-menu-close:hover {
    color: rgb(61, 75, 84);
}

.att-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: rgb(61, 75, 84);
    padding: 9px 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s;
}

.att-menu-item:hover {
    background: rgb(243, 245, 246);
}

.att-menu-item--danger {
    color: rgb(208, 31, 46);
}

.att-menu-item--sub {
    display: block;
    width: 100%;
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    color: rgb(138, 148, 153);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    background: none;
    text-align: left;
    cursor: default;
}

.att-menu-move-list {
    display: flex;
    flex-direction: column;
}

.att-menu-move-item {
    display: block;
    width: 100%;
    padding: 6px 14px 6px 24px;
    font-size: 14px;
    color: rgb(61, 71, 77);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.att-menu-move-item:hover {
    background: rgb(240, 242, 243);
}

/* ===== Group Context Menu ===== */
.group-menu {
    position: fixed;
    width: 200px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.07), 0 8px 24px -4px rgba(0,0,0,0.18);
    z-index: 1100;
    overflow: visible;
    padding: 4px 0;
}

.group-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 6px;
}

.group-menu-title {
    font-size: 15px;
    font-weight: 600;
    color: rgb(61, 75, 84);
}

.group-menu-close {
    border: 0;
    background: transparent;
    color: rgb(138, 148, 153);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.group-menu-close:hover {
    color: rgb(61, 75, 84);
}

.group-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 14px;
    font-size: 15px;
    color: rgb(61, 71, 77);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.group-menu-item:hover {
    background: rgb(240, 242, 243);
}

.group-menu-item--danger {
    color: rgb(208, 31, 46);
}

.group-menu-item--has-sub {
    position: relative;
}

.group-menu-item--has-sub svg {
    width: 8px;
    height: 12px;
    color: rgb(138, 148, 153);
    flex-shrink: 0;
}

/* Submenu (Laden) */
.group-menu-sub-wrap {
    position: relative;
}

.group-menu-submenu {
    display: none;
    position: absolute;
    right: -4px;
    top: -4px;
    transform: translateX(100%);
    min-width: 180px;
    max-width: 280px;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.07), 0 8px 24px -4px rgba(0,0,0,0.18);
    z-index: 1110;
    padding: 6px 0;
}

.group-menu-submenu.open {
    display: block;
}

.group-menu-submenu-list {
    display: flex;
    flex-direction: column;
}

.gm-preset-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 7px 10px 7px 14px;
    font-size: 14px;
    color: rgb(61, 71, 77);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    gap: 6px;
}

.gm-preset-item:hover {
    background: rgb(240, 242, 243);
}

.gm-preset-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-preset-delete {
    border: 0;
    background: transparent;
    color: rgb(138, 148, 153);
    cursor: pointer;
    font-size: 15px;
    padding: 0 2px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.gm-preset-item:hover .gm-preset-delete {
    opacity: 1;
}

.gm-preset-delete:hover {
    color: rgb(208, 31, 46);
}

.gm-loading,
.gm-empty {
    padding: 12px 14px;
    font-size: 13px;
    color: rgb(138, 148, 153);
}

/* Mobile: Submenü klappt inline auf statt seitlich heraus */
@media (hover: none), (max-width: 600px) {
    .group-menu-submenu {
        position: static;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        min-width: 0;
        max-width: none;
        border-top: 1px solid rgb(230, 233, 235);
        border-bottom: 1px solid rgb(230, 233, 235);
        background: rgb(248, 249, 250);
    }

    .group-menu-submenu .gm-preset-item {
        padding-left: 24px;
    }

    .group-menu-item--has-sub svg {
        transition: transform 0.2s;
    }

    .group-menu-sub-wrap:has(.group-menu-submenu.open) .group-menu-item--has-sub svg {
        transform: rotate(90deg);
    }

    .gm-preset-delete {
        opacity: 1;
    }
}

/* Upload Loader */
.td-attachment-loader {
    width: 108px;
    height: 108px;
    border-radius: 10px;
    background: rgb(240, 242, 243);
    display: flex;
    align-items: center;
    justify-content: center;
}

.td-loader-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgb(225, 228, 230);
    border-top-color: rgb(0, 170, 255);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== PROJEKT-EINSTELLUNGEN MODAL ===== */

.ps-dialog {
    background: #fff;
    border-radius: 12px;
    width: 560px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 12px 40px -8px;
    margin: auto;
    overflow: hidden;
}

#projectSettingsModal,
#noteGroupSettingsModal {
    align-items: center;
    justify-content: center;
}

.ps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 0;
}

.ps-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ps-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--mt-text);
}

.ps-close-btn {
    background: none;
    border: none;
    color: var(--mt-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.ps-close-btn:hover {
    background: rgb(240, 242, 243);
}

/* Tabs */
.ps-tabs {
    display: flex;
    gap: 0;
    padding: 16px 24px 0;
    border-bottom: 1px solid rgb(225, 228, 230);
}

.ps-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 0;
    margin-right: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mt-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.ps-tab:hover {
    color: var(--mt-text);
}

.ps-tab.active {
    color: rgb(0, 170, 255);
    border-bottom-color: rgb(0, 170, 255);
}

.ps-tab-content {
    display: none;
}

.ps-tab-content.active {
    display: block;
}

/* Body */
.ps-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px 24px;
}

/* ===== Info Tab ===== */
.ps-info-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ps-info-top {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.ps-info-icon-btn {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    border-radius: 14px;
    transition: opacity 0.15s;
}

.ps-info-icon-btn:hover {
    opacity: 0.85;
}

.ps-info-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffba33;
    color: #fff;
}

.ps-info-icon-wrap svg {
    width: 32px;
    height: 32px;
}

.ps-info-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ps-info-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mt-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ps-info-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    font-size: 15px;
    color: var(--mt-text);
    background: #fff;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.ps-info-input:focus {
    outline: none;
    border-color: #0084ff;
}

.ps-info-desc-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ps-info-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--mt-text);
    background: #fff;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.ps-info-textarea:focus {
    outline: none;
    border-color: #0084ff;
}

.ps-info-textarea::placeholder,
.ps-info-input::placeholder {
    color: #b0b8bc;
}

.ps-info-footer {
    display: flex;
    gap: 40px;
    padding: 16px 0 0;
    border-top: 1px solid var(--mt-border);
}

.ps-info-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ps-info-meta-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mt-muted);
}

.ps-info-meta-value {
    font-size: 14px;
    color: var(--mt-text);
}

/* Danger Zone */
.ps-danger-zone {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--mt-border);
}

.ps-danger-zone-header {
    margin-bottom: 12px;
}

.ps-danger-zone-label {
    font-size: 13px;
    font-weight: 600;
    color: #e53935;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ps-danger-zone-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: rgba(229, 57, 53, 0.06);
    border: 1px solid rgba(229, 57, 53, 0.2);
    border-radius: 8px;
    margin-bottom: 8px;
}

.ps-danger-zone-item:last-child {
    margin-bottom: 0;
}

.ps-danger-zone-item--critical {
    background: rgba(183, 28, 28, 0.08);
    border-color: rgba(183, 28, 28, 0.35);
}

.ps-danger-zone-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ps-danger-zone-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mt-text);
}

.ps-danger-zone-desc {
    font-size: 12px;
    color: var(--mt-muted);
    line-height: 1.4;
}

.ps-danger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #e53935;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}

.ps-danger-btn:hover {
    background: #c62828;
}

.ps-danger-btn:active {
    background: #b71c1c;
}

.ps-danger-btn svg {
    flex-shrink: 0;
}

.ps-danger-btn--critical {
    background: #b71c1c;
}

.ps-danger-btn--critical:hover {
    background: #7f0000;
}

.ps-danger-btn--critical:active {
    background: #6d0000;
}

/* Tag List */
.ps-tag-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ps-tag-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgb(247, 248, 249);
    margin-bottom: 4px;
    position: relative;
    transition: background 0.15s;
    min-height: 48px;
}

.ps-tag-row:hover {
    background: rgb(240, 242, 243);
}

.ps-tag-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-tag-icon svg {
    width: 22px;
    height: 22px;
}

.ps-tag-name {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--mt-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
}

/* Inline-Edit Input für Tag-Name */
.ps-tag-name-input {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--mt-text);
    border: 1px solid rgb(0, 170, 255);
    border-radius: 6px;
    padding: 4px 8px;
    outline: none;
    min-width: 0;
    background: #fff;
}

/* Farbpunkte – bei Hover sichtbar */
.ps-tag-colors {
    display: none;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.ps-tag-row:hover .ps-tag-colors,
.ps-tag-row.editing .ps-tag-colors {
    display: flex;
}

.ps-color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.12s, border-color 0.12s;
    box-sizing: border-box;
    flex-shrink: 0;
}

.ps-color-dot:hover {
    transform: scale(1.2);
}

.ps-color-dot.active {
    border-color: rgb(0, 170, 255);
}

/* Löschen-Button (X) – bei Hover sichtbar */
.ps-tag-delete {
    display: none;
    background: none;
    border: none;
    color: var(--mt-muted);
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    transition: color 0.15s;
}

.ps-tag-row:hover .ps-tag-delete {
    display: flex;
}

.ps-tag-delete:hover {
    color: rgb(208, 31, 46);
}

/* Inline-Erstellung (neue Zeile oben in der Liste) */
.ps-tag-row.ps-tag-new {
    background: #fff;
    border: none;
}

.ps-tag-row.ps-tag-new .ps-tag-name-input {
    border: 1px solid rgb(0, 170, 255);
}

/* Add tag row */
.ps-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0 0;
    cursor: pointer;
}

.ps-add-icon {
    color: rgb(0, 170, 255);
    flex-shrink: 0;
}

.ps-add-link {
    font-size: 14px;
    font-weight: 600;
    color: rgb(0, 170, 255);
    cursor: pointer;
}

.ps-add-link:hover {
    text-decoration: underline;
}

/* ===== PROJEKT-MODULE TAB ===== */

.ps-modules-desc {
    font-size: 13px;
    color: rgb(138, 148, 153);
    margin: 0 0 16px;
    line-height: 1.5;
}

.ps-modules-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ps-module-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1.5px solid rgb(225, 228, 230);
    border-radius: 10px;
    background: rgb(248, 249, 250);
    transition: border-color 0.15s;
}

.ps-module-card:hover {
    border-color: rgb(190, 195, 200);
}

.ps-module-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgb(232, 240, 254);
    color: rgb(0, 122, 255);
}

.ps-module-icon svg {
    width: 22px;
    height: 22px;
}

.ps-module-info {
    flex: 1;
    min-width: 0;
}

.ps-module-name {
    font-size: 14px;
    font-weight: 600;
    color: rgb(23, 43, 77);
    margin-bottom: 2px;
}

.ps-module-desc {
    font-size: 12px;
    color: rgb(138, 148, 153);
    line-height: 1.4;
}

.ps-module-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.ps-module-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ps-module-toggle-slider {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgb(210, 215, 218);
    cursor: pointer;
    transition: background 0.2s;
}

.ps-module-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.ps-module-toggle input:checked + .ps-module-toggle-slider {
    background: rgb(0, 122, 255);
}

.ps-module-toggle input:checked + .ps-module-toggle-slider::before {
    transform: translateX(20px);
}

/* ===== PROJEKT-MITGLIEDER TAB ===== */

.ps-members-desc {
    font-size: 13px;
    color: rgb(138, 148, 153);
    margin: 0 0 16px;
    line-height: 1.5;
}

.ps-members-add {
    position: relative;
    margin-bottom: 20px;
}

.ps-members-search-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    border: 2px solid rgb(225, 228, 230);
    border-radius: 24px;
    outline: none;
    background: #fff;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.ps-members-search-input:focus {
    border-color: rgb(0, 170, 255);
}

.ps-members-search-input::placeholder {
    color: rgb(180, 188, 192);
}

.ps-members-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 10;
    max-height: 240px;
    overflow-y: auto;
    display: none;
}

.ps-members-search-results.open {
    display: block;
}

.ps-search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.ps-search-result-item:hover {
    background: rgb(241, 243, 245);
}

.ps-search-result-item .ps-sr-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgb(0, 170, 255);
    overflow: hidden;
}

.ps-search-result-item .ps-sr-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps-search-result-info {
    flex: 1;
    min-width: 0;
}

.ps-search-result-name {
    font-size: 14px;
    font-weight: 500;
    color: rgb(51, 51, 51);
}

.ps-search-result-email {
    font-size: 12px;
    color: rgb(138, 148, 153);
}

.ps-search-result-badge {
    font-size: 12px;
    color: rgb(138, 148, 153);
    white-space: nowrap;
}

.ps-members-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ps-members-count {
    font-size: 14px;
    font-weight: 600;
    color: rgb(51, 51, 51);
}

.ps-members-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 20px;
    padding: 6px 12px;
}

.ps-members-filter-icon {
    color: rgb(138, 148, 153);
    flex-shrink: 0;
}

.ps-members-filter-input {
    border: none;
    outline: none;
    font-size: 13px;
    width: 100px;
    background: transparent;
}

.ps-members-filter-input::placeholder {
    color: rgb(180, 188, 192);
}

.ps-members-list {
    display: flex;
    flex-direction: column;
}

.ps-member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgb(241, 243, 245);
}

.ps-member-row:last-child {
    border-bottom: none;
}

.ps-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: rgb(0, 170, 255);
    overflow: hidden;
}

.ps-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps-member-info {
    flex: 1;
    min-width: 0;
}

.ps-member-name {
    font-size: 14px;
    font-weight: 500;
    color: rgb(51, 51, 51);
}

.ps-member-email {
    font-size: 12px;
    color: rgb(138, 148, 153);
}

.ps-member-role {
    font-size: 13px;
    color: rgb(138, 148, 153);
    white-space: nowrap;
}

.ps-member-role-select {
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 6px;
    background: #fff;
    color: var(--mt-text);
    cursor: pointer;
    max-width: 150px;
}
.ps-member-role-select:hover {
    border-color: rgb(190, 195, 200);
}
.ps-member-role-select:focus {
    outline: none;
    border-color: var(--mt-blue, rgb(0, 170, 255));
}

.ps-member-actions {
    flex-shrink: 0;
}

.ps-member-remove-btn {
    background: none;
    border: none;
    color: rgb(200, 200, 200);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.ps-member-remove-btn:hover {
    color: rgb(220, 53, 69);
    background: rgb(255, 240, 240);
}

/* ===== FÄLLIGKEITS-KALENDER POPOVER ===== */

.td-sb-row-due {
    position: relative;
}

.td-sb-row-due > .td-sb-row-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.td-sb-row-due > .td-sb-row-content > .td-sb-icon {
    flex-shrink: 0;
    align-self: center;
}

.td-sb-row-due > .td-sb-row-content > .td-sb-label {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.td-sb-row-due > .td-sb-row-content > .td-chevron {
    margin-left: auto;
    flex-shrink: 0;
    color: rgb(138, 148, 153);
    align-self: center;
}

/* Cal-Header: nur auf Mobile als Sheet-Header sichtbar */
.cal-header { display: none; }

.cal-popover {
    display: none;
    position: fixed;
    z-index: 2000;
    width: 320px;
    background: #fff;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.18) 0px 6px 16px -4px;
    flex-direction: column;
    padding: 20px;
    user-select: none;
    box-sizing: border-box;
}

.cal-popover.open {
    display: flex;
}

/* Navigation */
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cal-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mt-text);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.cal-nav-btn:hover {
    background: rgb(240, 242, 243);
}

.cal-month-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--mt-text);
}

/* Wochentage Header */
.cal-weekdays {
    display: grid;
    grid-template-columns: 24px repeat(7, 1fr);
    text-align: center;
    margin-bottom: 2px;
}

.cal-weekdays::before {
    content: '';
}

.cal-weekdays span {
    font-size: 12px;
    font-weight: 600;
    color: var(--mt-muted);
    padding: 4px 0;
}

/* Kalender Grid */
.cal-grid {
    display: grid;
    grid-template-columns: 24px repeat(7, 1fr);
    row-gap: 2px;
}

.cal-day {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--mt-text);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.12s;
    margin: 0 auto;
    box-sizing: border-box;
}

.cal-day:hover {
    background: rgb(240, 242, 243);
}

.cal-day.today {
    color: rgb(0, 170, 255);
    font-weight: 600;
}

.cal-day.today:hover {
    background: rgb(240, 242, 243);
}

.cal-day.selected {
    background: rgb(0, 170, 255);
    color: #fff;
    font-weight: 600;
}

.cal-day.selected:hover {
    background: rgb(0, 150, 230);
}

.cal-day.other-month {
    color: rgb(200, 205, 210);
}

.cal-day.empty {
    cursor: default;
}

.cal-day.empty:hover {
    background: transparent;
}

/* Kalenderwoche links */
.cal-week-num {
    width: 24px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgb(200, 205, 210);
    cursor: default;
}

/* Zeitangabe */
.cal-time-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 8px;
    border-top: 1px solid rgb(240, 242, 243);
    margin-top: 12px;
}

.cal-time-label {
    font-size: 14px;
    color: var(--mt-text);
    white-space: nowrap;
}

.cal-time-input {
    border: 1px solid rgb(225, 228, 230);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--mt-text);
    outline: none;
    width: 100px;
}

.cal-time-input:focus {
    border-color: rgb(0, 170, 255);
}

/* Bis-Fälligkeit-ausblenden Toggle-Zeile */
.cal-hide-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 4px;
}

.cal-hide-label {
    font-size: 14px;
    color: var(--mt-text);
    cursor: pointer;
}

.cal-hide-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.cal-hide-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cal-hide-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgb(208, 212, 216);
    border-radius: 22px;
    transition: background 0.2s;
}

.cal-hide-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.cal-hide-switch input:checked + .cal-hide-slider {
    background: rgb(0, 170, 255);
}

.cal-hide-switch input:checked + .cal-hide-slider::before {
    transform: translateX(18px);
}

/* Footer */
.cal-footer {
    padding-top: 12px;
}

.cal-reset-btn {
    width: 100%;
    padding: 10px;
    border: 1px solid rgb(208, 31, 46);
    border-radius: 20px;
    background: #fff;
    color: rgb(208, 31, 46);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.cal-reset-btn:hover {
    background: rgb(254, 245, 245);
}

/* Verwalten-Link im Tag-Popover */
.tag-popover-manage {
    font-size: 14px;
    font-weight: 500;
    color: rgb(0, 170, 255);
    text-decoration: none;
    cursor: pointer;
}

.tag-popover-manage:hover {
    text-decoration: underline;
}

/* ===== IMAGE LIGHTBOX ===== */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: rgba(30, 33, 36, 0.95);
    flex-direction: column;
}

.lightbox-overlay.open {
    display: flex;
}

/* Header */
.lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    min-height: 56px;
    flex-shrink: 0;
}

.lightbox-file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.lightbox-file-icon {
    opacity: 0.7;
}

.lightbox-filename {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.lightbox-filetype {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
}

.lightbox-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lightbox-action-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
}

.lightbox-action-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Body */
.lightbox-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
    padding: 0 60px;
    overflow: hidden;
}

.lightbox-body:has(#lightboxPdfWrap:not([style*="display:none"]):not([style*="display: none"])) {
    padding: 0;
    align-items: stretch;
}

.lightbox-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

.lightbox-image-wrap img {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px);
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    user-select: none;
}

/* Navigation arrows */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    z-index: 2;
}

.lightbox-nav:hover {
    background: rgba(0, 0, 0, 0.65);
}

.lightbox-nav:disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

.lightbox-nav-prev {
    left: 10px;
}

.lightbox-nav-next {
    right: 10px;
}

/* Footer */
.lightbox-footer {
    text-align: center;
    padding: 10px 20px 16px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    flex-shrink: 0;
}

/* PDF viewer inside lightbox (pdf.js full viewer) */
.lightbox-pdf-wrap {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    min-height: 0;
}

.lightbox-pdf-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 4px;
}

/* Video viewer inside lightbox */
.lightbox-video-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    flex: 1;
}

.lightbox-video-wrap video {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px);
    border-radius: 6px;
    background: #000;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* Attachment Popover */
.attach-popover {
    display: none;
    position: fixed;
    width: 280px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.07), 0 8px 24px -4px rgba(0,0,0,0.18);
    z-index: 250;
    flex-direction: column;
    overflow: hidden;
}

.attach-popover.open {
    display: flex;
}

.attach-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
}

.attach-popover-title {
    font-size: 15px;
    font-weight: 600;
    color: rgb(61, 75, 84);
}

.attach-popover-close {
    border: 0;
    background: transparent;
    font-size: 20px;
    color: rgb(138, 148, 153);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.attach-popover-close:hover {
    color: rgb(61, 75, 84);
}

.attach-popover-link-row {
    padding: 0 16px 12px;
}

.attach-popover-link-input {
    width: 100%;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    color: rgb(61, 75, 84);
}

.attach-popover-link-input:focus {
    border-color: rgb(0, 170, 255);
}

.attach-popover-link-input::placeholder {
    color: rgb(200, 205, 208);
}

.attach-popover-options {
    border-top: 1px solid rgb(225, 228, 230);
    padding: 6px 0;
}

.attach-popover-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 20px;
    border: 0;
    background: transparent;
    font-size: 15px;
    font-family: inherit;
    color: rgb(61, 75, 84);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}

.attach-popover-option:hover {
    background: rgba(0, 0, 0, 0.03);
}

.attach-popover-option svg {
    flex-shrink: 0;
}

/* Drag & Drop Overlay */
.drag-drop-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 500;
    background: rgba(0, 170, 255, 0.08);
    border: 3px dashed rgb(0, 170, 255);
    border-radius: 14px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.drag-drop-overlay.active {
    display: flex;
}

.drag-drop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: rgb(0, 170, 255);
}

/* Activity section */
.td-activity-section {
    padding: 0 0 0 0;
}

.td-activity-section .td-section-title {
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 0 30px;
}

/* Comment input */
.td-comment-input {
    padding: 0 30px;
    margin-bottom: 10px;
}

.td-comment-textarea {
    width: 100%;
    min-height: 104px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 15px;
    line-height: 22px;
    font-family: inherit;
    font-weight: 400;
    color: rgb(61, 71, 77);
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.td-comment-textarea::placeholder {
    color: rgba(61, 71, 77, 0.3);
}

/* ─── @-Mention Dropdown ──────────────────────────────── */
.mention-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: 4px;
    background: #fff;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-height: 240px;
    overflow-y: auto;
    z-index: 200;
    padding: 4px;
}
.mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}
.mention-item:hover,
.mention-item-active {
    background: rgba(0, 122, 255, 0.08);
}
.mention-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.mention-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
}
.mention-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mention-item-name {
    font-size: 13px;
    font-weight: 500;
    color: rgb(61, 71, 77);
    line-height: 1.3;
}
.mention-item-username {
    font-size: 11px;
    color: rgb(138, 148, 153);
    line-height: 1.3;
}

/* @-Mention Highlight in Kommentaren */
.mention-highlight {
    color: #2563eb;
    font-weight: 500;
    background: rgba(37, 99, 235, 0.08);
    border-radius: 3px;
    padding: 0 2px;
}

.td-comment-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
}

.td-comment-toolbar-left {
    display: flex;
    align-items: center;
}

.td-emoji-btn {
    border: 0;
    background: transparent;
    padding: 4px;
    cursor: pointer;
    color: rgb(200, 205, 208);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s;
}

.td-emoji-btn:hover {
    color: rgb(138, 148, 153);
}

.td-emoji-btn svg {
    width: 20px;
    height: 20px;
}

/* Emoji Picker */
.emoji-picker {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    width: 320px;
    max-height: 380px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.07), 0 8px 24px -4px rgba(0,0,0,0.18);
    z-index: 200;
    flex-direction: column;
    overflow: hidden;
}

.emoji-picker.open {
    display: flex;
}

/* Tabs */
.emoji-picker-tabs {
    display: flex;
    border-bottom: 1px solid rgb(225, 228, 230);
    padding: 6px 8px 0;
    gap: 2px;
    flex-shrink: 0;
}

.emoji-tab {
    border: 0;
    background: transparent;
    padding: 6px 8px;
    font-size: 18px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    border-radius: 4px 4px 0 0;
    line-height: 1;
    transition: background 0.1s;
}

.emoji-tab:hover {
    background: rgba(0,0,0,0.04);
}

.emoji-tab.active {
    border-bottom-color: rgb(0, 170, 255);
}

/* Search */
.emoji-picker-search {
    padding: 8px 10px;
    position: relative;
    flex-shrink: 0;
}

.emoji-picker-search input {
    width: 100%;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 6px;
    padding: 7px 32px 7px 10px;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}

.emoji-picker-search input:focus {
    border-color: rgb(0, 170, 255);
}

.emoji-search-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Grid */
.emoji-picker-grid {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 8px;
}

.emoji-category-label {
    font-size: 12px;
    font-weight: 600;
    color: rgb(61, 75, 84);
    padding: 8px 4px 4px;
    line-height: 1;
}

.emoji-row {
    display: flex;
    flex-wrap: wrap;
}

.emoji-cell {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s;
    user-select: none;
    border: 0;
    background: transparent;
    padding: 0;
    line-height: 1;
}

.emoji-cell:hover {
    background: rgba(0,0,0,0.06);
}

.td-send-btn {
    border: 0;
    background: transparent;
    color: rgb(138, 148, 153);
    cursor: pointer;
    padding: 0;
    opacity: 0.3;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.td-send-btn:hover {
    opacity: 0.6;
}

.td-send-btn.active {
    color: rgb(0, 160, 255);
    opacity: 1;
}

.td-send-btn.active:hover {
    color: rgb(0, 130, 220);
    opacity: 1;
}

/* Activity Dropdown */
.td-activity-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 16px;
    z-index: 100;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
    min-width: 160px;
    padding: 4px 0;
    margin-top: 4px;
}

.td-activity-dropdown.open {
    display: block;
}

.td-activity-dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: rgb(61, 71, 77);
    text-align: left;
    transition: background 0.1s;
}

.td-activity-dropdown-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.td-activity-dropdown-item.active {
    font-weight: 600;
    color: rgb(0, 170, 255);
}

.td-tab-panel {
    /* Sichtbarkeit wird per JS gesteuert */
}

/* Activity feed */
.td-activity-feed {
    padding: 0 30px;
    display: flex;
    flex-direction: column;
}

/* Activity entry */
.td-activity-entry {
    display: flex;
    padding: 14px 0;
    width: 100%;
}

.td-activity-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-right: 10px;
}

.td-activity-icon svg {
    width: 32px;
    height: 32px;
}

.td-activity-icon img {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    object-fit: cover;
}

.td-activity-body {
    flex: 1;
    min-width: 0;
}

.td-activity-date {
    text-transform: uppercase;
    color: rgb(138, 148, 153);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    padding-left: 6px;
}

.td-activity-text {
    color: rgb(61, 71, 77);
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    padding: 0 6px;
    overflow: hidden;
}

.td-activity-text strong {
    font-weight: 500;
}

.td-activity-meta {
    display: block;
    font-size: 12px;
    color: rgb(138, 148, 153);
    margin-top: 2px;
}

.td-activity-comment-bubble {
    margin-top: 14px;
    padding: 11px 16px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: rgb(61, 71, 77);
    /* Lange ungetrennte Strings (URLs, Tipp-Fehler ohne Leerzeichen)
       sollen brechen, statt aus der Bubble zu laufen */
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}
/* User-Inhalt: Markdown wird gerendert (marked.parse), daher kein pre-wrap nötig.
   marked erzeugt eigene <p>/<br>/<ul>-Tags für Zeilenumbrüche. */
.td-comment-bubble-text {
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Markdown-Elemente innerhalb von Kommentaren */
.td-comment-bubble-text p {
    margin: 0 0 8px 0;
}
.td-comment-bubble-text p:last-child { margin-bottom: 0; }
.td-comment-bubble-text strong { font-weight: 600; }
.td-comment-bubble-text em { font-style: italic; }
.td-comment-bubble-text ul,
.td-comment-bubble-text ol {
    margin: 4px 0 8px 0;
    padding-left: 22px;
}
.td-comment-bubble-text li { margin: 2px 0; }
.td-comment-bubble-text h1,
.td-comment-bubble-text h2,
.td-comment-bubble-text h3,
.td-comment-bubble-text h4 {
    font-weight: 600;
    margin: 8px 0 4px 0;
    line-height: 1.3;
}
.td-comment-bubble-text h1 { font-size: 17px; }
.td-comment-bubble-text h2 { font-size: 16px; }
.td-comment-bubble-text h3,
.td-comment-bubble-text h4 { font-size: 15px; }
.td-comment-bubble-text code {
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}
.td-comment-bubble-text pre {
    background: rgba(0, 0, 0, 0.08);
    padding: 10px 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 6px 0;
}
.td-comment-bubble-text pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.td-comment-bubble-text blockquote {
    border-left: 3px solid rgba(0, 0, 0, 0.15);
    padding: 2px 0 2px 10px;
    margin: 6px 0;
    color: rgb(95, 105, 110);
}
.td-comment-bubble-text a {
    color: rgb(0, 122, 200);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}
.td-comment-bubble-text a:hover { text-decoration-thickness: 2px; }
.td-comment-bubble-text hr {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    margin: 8px 0;
}
.td-comment-bubble-text table {
    border-collapse: collapse;
    margin: 6px 0;
}
.td-comment-bubble-text th,
.td-comment-bubble-text td {
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 4px 8px;
    text-align: left;
}

.td-activity-delete {
    border: 0;
    background: transparent;
    color: var(--mt-muted);
    cursor: pointer;
    font-size: 11px;
    margin-top: 4px;
    margin-left: 6px;
}

/* Gelöschte Kommentare (nur für Admins sichtbar) */
.td-comment-deleted {
    opacity: 0.55;
}

.td-comment-bubble-deleted {
    text-decoration: line-through;
}

.td-comment-deleted-label {
    font-size: 11px;
    color: #e74c3c;
    margin-top: 4px;
    margin-left: 6px;
    font-weight: 500;
}

/* Historie Einträge – spezialisierte Icons */
.td-history-icon {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------- RIGHT SIDEBAR ---------- */
.td-sidebar {
    width: 240px;
    flex-shrink: 0;
    border-left: 1px solid rgb(225, 228, 230);
    border-bottom-right-radius: 10px;
    background: rgb(247, 247, 247);
    display: flex;
    flex-direction: column;
}

/* Sidebar row */
.td-sb-row {
    display: flex;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    box-shadow: rgb(225, 228, 230) 0 1px 0 0;
    flex-wrap: wrap;
}

.td-sb-row-content {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.td-sb-icon {
    color: rgb(138, 148, 153);
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.td-sb-label {
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    color: rgb(138, 148, 153);
    padding: 0 10px;
}

.td-sb-row > .td-chevron {
    flex-shrink: 0;
}

/* Timer row */
.td-sb-timer {
    padding: 0;
    gap: 0;
    position: relative;
}

.td-sb-timer .td-sb-row-content {
    display: flex;
    align-items: center;
    flex: 1;
}

.td-sb-timer-play {
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 4px 20px;
    border: none;
    border-right: 1px solid rgb(225, 228, 230);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgb(138, 148, 153);
    transition: color 0.15s;
}

.td-sb-timer-play:hover {
    color: rgb(61, 71, 77);
}

.td-sb-timer-play svg {
    width: 24px;
    height: 24px;
}

.td-sb-timer-display {
    font-size: 21px;
    line-height: 31px;
    font-weight: 400;
    letter-spacing: normal;
    color: rgb(138, 148, 153);
    padding-left: 14px;
    padding-right: 10px;
    height: 29px;
    flex: 1;
    user-select: none;
}

.td-sb-timer .td-chevron {
    margin-right: 20px;
    color: rgba(61, 71, 77, 0.5);
}

/* Sub content under sidebar rows */
.td-sb-sub {
    width: 100%;
}

.td-sb-row-expandable {
    flex-direction: column;
    align-items: stretch;
}

.td-sb-row-expandable > .td-sb-row-content {
    padding: 20px;
}

.td-sb-row-expandable > .td-chevron {
    position: absolute;
    right: 20px;
    top: 20px;
}

.td-sb-row-expandable {
    position: relative;
    padding: 0;
}

/* Sidebar inline inputs */
.td-inline-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.td-sb-input {
    flex: 1;
    height: 30px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 6px;
    padding: 0 8px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    color: var(--mt-text);
    outline: none;
}

.td-sb-add-btn {
    width: 30px;
    height: 30px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 6px;
    background: #fff;
    color: var(--mt-blue);
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar pill list (tags, assignees) */
/* Tag section layout */
.td-sb-row-tags {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    cursor: default;
}

.td-sb-row-tags > .td-sb-row-content {
    padding: 20px;
    cursor: pointer;
}

.td-sb-row-tags > .td-sb-row-content > .td-chevron {
    margin-left: auto;
    flex-shrink: 0;
    color: rgb(138, 148, 153);
    transition: transform 0.2s;
}

/* Tag Pills unterhalb des Tag-Triggers (replaced by inline pills in td-sb-value) */
.td-tag-pills {
    display: none;
}

.td-tag-pills:empty {
    display: none;
}

/* Inline tag pills (inside td-sb-value, both desktop & mobile) */
.td-sb-row-tags .td-sb-value {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    overflow: hidden;
}
.td-sb-inline-pills {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    overflow: hidden;
}
.td-sb-inline-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 22px;
}
.td-sb-inline-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    border-radius: 4px;
    background: rgb(108, 117, 125);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    padding: 0 4px;
}

.td-tag-pill {
    display: inline-flex;
    align-items: center;
    height: 26px;
    min-width: 0;
    max-width: 180px;
    padding: 0 12px 0 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    cursor: default;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== AUFGABEN-MODULE (Sidebar) ===== */

.td-sb-modules:empty {
    display: none;
}

.td-sb-row-module {
    position: relative;
}

.td-sb-row-module > .td-sb-row-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.td-sb-module-icon {
    flex-shrink: 0;
    color: rgb(138, 148, 153);
    display: flex;
    align-items: center;
}

.td-sb-module-label {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.td-sb-row-module > .td-sb-row-content > .td-chevron {
    margin-left: auto;
    flex-shrink: 0;
    color: rgb(138, 148, 153);
    align-self: center;
}

.td-sb-exceeded-icon {
    flex-shrink: 0;
    margin-left: 4px;
}

.td-sb-row-exceeded .td-sb-module-label {
    color: #e53935;
    font-weight: 500;
}

.td-sb-row-exceeded .td-sb-module-icon {
    color: #e53935;
}

/* Zeitbudget Popover */
.tb-popover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    z-index: 20;
    overflow: hidden;
}

.tb-popover.show {
    display: block;
}

.tb-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgb(240, 242, 244);
}

.tb-popover-title {
    font-size: 14px;
    font-weight: 600;
    color: rgb(23, 43, 77);
}

.tb-popover-body {
    padding: 16px;
}

.tb-input-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    justify-content: center;
}

.tb-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.tb-input {
    width: 64px;
    height: 40px;
    border: 1.5px solid rgb(210, 215, 218);
    border-radius: 8px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: rgb(23, 43, 77);
    background: rgb(248, 249, 250);
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}

.tb-input::-webkit-outer-spin-button,
.tb-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tb-input:focus {
    border-color: rgb(0, 122, 255);
    background: #fff;
}

.tb-input-label {
    font-size: 11px;
    color: rgb(138, 148, 153);
    font-weight: 500;
}

.tb-input-sep {
    font-size: 22px;
    font-weight: 700;
    color: rgb(138, 148, 153);
    padding-top: 8px;
}

.tb-status {
    margin-top: 14px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    font-weight: 500;
}

.tb-status-ok {
    background: rgb(232, 245, 233);
    color: rgb(46, 125, 50);
}

.tb-status-exceeded {
    background: rgb(255, 235, 238);
    color: #c62828;
}

.tb-status-warn {
    font-weight: 700;
}

.tb-actions {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    justify-content: center;
}

.tb-save-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background: rgb(0, 122, 255);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.tb-save-btn:hover {
    background: rgb(0, 100, 220);
}

.tb-reset-btn {
    padding: 8px 16px;
    border: 1.5px solid rgb(210, 215, 218);
    border-radius: 8px;
    background: #fff;
    color: rgb(100, 110, 115);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.tb-reset-btn:hover {
    border-color: #e53935;
    color: #e53935;
}

/* ===== BEOBACHTER / WATCHERS ===== */

.td-sb-row-watchers {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    cursor: default;
}

.td-sb-row-watchers > .td-sb-row-content {
    padding: 20px;
    cursor: pointer;
}

.td-sb-row-watchers > .td-sb-row-content > .td-chevron {
    margin-left: auto;
    flex-shrink: 0;
    color: rgb(138, 148, 153);
}

/* Avatar-Reihe unter dem Trigger */
.watcher-avatars {
    display: flex;
    gap: 6px;
    padding: 0 20px 14px 20px;
}

.watcher-avatars:empty {
    display: none;
}

.watcher-avatars .wa-avatar {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

.watcher-avatars .wa-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    object-fit: cover;
    display: block;
}

.watcher-avatars .wa-avatar .ap-user-avatar-initials {
    width: 100%;
    height: 100%;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Watcher Popover */
.watcher-popover {
    display: none;
    position: fixed;
    z-index: 2000;
    width: 280px;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.18) 0px 6px 16px -4px;
    flex-direction: column;
    max-height: 460px;
}

.watcher-popover.open {
    display: flex;
}

.wp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px 0;
}
.wp-title { flex: 1; }

.wp-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mt-text);
}

.wp-manage-link {
    font-size: 13px;
    color: rgb(0, 170, 255);
    text-decoration: none;
    cursor: pointer;
}

.wp-manage-link:hover {
    text-decoration: underline;
}

.wp-search {
    display: flex;
    align-items: center;
    margin: 12px 16px;
    padding: 0 12px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 8px;
    height: 38px;
}

.wp-search-icon {
    color: rgb(138, 148, 153);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.wp-search-input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 14px;
    padding: 0 8px;
    color: var(--mt-text);
    height: 36px;
}

.wp-search-input::placeholder {
    color: rgb(200, 205, 208);
}

.wp-list {
    max-height: 340px;
    overflow-y: auto;
    padding: 0 0 8px;
}

.wp-user-row {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.1s;
}

.wp-user-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

.wp-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    flex-shrink: 0;
    margin-right: 10px;
    overflow: hidden;
}

.wp-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    object-fit: cover;
}

.wp-user-name {
    flex: 1;
    font-size: 14px;
    color: var(--mt-text);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Wrapper für Name + Meta-Zeile bei Ghost-Watchern (Ex-Projekt-Mitglieder) */
.wp-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.wp-user-info .wp-user-name {
    flex: none;
}
.wp-user-meta {
    font-size: 11px;
    color: rgb(208, 31, 46);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wp-user-row.is-ghost .wp-user-name {
    color: rgb(138, 148, 153);
}
.wp-user-row.is-ghost .wp-user-avatar {
    opacity: 0.6;
}

.wp-user-check {
    color: rgb(0, 170, 255);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: 8px;
}

.wp-separator {
    height: 1px;
    background: rgb(240, 242, 243);
    margin: 4px 20px;
}

/* Tag Popover */
.tag-popover {
    display: none;
    position: fixed;
    z-index: 2000;
    width: 260px;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.18) 0px 6px 16px -4px;
    flex-direction: column;
    overflow: hidden;
}

.tag-popover.open {
    display: flex;
}

.tag-popover-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 10px;
}
.tag-popover-title { flex: 1; }

.tag-popover-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--mt-text);
}

.tag-popover-search {
    position: relative;
    padding: 0 12px 10px;
}

.tag-popover-search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -5px;
    color: var(--mt-muted);
    pointer-events: none;
}

.tag-popover-search-input {
    width: 100%;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 6px;
    padding: 8px 10px 8px 32px;
    font-size: 14px;
    outline: none;
    color: var(--mt-text);
    background: #fff;
}

.tag-popover-search-input:focus {
    border-color: rgb(0, 170, 255);
}

.tag-popover-list {
    max-height: 240px;
    overflow-y: auto;
    padding: 0 8px 8px;
}

.tag-popover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.tag-popover-item:hover {
    background: rgb(240, 242, 243);
}

.tag-popover-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-popover-check {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--mt-text);
}

/* Tag Create Section */
.tag-popover-create {
    padding: 8px 12px 12px;
    border-top: 1px solid rgb(240, 242, 243);
}

.tag-create-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tag-create-row span {
    font-size: 13px;
    font-weight: 500;
    color: var(--mt-text);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-color-picker {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    background: none;
}

.tag-create-btn {
    background: rgb(0, 170, 255);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.tag-create-btn:hover {
    background: rgb(0, 150, 230);
}

/* Legacy pill list (Kompatibilitaet) */
.td-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.td-pill {
    height: 24px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    background: #fff;
    font-size: 12px;
}

.td-pill button {
    border: 0;
    background: transparent;
    color: var(--mt-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.td-tag-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
}

/* Assignee pills in sidebar */
.td-assignee-pills {
    padding: 0 20px 10px 54px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Meta section at bottom of sidebar */
.td-sb-meta {
    padding: 20px;
    display: flex;
    flex-direction: column;
    cursor: default;
}

.td-sb-meta-project {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
}

.td-meta-link {
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: rgb(138, 148, 153);
    cursor: pointer;
}

.td-meta-link-light {
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: rgb(138, 148, 153);
    cursor: pointer;
}

.td-sb-meta-row {
    display: flex;
    align-items: flex-start;
    margin-top: 10px;
}

.td-meta-icon {
    width: 20px;
    height: 20px;
    color: rgb(138, 148, 153);
    flex-shrink: 0;
}

.td-meta-info {
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.td-meta-info-label {
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: rgb(138, 148, 153);
}

.td-meta-info-value {
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: rgb(138, 148, 153);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-sb-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ===== CUSTOM DIALOG ===== */

.cd-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.35);
    justify-content: center;
    align-items: center;
}

.cd-overlay.open {
    display: flex;
}

.cd-dialog {
    background: #fff;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 12px 32px -4px;
    width: 400px;
    max-width: 90vw;
    padding: 28px;
    animation: cdFadeIn 0.15s ease;
}

@keyframes cdFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.cd-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--mt-text, #333);
    margin-bottom: 12px;
}

.cd-message {
    font-size: 14px;
    color: rgb(100, 110, 120);
    line-height: 1.5;
    margin-bottom: 20px;
}

.cd-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 8px;
    font-size: 14px;
    color: var(--mt-text, #333);
    outline: none;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.cd-input:focus {
    border-color: rgb(0, 170, 255);
    box-shadow: 0 0 0 2px rgba(0, 170, 255, 0.15);
}

.cd-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.cd-btn {
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, box-shadow 0.15s;
    outline: none;
}

.cd-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 170, 255, 0.4);
}

.cd-btn-cancel {
    background: #fff;
    border-color: rgb(0, 170, 255);
    color: rgb(0, 170, 255);
}

.cd-btn-cancel:hover {
    background: rgb(240, 248, 255);
}

.cd-btn-primary {
    background: rgb(0, 170, 255);
    color: #fff;
    border-color: rgb(0, 170, 255);
}

.cd-btn-primary:hover {
    background: rgb(0, 150, 230);
}

.cd-btn-danger {
    background: rgb(0, 170, 255);
    color: #fff;
    border-color: rgb(0, 170, 255);
}

.cd-btn-danger:hover {
    background: rgb(0, 150, 230);
}

/* Hidden helpers */
.td-hidden-input {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.td-hidden-datepicker {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Remove old task detail modal styles */
.task-detail-modal {
    display: none;
}

/* ===== Checklists ===== */

.cl-block {
    margin-bottom: 4px;
}

.cl-block--empty .cl-header,
.ag-block--empty .ag-header {
    cursor: default;
}

.cl-block--empty .cl-title,
.ag-block--empty .ag-title {
    padding-left: 18px;
}

.cl-header {
    display: flex;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    margin: 0 -6px;
    padding-left: 6px;
    padding-right: 6px;
}

.cl-header:hover {
    background: rgb(245, 246, 247);
}

.cl-disclosure {
    width: 10px;
    height: 10px;
    margin-right: 8px;
    flex-shrink: 0;
    color: rgb(61, 75, 84);
    transition: transform 0.2s ease;
}

.cl-block.collapsed .cl-disclosure {
    transform: rotate(-90deg);
}

.cl-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: rgb(61, 75, 84);
    flex: 1;
    user-select: text;
    cursor: default;
}

.cl-title-input {
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: rgb(61, 75, 84);
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    padding: 0;
    font-family: inherit;
}

.cl-counter {
    font-size: 13px;
    font-weight: 400;
    color: rgb(138, 148, 153);
    margin-left: auto;
    padding-left: 12px;
}

/* Shared dots-button for group headers (checklists + attachment groups) */
.grp-dots-btn {
    border: 0;
    background: transparent;
    color: rgb(138, 148, 153);
    cursor: pointer;
    padding: 2px 0 2px 8px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.grp-dots-btn svg {
    width: 16px;
    height: 16px;
}

.cl-header:hover .grp-dots-btn,
.ag-header:hover .grp-dots-btn {
    opacity: 1;
}

.grp-dots-btn:hover {
    color: rgb(61, 75, 84);
}

.cl-body {
    padding-left: 18px;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.cl-block.collapsed .cl-body {
    max-height: 0 !important;
    overflow: hidden;
}

/* Checklist items */
.cl-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    gap: 12px;
    position: relative;
}

@media (hover: hover) {
    .cl-item:hover .cl-item-delete {
        opacity: 1;
    }
}

/* Round checkbox */
.cl-checkbox {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 2px solid rgb(0, 170, 255);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    box-sizing: border-box;
}

@media (hover: hover) {
    .cl-checkbox:hover {
        background: rgba(0, 170, 255, 0.08);
    }
}

.cl-checkbox.checked {
    background: rgb(0, 170, 255);
    border-color: rgb(0, 170, 255);
}

.cl-checkbox.checked svg {
    display: block;
}

.cl-checkbox svg {
    display: none;
    width: 12px;
    height: 12px;
}

.cl-item-text {
    flex: 1;
    font-size: 15px;
    line-height: 22px;
    color: rgb(61, 75, 84);
}

.cl-item.completed .cl-item-text {
    text-decoration: line-through;
    color: rgb(138, 148, 153);
}

/* Inline editing for checklist item text */
.cl-item-edit {
    flex: 1;
    font-size: 15px;
    line-height: 22px;
    color: rgb(61, 75, 84);
    border: none;
    border-bottom: 2px solid rgb(0, 170, 255);
    outline: none;
    background: transparent;
    padding: 0;
    font-family: inherit;
}

.cl-item-drag {
    display: none;
    color: rgb(200, 205, 210);
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
}

.cl-item-drag:active {
    cursor: grabbing;
}

.cl-item.dragging {
    opacity: 0.4;
}

.cl-item-delete {
    border: 0;
    background: transparent;
    color: rgb(138, 148, 153);
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

@media (hover: none) {
    .cl-item-delete {
        opacity: 1;
    }
}

@media (hover: hover) {
    .cl-item-delete:hover {
        color: rgb(208, 31, 46);
    }
}

/* Checklist Parent Badge (Aufgabe wurde aus Checklist-Item erstellt) */
.td-checklist-parent-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-bottom: 8px;
    background: rgba(0, 170, 255, 0.10);
    color: rgb(0, 130, 210);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
    max-width: 100%;
    line-height: 1.4;
}
.td-checklist-parent-badge:hover {
    background: rgba(0, 170, 255, 0.18);
}
.td-checklist-parent-badge svg {
    flex-shrink: 0;
}
.td-cpb-label {
    color: rgb(100, 115, 125);
    font-weight: 400;
}
.td-cpb-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

/* Linked checklist item (→ Aufgabe) */
.cl-checkbox--linked {
    border-color: rgb(180, 190, 195);
    cursor: default;
    opacity: 0.5;
}
@media (hover: hover) {
    .cl-checkbox--linked:hover {
        background: transparent;
    }
}
.cl-checkbox--linked.checked {
    background: rgb(180, 190, 195);
    border-color: rgb(180, 190, 195);
}

.cl-item-text--linked {
    text-decoration: underline;
    color: rgb(61, 75, 84);
    cursor: pointer;
}
.cl-item-text--linked:hover {
    color: rgb(0, 130, 210);
}
.cl-item--linked.completed .cl-item-text--linked {
    text-decoration: underline line-through;
    color: rgb(138, 148, 153);
}

/* Checklist-Item ... Menü-Button */
.cl-item-dots {
    border: 0;
    background: transparent;
    color: rgb(138, 148, 153);
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
@media (hover: hover) {
    .cl-item:hover .cl-item-dots {
        opacity: 1;
    }
    .cl-item-dots:hover {
        color: rgb(61, 75, 84);
    }
}
@media (hover: none) {
    .cl-item-dots {
        opacity: 1;
    }
}

/* Checklist-Item Kontextmenü */
.cl-item-menu {
    position: fixed;
    z-index: 10001;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    padding: 4px 0;
    min-width: 200px;
}
.cl-item-menu-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: rgb(61, 75, 84);
    cursor: pointer;
    text-align: left;
}
.cl-item-menu-option:hover {
    background: rgb(240, 243, 245);
}
.cl-item-menu-option svg {
    flex-shrink: 0;
}

/* Add checklist item link */
.cl-add-item-row {
    display: flex;
    align-items: center;
}

.cl-add-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    gap: 12px;
    color: rgb(0, 170, 255);
    font-size: 15px;
    line-height: 22px;
    flex: 1;
}

.cl-add-item:hover {
    opacity: 0.85;
}

.cl-add-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.cl-add-dots {
    opacity: 0.5;
}

.cl-add-dots:hover {
    opacity: 1;
}

/* Inline input for new item */
.cl-new-item-row {
    display: none;
    align-items: center;
    padding: 6px 0;
    gap: 12px;
}

.cl-new-item-row.active {
    display: flex;
}

.cl-new-item-input {
    flex: 1;
    font-size: 15px;
    line-height: 22px;
    color: rgb(61, 75, 84);
    border: none;
    border-bottom: 2px solid rgb(0, 170, 255);
    outline: none;
    background: transparent;
    padding: 0 0 2px;
    font-family: inherit;
}

.cl-new-item-input::placeholder {
    color: rgb(200, 205, 208);
}

/* ===== Attachment Groups (mirrors checklist block pattern) ===== */

.ag-block {
    margin-bottom: 4px;
}

.ag-header {
    display: flex;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    margin: 0 -6px;
    padding-left: 6px;
    padding-right: 6px;
}

.ag-header:hover {
    background: rgb(245, 246, 247);
}

.ag-disclosure {
    width: 10px;
    height: 10px;
    margin-right: 8px;
    flex-shrink: 0;
    color: rgb(61, 75, 84);
    transition: transform 0.2s ease;
}

.ag-block.collapsed .ag-disclosure {
    transform: rotate(-90deg);
}

.ag-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: rgb(61, 75, 84);
    flex: 1;
    user-select: text;
    cursor: default;
}

.ag-title-input {
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: rgb(61, 75, 84);
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    padding: 0;
    font-family: inherit;
}

.ag-counter {
    font-size: 13px;
    font-weight: 400;
    color: rgb(138, 148, 153);
    margin-left: auto;
    padding-left: 12px;
}

/* (dots button styles shared via .grp-dots-btn above) */

.ag-body {
    padding-left: 18px;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.ag-block.collapsed .ag-body {
    max-height: 0 !important;
    overflow: hidden;
}

.ag-body .td-attachment-grid {
    padding-left: 0;
}

.ag-add-row {
    display: flex;
    align-items: center;
}

.ag-add-dots {
    opacity: 0.5;
}

.ag-add-dots:hover {
    opacity: 1;
}

.ag-add-attachment {
    display: flex;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    gap: 12px;
    flex: 1;
    color: rgb(0, 170, 255);
    font-size: 15px;
    line-height: 22px;
}

@media (hover: hover) {
    .ag-add-attachment:hover {
        opacity: 0.85;
    }
}

.ag-add-attachment svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ===== Shared: comments, attachments ===== */

/* Kanban task card mini meta */
/* (task-mini-meta entfernt – ersetzt durch tc-* Klassen) */

.mini-link-btn {
    border: 0;
    background: transparent;
    color: var(--mt-blue);
    cursor: pointer;
    font-size: 12px;
}

/* ===== MEIN AUFGABENBEREICH ===== */

.mt-board {
    padding: 0;
    overflow: hidden;
}

.mt-board-scroll {
    display: flex;
    gap: 0;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
}

/* Spalten */
.mt-column {
    min-width: 300px;
    max-width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgb(235, 238, 240);
    background: rgb(248, 249, 250);
    overflow: hidden;
}

.mt-column-main {
    min-width: 280px;
    max-width: 320px;
    background: #fff;
}

.mt-column-add {
    min-width: 80px;
    max-width: 80px;
    background: transparent;
    border-right: none;
    align-items: center;
    justify-content: flex-start;
    padding-top: 18px;
}

.mt-add-column-btn {
    width: 44px;
    height: 44px;
    border: 2px dashed rgb(210, 215, 218);
    border-radius: 10px;
    background: transparent;
    color: rgb(138, 148, 153);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.mt-add-column-btn:hover {
    border-color: rgb(0, 170, 255);
    color: rgb(0, 170, 255);
    background: rgba(0, 170, 255, 0.04);
}

/* Spalten-Header: Meine Aufgaben */
.mt-column-header {
    padding: 16px 16px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mt-column-header-main {
    border-bottom: 1px solid rgb(235, 238, 240);
    background: #fff;
}

.mt-column-title {
    font-size: 16px;
    font-weight: 600;
    color: rgb(61, 71, 77);
}

.mt-column-dropdown-arrow {
    color: rgb(138, 148, 153);
    flex-shrink: 0;
}

/* Spalten-Header: Benutzerdefiniert (Pill-Button) */
.mt-column-header-pill {
    height: auto;
    padding: 8px 14px;
    margin: 12px 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 20px;
    flex-shrink: 0;
}

.mt-column-pill-icon {
    flex-shrink: 0;
    color: #fff;
    width: 16px;
    height: 16px;
}

.mt-column-title-pill {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-column-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.mt-col-menu-trigger {
    opacity: 0 !important;
    transition: opacity 0.15s !important;
    color: #fff;
}

.mt-column-header-pill:hover .mt-col-menu-trigger {
    opacity: 1 !important;
}

.mt-column-dropdown-arrow-pill {
    color: #fff;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

/* Spalten-Body */
.mt-column-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.mt-column.mt-drag-over {
    outline: 2px dashed var(--mt-blue);
    outline-offset: -6px;
}

/* Task Cards in Anpinn-Spalten: Gleiche Breite wie Pill-Button Header */
.mt-column:not(.mt-column-main) .mt-column-body {
    padding: 12px 12px 12px;
}

.mt-column:not(.mt-column-main) .task-card {
    margin-left: 0;
    margin-right: 0;
}

/* Gruppen (Meine Aufgaben) */
.mt-group {
    padding: 0;
}

.mt-group-title {
    font-size: 13px;
    font-weight: 600;
    color: rgb(138, 148, 153);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 14px 12px 6px;
}

.mt-group-tasks {
    padding: 0 12px 4px;
}

/* Task Cards im Aufgabenbereich - jetzt identisch mit Projekt-Bereich */

/* Leer-Text */
.mt-empty {
    padding: 24px 16px;
    text-align: center;
    color: rgb(180, 188, 192);
    font-size: 13px;
}

/* ===== NOTIZEN SYSTEM ===== */

/* Layout: Sidebar + Main nebeneinander */
.notes-layout {
    position: fixed;
    top: 65px;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    display: flex;
}

/* ─── Notizen Sidebar ─── */
.notes-sidebar {
    width: 270px;
    min-width: 270px;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border-right: 1px solid #eaeaea;
}

/* View-System: Gruppen vs Seiten */
.ns-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.ns-view-hidden {
    display: none;
}

/* Slide-Animationen */
.ns-view-slide-out {
    transform: translateX(-100%);
    display: flex !important;
}

.ns-view-slide-in {
    animation: nsSlideInRight 0.3s ease forwards;
}

.ns-view-slide-out-reverse {
    transform: translateX(100%);
    display: flex !important;
}

.ns-view-slide-in-reverse {
    animation: nsSlideInLeft 0.3s ease forwards;
}

@keyframes nsSlideInRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes nsSlideInLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* ─── Header ─── */
.ns-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 12px;
}

.ns-header-pages {
    gap: 8px;
    justify-content: flex-start;
}

.ns-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--mt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.ns-title-pages {
    font-size: 16px;
}

.ns-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ns-icon-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--mt-muted);
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.ns-icon-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--mt-text);
}

.ns-back-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--mt-muted);
    transition: background 0.15s, color 0.15s;
    padding: 0;
    flex-shrink: 0;
}

.ns-back-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--mt-text);
}

/* ─── Filter ─── */
.ns-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--mt-bg);
    border: 1px solid var(--mt-border);
}

.ns-filter-icon {
    flex-shrink: 0;
    color: var(--mt-muted);
}

.ns-filter-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--mt-text);
    font-size: 13px;
}

.ns-filter-input::placeholder {
    color: var(--mt-muted);
}

/* ─── Content (scrollbar) ─── */
.ns-content {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 16px;
}

.ns-content::-webkit-scrollbar {
    width: 4px;
}

.ns-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

/* ─── Section Labels ─── */
.ns-section {
    margin-bottom: 4px;
}

.ns-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--mt-muted);
    text-transform: uppercase;
}

.ns-section-icon {
    flex-shrink: 0;
    color: var(--mt-muted);
}

/* ─── Gruppen-Items ─── */
.ns-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 20px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ns-group-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.ns-group-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.ns-group-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ns-group-icon svg {
    width: 18px;
    height: 18px;
}

.ns-group-name {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--mt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ns-group-item-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ns-group-lock {
    color: var(--mt-muted);
    opacity: 0.7;
}

.ns-group-options {
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    color: var(--mt-muted);
}

.ns-group-item:hover .ns-group-options {
    opacity: 1;
}

.ns-group-options:hover {
    color: var(--mt-text);
    background: rgba(0, 0, 0, 0.06);
}

/* ─── Seiten-Header (innerhalb der Pages-View) ─── */
.ns-pages-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 6px;
}

.ns-pages-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--mt-muted);
    text-transform: uppercase;
}

.ns-pages-chevron {
    color: var(--mt-muted);
}

.ns-add-page-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--mt-muted);
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.ns-add-page-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--mt-text);
}

.ns-add-page-btn svg {
    width: 16px;
    height: 16px;
}

/* ─── Seiten-Items ─── */
.ns-page-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 20px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ns-page-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.ns-page-item.active {
    background: rgba(0, 170, 255, 0.08);
    color: var(--mt-blue);
}

.ns-page-item.active .ns-page-icon,
.ns-page-item.active .ns-page-name {
    color: var(--mt-blue);
}

.ns-page-toggle {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 4px;
    cursor: pointer;
    color: var(--mt-muted);
    transition: transform 0.2s ease, color 0.15s;
}

.ns-page-toggle:hover {
    color: var(--mt-text);
    background: rgba(0, 0, 0, 0.06);
}

.ns-page-toggle.ns-toggle-hidden {
    visibility: hidden;
}

.ns-page-toggle.ns-toggle-expanded {
    transform: rotate(90deg);
}

.ns-page-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--mt-muted);
}

.ns-page-name {
    font-size: 13px;
    font-weight: 400;
    color: var(--mt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.ns-page-item.active .ns-page-name {
    font-weight: 500;
}

/* Aktions-Buttons bei Hover (Unterseite +, Papierkorb) */
.ns-page-add-sub,
.ns-page-delete {
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mt-muted);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
    margin-left: 2px;
}

.ns-page-item:hover .ns-page-add-sub,
.ns-page-item:hover .ns-page-delete {
    opacity: 1;
}

.ns-page-add-sub:hover {
    color: var(--mt-text);
    background: rgba(0, 0, 0, 0.06);
}

.ns-page-delete:hover {
    color: #d9534f;
    background: rgba(217, 83, 79, 0.08);
}

/* Drag & Drop: Seite verschieben */
.ns-page-item {
    user-select: none;
}

.ns-page-dragging {
    opacity: 0.4;
}

.ns-page-drop-target {
    background: rgba(0, 170, 255, 0.12) !important;
    box-shadow: inset 0 0 0 1px var(--mt-blue);
}

body.dark-mode .ns-page-add-sub:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .ns-page-delete:hover {
    color: #ff7b74;
    background: rgba(255, 123, 116, 0.12);
}

body.dark-mode .ns-page-drop-target {
    background: rgba(0, 170, 255, 0.2) !important;
}

/* ─── Empty State ─── */
.ns-empty {
    padding: 20px 16px;
    text-align: center;
    color: var(--mt-muted);
    font-size: 13px;
}

/* ─── Hauptbereich (rechts) ─── */
.notes-main {
    flex: 1;
    background: var(--mt-white);
    overflow-y: auto;
    padding: 0;
    position: relative;
}

.notes-main-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--mt-text);
    padding: 40px 48px 8px;
    margin: 0;
}

.notes-recent-subtitle {
    font-size: 14px;
    color: var(--mt-muted);
    padding: 0 48px 24px;
    margin: 0;
}

.notes-main-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-right: 48px;
}

.notes-trash-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin-bottom: 24px;
    border: 1px solid var(--mt-border);
    border-radius: 8px;
    background: #fff;
    color: var(--mt-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.notes-trash-btn:hover {
    color: var(--mt-text);
    border-color: var(--mt-muted);
    background: rgba(0, 0, 0, 0.02);
}

/* ─── Papierkorb-Ansicht ─── */
.notes-trash {
    padding: 32px 48px;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
}

.notes-trash-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mt-border);
    margin-bottom: 20px;
}

.notes-trash-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--mt-border);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--mt-muted);
    transition: color 0.15s, background 0.15s;
}
.notes-trash-back:hover {
    color: var(--mt-text);
    background: rgba(0, 0, 0, 0.03);
}

.notes-trash-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--mt-text);
    flex: 1;
    margin: 0;
}

.notes-trash-empty-btn {
    padding: 8px 14px;
    border: 1px solid rgba(217, 83, 79, 0.5);
    background: #fff;
    border-radius: 6px;
    color: #d9534f;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.notes-trash-empty-btn:hover {
    background: rgba(217, 83, 79, 0.08);
    border-color: #d9534f;
}

.notes-trash-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--mt-border);
    margin-bottom: 16px;
}
.notes-trash-tab {
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--mt-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.notes-trash-tab:hover { color: var(--mt-text); }
.notes-trash-tab.active {
    color: var(--mt-blue);
    border-bottom-color: var(--mt-blue);
}
.notes-trash-tab .nt-count {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mt-muted);
}
.notes-trash-tab.active .nt-count {
    background: rgba(0, 170, 255, 0.12);
    color: var(--mt-blue);
}

.notes-trash-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notes-trash-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--mt-border);
    border-radius: 8px;
    background: #fff;
}
.notes-trash-item.nt-sub {
    margin-left: 24px;
    background: rgba(0, 0, 0, 0.015);
}
.nt-icon { flex-shrink: 0; }
.nt-body { flex: 1; min-width: 0; }
.nt-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--mt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nt-meta {
    font-size: 12px;
    color: var(--mt-muted);
    margin-top: 2px;
}
.nt-type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--mt-muted);
    letter-spacing: 0.04em;
}
.nt-preview {
    font-size: 13px;
    color: var(--mt-text);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.nt-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.nt-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    color: var(--mt-muted);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.nt-btn:hover { color: var(--mt-text); background: rgba(0, 0, 0, 0.03); }
.nt-btn.nt-purge:hover { color: #d9534f; border-color: rgba(217, 83, 79, 0.4); background: rgba(217, 83, 79, 0.05); }
.nt-btn.nt-restore:hover { color: var(--mt-blue); border-color: rgba(0, 170, 255, 0.4); background: rgba(0, 170, 255, 0.05); }

.notes-trash-page-group {
    margin-bottom: 16px;
}
.nt-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    margin-bottom: 4px;
}

.notes-trash-empty,
.notes-trash-loading {
    padding: 40px 20px;
    text-align: center;
    color: var(--mt-muted);
    font-size: 14px;
}

/* Dark mode */
body.dark-mode .notes-trash-btn,
body.dark-mode .notes-trash-back,
body.dark-mode .notes-trash-item,
body.dark-mode .notes-trash-empty-btn,
body.dark-mode .nt-btn {
    background: #1e2226;
    border-color: #2e3338;
    color: rgba(255, 255, 255, 0.6);
}
body.dark-mode .notes-trash-btn:hover,
body.dark-mode .notes-trash-back:hover,
body.dark-mode .nt-btn:hover {
    background: #232a30;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.15);
}
body.dark-mode .notes-trash-item.nt-sub { background: #1a1d21; }
body.dark-mode .notes-trash-tabs { border-bottom-color: #2e3338; }
body.dark-mode .notes-trash-header { border-bottom-color: #2e3338; }
body.dark-mode .nt-title { color: rgba(255, 255, 255, 0.9); }
body.dark-mode .nt-preview { color: rgba(255, 255, 255, 0.8); }
body.dark-mode .notes-trash-title { color: rgba(255, 255, 255, 0.9); }
body.dark-mode .notes-trash-tab .nt-count { background: rgba(255, 255, 255, 0.08); }

/* Kürzlich verwendete Notizen - Kacheln */
.notes-recent-list {
    padding: 0 48px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notes-recent-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s;
    background: #fff;
    border: 1px solid var(--mt-border);
}

.notes-recent-item:hover {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgb(200, 205, 210);
}

.notes-recent-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notes-recent-icon svg {
    width: 22px;
    height: 22px;
}

.notes-recent-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--mt-text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notes-recent-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: var(--mt-muted);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* NOTES BLOCK EDITOR                                                  */
/* ═══════════════════════════════════════════════════════════════════ */

.notes-editor {
    display: none;
    flex-direction: column;
    position: absolute;
    inset: 0;
    background: var(--mt-white);
    z-index: 5;
}

.ne-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.ne-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 80px 200px;
    position: relative;
    min-height: 100%;
}

/* ─── Cover-Add Button ─── */
.ne-cover-add {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--mt-muted);
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.15s;
    margin-bottom: 16px;
    width: fit-content;
}

.ne-body:hover .ne-cover-add {
    opacity: 1;
}

.ne-cover-add:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--mt-text);
}

/* ─── Titel ─── */
.ne-title-wrap {
    margin-bottom: 8px;
}

.ne-title {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mt-text);
    font-family: 'Lora', 'Georgia', serif;
    background: transparent;
    padding: 0;
    overflow: hidden;
}

div.ne-title-readonly {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mt-text);
    font-family: 'Lora', 'Georgia', serif;
    padding: 0;
}

.ne-title::placeholder {
    color: var(--mt-muted);
    opacity: 0.4;
}

/* ─── Blocks Container ─── */
.ne-blocks {
    position: relative;
}

/* ─── Einzelner Block ─── */
.ne-block {
    position: relative;
    padding: 3px 0;
    min-height: 28px;
}

/* Block-Level Abstand für Überschriften (ersetzt margin-top auf den Inhalten,
   damit die Controls mit der ersten Zeile der Überschrift ausgerichtet sind) */
.ne-block[data-type="heading1"] { margin-top: 1em; }
.ne-block[data-type="heading2"] { margin-top: 0.8em; }
.ne-block[data-type="heading3"] { margin-top: 0.6em; }
.ne-block[data-type="heading1"]:first-child,
.ne-block[data-type="heading2"]:first-child,
.ne-block[data-type="heading3"]:first-child { margin-top: 0; }

.ne-block:hover > .ne-block-ctrls {
    opacity: 1;
}

/* ─── Block Controls (außerhalb vom Block, in der linken Rinne) ─── */
.ne-block-ctrls {
    position: absolute;
    left: -80px;
    top: 2px;
    display: flex;
    gap: 1px;
    opacity: 0;
    transition: opacity 0.12s;
}

/* Vertikal mittig zur ersten Zeile der Überschriften */
.ne-block[data-type="heading1"] > .ne-block-ctrls { top: 10px; }
.ne-block[data-type="heading2"] > .ne-block-ctrls { top: 6px; }
.ne-block[data-type="heading3"] > .ne-block-ctrls { top: 4px; }

.ne-ctrl-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    color: var(--mt-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.1s, color 0.1s;
}

.ne-ctrl-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--mt-text);
}

.ne-ctrl-del:hover {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.08);
}

/* ─── Block Content (contenteditable) ─── */
.ne-block-content {
    outline: none;
    min-height: 1.5em;
    line-height: 1.65;
    font-size: 16px;
    color: var(--mt-text);
    word-break: break-word;
}

.ne-block-content:empty::before {
    content: attr(data-placeholder);
    color: var(--mt-muted);
    opacity: 0.45;
    pointer-events: none;
    font-style: normal;
}

.ne-block-content a {
    color: var(--mt-blue);
    text-decoration: underline;
    text-decoration-color: rgba(0, 170, 255, 0.4);
    text-underline-offset: 2px;
}

.ne-block-content a:hover {
    text-decoration-color: var(--mt-blue);
}

/* ─── Überschriften ─── */
.ne-h1 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    font-family: 'Lora', 'Georgia', serif;
    letter-spacing: -0.01em;
}

.ne-h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    font-family: 'Lora', 'Georgia', serif;
}

.ne-h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

/* ─── Listen ─── */
.ne-list {
    padding-left: 24px;
    line-height: 1.65;
    font-size: 16px;
    color: var(--mt-text);
}

.ne-list li {
    padding: 1px 0;
}

.ne-list li::marker {
    color: var(--mt-muted);
}

/* Verschachtelte Listen (Einrückung per TAB, bis 3 Ebenen) */
.ne-list ul,
.ne-list ol {
    padding-left: 24px;
    margin: 2px 0;
}

.ne-list ul li::marker {
    content: "◦ ";
    color: var(--mt-muted);
}

.ne-list ul ul li::marker {
    content: "▪ ";
    color: var(--mt-muted);
}

.ne-list ol {
    list-style-type: lower-alpha;
}

.ne-list ol ol {
    list-style-type: lower-roman;
}

/* ─── Bild-Block ─── */
.ne-image-wrap {
    border-radius: 8px;
    overflow: hidden;
    margin: 4px 0;
}

.ne-image-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    cursor: default;
}

.ne-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    border: 2px dashed var(--mt-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    color: var(--mt-muted);
    font-size: 14px;
}

.ne-image-placeholder:hover {
    border-color: var(--mt-blue);
    background: rgba(0, 170, 255, 0.04);
}

.ne-image-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 20px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    color: var(--mt-muted);
    font-size: 14px;
}

.ne-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mt-border);
    border-top-color: var(--mt-blue);
    border-radius: 50%;
    animation: ne-spin 0.7s linear infinite;
}

@keyframes ne-spin {
    to { transform: rotate(360deg); }
}

/* ─── Zitat ─── */
.ne-quote {
    border-left: 3px solid var(--mt-blue);
    padding: 2px 0 2px 20px;
    color: rgb(100, 110, 115);
    font-style: italic;
    font-size: 17px;
    line-height: 1.65;
    margin: 4px 0;
}

/* ─── Boxen (Info, Warnung, Erfolg) ─── */
.ne-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 10px;
    margin: 4px 0;
}

.ne-box-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ne-box-text {
    flex: 1;
    min-width: 0;
}

/* Info-Box */
.ne-box-info {
    background: rgba(0, 170, 255, 0.10);
}

.ne-box-info .ne-box-icon {
    color: var(--mt-blue);
}

/* Warnungs-Box */
.ne-box-warning {
    background: rgba(255, 170, 0, 0.10);
}

.ne-box-warning .ne-box-icon {
    color: #e6a000;
}

/* Erfolgs-Box */
.ne-box-success {
    background: rgba(0, 200, 83, 0.10);
}

.ne-box-success .ne-box-icon {
    color: #00b84d;
}

/* ─── Trennlinie ─── */
.ne-divider-line {
    padding: 12px 0;
}

.ne-divider-line hr {
    border: none;
    border-top: 1px solid var(--mt-border);
    margin: 0;
}

/* ─── Spacer (Click = neuer Block) ─── */
.ne-spacer {
    min-height: 200px;
    cursor: text;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* FLOATING FORMAT-TOOLBAR                                             */
/* ═══════════════════════════════════════════════════════════════════ */

.ne-toolbar {
    display: none;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: var(--mt-sidebar);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 200;
    pointer-events: auto;
}

.ne-tb-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.1s, color 0.1s;
    padding: 0;
}

.ne-tb-btn strong {
    font-weight: 700;
    font-size: 14px;
}

.ne-tb-btn em {
    font-style: italic;
    font-size: 14px;
}

.ne-tb-btn u {
    font-size: 14px;
}

.ne-tb-btn s,
.ne-tb-strike s {
    font-size: 14px;
}

.ne-tb-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.ne-tb-btn.active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.ne-tb-sep {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 3px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* BLOCK-TYP-MENÜ                                                      */
/* ═══════════════════════════════════════════════════════════════════ */

.ne-block-menu {
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    width: 220px;
    max-height: 420px;
    overflow-y: auto;
    z-index: 201;
    padding: 6px;
}

.ne-bm-cat {
    font-size: 11px;
    font-weight: 600;
    color: var(--mt-muted);
    padding: 10px 10px 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ne-bm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 14px;
    color: var(--mt-text);
    transition: background 0.1s;
    font-family: inherit;
}

.ne-bm-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.ne-bm-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    color: var(--mt-text);
}

.ne-bm-label {
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* SPEICHER-INDIKATOR                                                  */
/* ═══════════════════════════════════════════════════════════════════ */

.ne-save-indicator {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 12px;
    color: var(--mt-muted);
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.03);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 10;
}

/* Rückgängig-Button im Editor */
.ne-undo-btn {
    position: absolute;
    top: 10px;
    right: 110px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--mt-border);
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mt-muted);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    z-index: 10;
    padding: 0;
}
.ne-undo-btn:hover {
    color: var(--mt-text);
    border-color: var(--mt-muted);
    background: rgba(0, 0, 0, 0.02);
}
body.dark-mode .ne-undo-btn {
    background: #1e2226;
    border-color: #2e3338;
    color: rgba(255, 255, 255, 0.6);
}
body.dark-mode .ne-undo-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.ne-save-indicator.ne-saving {
    opacity: 1;
}

.ne-save-indicator.ne-saved {
    opacity: 1;
    color: #00b84d;
}

.ne-save-indicator.ne-error {
    opacity: 1;
    color: rgb(208, 31, 46);
}

.ne-save-indicator.ne-fade {
    opacity: 0;
}

@media (max-width: 980px) {
    .sidebar {
        width: 60px;
    }

    .top-navbar,
    .main-content {
        left: 60px;
    }

    .notes-layout {
        left: 60px;
    }

    .notes-sidebar {
        width: 220px;
        min-width: 220px;
    }

    .ne-body {
        padding-left: 40px;
        padding-right: 40px;
    }

    .ne-title {
        font-size: 32px;
    }

    /* Bei schmalem Body-Padding: Controls wieder innerhalb des Blocks platzieren */
    .ne-block { padding-left: 40px; }
    .ne-block-ctrls { left: 0; }
    .ne-block[data-type="heading1"] > .ne-block-ctrls,
    .ne-block[data-type="heading2"] > .ne-block-ctrls,
    .ne-block[data-type="heading3"] > .ne-block-ctrls {
        /* top bleibt wie oben */
    }
}

@media (max-width: 700px) {
    .ne-body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ne-block {
        padding-left: 40px;
    }

    .ne-title {
        font-size: 28px;
    }
}

/* ═══════════════════════════════════════════════════
   MeisterTask Import
   ═══════════════════════════════════════════════════ */

.mt-import-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 20px;
}

.mt-import-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 32px;
    padding: 16px 0;
}

.mt-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.mt-step.active,
.mt-step.done {
    opacity: 1;
}

.mt-step-number {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    background: #fff;
    border: 2px solid var(--mt-border);
    color: var(--mt-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
}

.mt-step.active .mt-step-number {
    background: var(--mt-blue);
    border-color: var(--mt-blue);
    color: #fff;
}

.mt-step.done .mt-step-number {
    background: rgb(46, 174, 52);
    border-color: rgb(46, 174, 52);
    color: #fff;
}

.mt-step-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--mt-muted);
}

.mt-step.active .mt-step-label {
    color: var(--mt-text);
}

.mt-step-line {
    flex: 0 0 60px;
    height: 2px;
    background: var(--mt-border);
    margin: 0 8px;
    margin-bottom: 22px;
}

.mt-import-step {
    background: #fff;
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    padding: 24px;
    box-shadow: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 2px 8px 0;
}

.mt-import-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--mt-text);
    margin-bottom: 6px;
}

.mt-import-desc {
    color: var(--mt-muted);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 0;
}

.mt-import-actions-top {
    margin: 16px 0;
    display: flex;
    gap: 8px;
}

.mt-import-placeholder-small {
    text-align: center;
    padding: 40px 20px;
    color: var(--mt-muted);
    font-size: 14px;
}

.mt-import-footer {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--mt-border);
}

/* User-Import-Tabelle */
.mt-import-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.mt-import-table th {
    text-align: left;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.02);
    color: var(--mt-muted);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--mt-border);
}

.mt-import-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--mt-border);
    color: var(--mt-text);
    vertical-align: middle;
}

.mt-import-table tr:last-child td {
    border-bottom: none;
}

.mt-import-table tr:hover td {
    background: rgba(0, 170, 255, 0.04);
}

.mt-import-avatar {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    object-fit: cover;
    background: var(--mt-border);
    flex-shrink: 0;
}

.mt-import-avatar-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    background: rgb(138, 148, 153);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

.mt-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.mt-badge-matched {
    background: rgba(46, 174, 52, 0.1);
    color: rgb(36, 138, 41);
}

.mt-badge-new {
    background: rgba(0, 170, 255, 0.1);
    color: rgb(0, 130, 200);
}

.mt-badge-imported {
    background: rgba(46, 174, 52, 0.1);
    color: rgb(36, 138, 41);
}

.mt-badge-skipped {
    background: rgba(138, 148, 153, 0.1);
    color: var(--mt-muted);
}

.mt-import-select {
    background: #fff;
    color: var(--mt-text);
    border: 1px solid var(--mt-border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    min-width: 140px;
}

.mt-import-select:focus {
    border-color: var(--mt-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 170, 255, 0.15);
}

.mt-import-result {
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.6;
}

.mt-import-result-success {
    background: rgba(46, 174, 52, 0.08);
    border: 1px solid rgba(46, 174, 52, 0.25);
    color: rgb(36, 110, 41);
}

.mt-import-result-info {
    background: rgba(0, 170, 255, 0.08);
    border: 1px solid rgba(0, 170, 255, 0.25);
    color: rgb(0, 110, 170);
}

.mt-import-result-error {
    background: rgba(217, 83, 79, 0.08);
    border: 1px solid rgba(217, 83, 79, 0.3);
    color: #a32b27;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 12px;
}

/* Notizen-Import: Anleitung + Datei-Upload */
.mt-notes-howto {
    background: var(--mt-bg);
    border: 1px solid var(--mt-border);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 12px 0 16px;
    font-size: 13px;
}
.mt-notes-howto > summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--mt-text);
    padding: 2px 0;
    outline: none;
}
.mt-notes-howto[open] > summary { margin-bottom: 8px; }
.mt-notes-howto ol {
    margin: 4px 0 0 20px;
    line-height: 1.6;
    color: var(--mt-text);
}
.mt-notes-howto code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
}

.mt-notes-upload {
    margin: 12px 0;
}
.mt-notes-upload-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
    border: 2px dashed var(--mt-border);
    border-radius: 10px;
    cursor: pointer;
    background: var(--mt-bg);
    color: var(--mt-text);
    font-size: 13px;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
}
.mt-notes-upload-label:hover {
    border-color: var(--mt-blue);
    background: rgba(0, 170, 255, 0.04);
}
.mt-notes-upload-file {
    margin-left: auto;
    color: var(--mt-muted);
    font-size: 12px;
    font-weight: 400;
}

body.dark-mode .mt-notes-howto {
    background: rgba(255, 255, 255, 0.04);
    border-color: #2e3338;
}
body.dark-mode .mt-notes-howto code { background: rgba(255, 255, 255, 0.08); }
body.dark-mode .mt-notes-upload-label {
    background: #1e2226;
    border-color: #2e3338;
    color: rgba(255, 255, 255, 0.85);
}
body.dark-mode .mt-notes-upload-label:hover {
    background: rgba(0, 170, 255, 0.08);
    border-color: var(--mt-blue);
}

/* Projekt-Import: Checkbox-Liste */
.mt-project-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mt-project-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.mt-project-item:hover {
    background: rgba(0, 170, 255, 0.04);
}

.mt-project-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--mt-blue);
    flex-shrink: 0;
}

.mt-project-item-info {
    flex: 1;
    min-width: 0;
}

.mt-project-item-name {
    font-weight: 500;
    color: var(--mt-text);
    font-size: 14px;
}

.mt-project-item-meta {
    font-size: 12px;
    color: var(--mt-muted);
    margin-top: 2px;
}

.mt-select-all-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--mt-border);
    font-size: 13px;
    color: var(--mt-muted);
}

.mt-select-all-bar input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--mt-blue);
}

.mt-import-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: var(--mt-muted);
    font-size: 14px;
}

.mt-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mt-border);
    border-top-color: var(--mt-blue);
    border-radius: 100%;
    animation: mt-spin 0.6s linear infinite;
}

@keyframes mt-spin {
    to { transform: rotate(360deg); }
}

.mt-import-option {
    background: rgba(0, 170, 255, 0.04);
    border: 1px solid var(--mt-border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.mt-import-option-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--mt-text);
}

.mt-import-option-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--mt-blue);
    flex-shrink: 0;
    margin-top: 2px;
}

.mt-import-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.mt-import-stat {
    font-size: 13px;
    color: var(--mt-text);
    padding: 4px 0;
}

.mt-import-stat-num {
    font-weight: 600;
    color: rgb(36, 138, 41);
    margin-right: 4px;
}

/* ─── MeisterTask Import: Terminal/CLI ──────────────────────────── */
.mt-terminal-container {
    border: 1px solid #d0d5da;
    border-radius: 10px;
    overflow: hidden;
    background: #1e1e2e;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.mt-terminal-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #2b2b3d;
    border-bottom: 1px solid #3b3b50;
}

.mt-terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.mt-terminal-dot-red { background: #ff5f57; }
.mt-terminal-dot-yellow { background: #febc2e; }
.mt-terminal-dot-green { background: #28c840; }

.mt-terminal-title {
    color: #cdd6f4;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    flex: 1;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
}

.mt-terminal-status {
    font-size: 11px;
    color: #a6adc8;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
}
.mt-terminal-status-running {
    color: #89dceb;
}
.mt-terminal-status-done {
    color: #a6e3a1;
}
.mt-terminal-status-error {
    color: #f38ba8;
}

.mt-terminal-progress {
    height: 3px;
    background: #313244;
}
.mt-terminal-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #89b4fa, #74c7ec);
    width: 0%;
    transition: width 0.3s ease;
}

.mt-terminal-body {
    padding: 12px 14px;
    max-height: 420px;
    overflow-y: auto;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
    font-size: 12px;
    line-height: 1.6;
    color: #cdd6f4;
    scrollbar-width: thin;
    scrollbar-color: #45475a transparent;
}
.mt-terminal-body::-webkit-scrollbar {
    width: 6px;
}
.mt-terminal-body::-webkit-scrollbar-track {
    background: transparent;
}
.mt-terminal-body::-webkit-scrollbar-thumb {
    background: #45475a;
    border-radius: 3px;
}

.mt-terminal-line {
    white-space: pre-wrap;
    word-break: break-word;
}

.mt-terminal-info {
    color: #89b4fa;
    font-weight: 600;
}
.mt-terminal-error {
    color: #f38ba8;
}
.mt-terminal-warn {
    color: #fab387;
}
.mt-terminal-task {
    color: #a6adc8;
}
.mt-terminal-log {
    color: #bac2de;
}

.mt-terminal-summary {
    background: #fff;
    border-top: 2px solid #d0d5da;
    padding: 20px;
}

.mt-terminal-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.mt-summary-stat {
    text-align: center;
    padding: 12px 8px;
    border-radius: 8px;
    background: #f6f8fa;
    border: 1px solid #e8ecf0;
}
.mt-summary-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 2px;
}
.mt-summary-stat-label {
    font-size: 11px;
    color: #65727b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mt-summary-stat-success .mt-summary-stat-value { color: rgb(36, 138, 41); }
.mt-summary-stat-info .mt-summary-stat-value { color: #2563eb; }
.mt-summary-stat-muted .mt-summary-stat-value { color: #8b95a0; }
.mt-summary-stat-error .mt-summary-stat-value { color: rgb(208, 31, 46); }

.mt-terminal-summary-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.mt-terminal-footer-bar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 14px;
    background: #2b2b3d;
    border-top: 1px solid #3b3b50;
}

.mt-terminal-stop-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: #f38ba8;
    color: #1e1e2e;
    transition: background 0.15s;
}
.mt-terminal-stop-btn:hover {
    background: #eba0ac;
}

.mt-terminal-stopped-hint {
    font-size: 13px;
    color: #65727b;
    padding: 8px 0 4px;
    font-style: italic;
}

/* ── Account-Seite ───────────────────────────────────────────────────────── */

.account-page {
    overflow-y: auto;
}

.account-container {
    max-width: 780px;
    margin: 0 auto;
    padding: 32px 24px 48px;
}

.account-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--mt-text);
    margin-bottom: 20px;
}

/* Tabs */
.account-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--mt-border);
    margin-bottom: 28px;
}

.account-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mt-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.account-tab:hover {
    color: var(--mt-text);
}

.account-tab.active {
    color: var(--mt-blue);
    border-bottom-color: var(--mt-blue);
}

/* Tab-Content */
.account-tab-content {
    display: none;
}

.account-tab-content.active {
    display: block;
}

/* Section */
.account-section {
    background: var(--mt-white);
    border-radius: 10px;
    border: 1px solid var(--mt-border);
    padding: 24px;
}

.account-section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--mt-text);
    margin-bottom: 20px;
}

/* Profil-Zeile */
.account-profile-row {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.account-fields {
    flex: 1;
    min-width: 0;
}

.account-name-row {
    display: flex;
    gap: 10px;
}

.account-name-row input {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 40px;
    border: 1px solid rgba(61, 71, 77, 0.2);
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--mt-text);
    background: var(--mt-white);
    outline: none;
    transition: border-color 0.15s;
}

.account-name-row input:focus {
    border-color: var(--mt-blue);
}

/* Avatar-Spalte */
.account-avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 22px;
}

.account-avatar-wrap {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
}

.account-avatar-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgb(138, 148, 153);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.account-avatar-arrow {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--mt-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}

.account-avatar-arrow:hover {
    background: #c8cdd0;
}

.account-avatar-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mt-blue);
}

.account-avatar-hint {
    font-size: 12px;
    color: var(--mt-muted);
    text-align: center;
    max-width: 120px;
    line-height: 1.4;
}

/* Avatar-Dropdown-Menü */
.account-avatar-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: -8px;
    background: var(--mt-white);
    border: 1px solid var(--mt-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 160px;
    z-index: 100;
    overflow: hidden;
}

.account-avatar-menu.show {
    display: block;
}

.account-avatar-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--mt-text);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background 0.12s;
}

.account-avatar-menu-item:hover {
    background: rgba(0,0,0,0.04);
}

/* Aktions-Buttons */
.account-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

/* Feedback-Nachrichten */
.account-msg {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 12px;
}

.account-msg-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.account-msg-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ─── Benachrichtigungs-Einstellungen ──────────────────────────────────── */

.notif-description {
    font-size: 13px;
    color: var(--mt-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}

.notif-push-status {
    margin-bottom: 16px;
}

.notif-push-status-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.notif-push-status-inner.notif-push-granted {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.notif-push-status-inner.notif-push-denied {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.notif-push-status-inner.notif-push-prompt {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.notif-push-status-inner button {
    margin-left: auto;
    padding: 5px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: var(--mt-blue);
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

.notif-push-status-inner button:hover {
    opacity: 0.9;
}

/* SMTP Settings */
.smtp-label {
    display: block;
    font-size: 12px;
    color: var(--mt-muted);
    margin-bottom: 4px;
    font-weight: 500;
}
.smtp-input {
    width: 100%;
    height: 40px;
    border: 1px solid var(--mt-border);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--mt-text);
    background: var(--mt-white);
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color .15s;
}
.smtp-input:focus {
    outline: none;
    border-color: var(--mt-primary, #4a9eda);
}
select.smtp-input {
    appearance: auto;
    cursor: pointer;
}

/* Error Log Viewer */
.log-entry {
    padding: 4px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    word-break: break-word;
    transition: background .1s;
}
.log-entry:hover {
    background: rgba(255,255,255,0.04);
}
.log-entry:last-child {
    border-bottom: none;
}
.log-time {
    color: #6b7280;
    margin-right: 8px;
    white-space: nowrap;
    user-select: all;
}
.log-msg {
    color: #d1d5db;
    user-select: all;
}
.log-level-fatal .log-msg { color: #ff4444; font-weight: 600; }
.log-level-error .log-msg { color: #f87171; }
.log-level-warning .log-msg { color: #fbbf24; }
.log-level-notice .log-msg { color: #60a5fa; }
.log-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 6px;
    letter-spacing: 0.3px;
}
.log-badge-fatal { background: rgba(255,68,68,0.2); color: #ff4444; }
.log-badge-error { background: rgba(248,113,113,0.15); color: #f87171; }
.log-badge-warning { background: rgba(251,191,36,0.15); color: #fbbf24; }
.log-badge-notice { background: rgba(96,165,250,0.15); color: #60a5fa; }
.log-badge-info { background: rgba(107,114,128,0.15); color: #6b7280; }
.log-empty {
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
}

.notif-table {
    width: 100%;
    border-collapse: collapse;
}

.notif-table thead th {
    font-size: 12px;
    font-weight: 600;
    color: var(--mt-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--mt-border);
}

.notif-th-event {
    text-align: left;
}

.notif-th-channel {
    text-align: center;
    width: 80px;
}

.notif-table tbody tr {
    border-bottom: 1px solid var(--mt-border);
}

.notif-table tbody tr:last-child {
    border-bottom: none;
}

.notif-table tbody td {
    padding: 14px 12px;
    vertical-align: middle;
}

.notif-td-check {
    text-align: center;
    width: 80px;
}

.notif-event-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--mt-text);
    margin-bottom: 2px;
}

.notif-event-desc {
    font-size: 12px;
    color: var(--mt-muted);
    line-height: 1.4;
}

/* Toggle Switch */
.notif-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    cursor: pointer;
}

.notif-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.notif-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--mt-border);
    border-radius: 22px;
    transition: background 0.2s;
}

.notif-toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.notif-toggle input:checked + .notif-toggle-slider {
    background: var(--mt-blue);
}

.notif-toggle input:checked + .notif-toggle-slider::before {
    transform: translateX(16px);
}

/* Navbar-Dropdown: Link-Element stylen wie button */
a.pnav-user-dropdown-item {
    text-decoration: none;
    color: inherit;
}

/* ═══════════════════════════════════════════════════
   App-Style Projekte-Seite (Mobile only)
   Auf Desktop: .app-projects und .app-fab sind hidden.
   Auf Mobile (<768px): Sidebar weg, Bottom-Nav sichtbar,
   App-Style-Layout aktiv.
   ═══════════════════════════════════════════════════ */

.app-projects,
.app-fab {
    display: none;
}

/* Component styles (gelten nur wenn parent sichtbar ist) */

.app-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 0;
}

.app-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.app-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

.app-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-header-avatar-initials {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    background: rgb(138, 148, 153);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.app-header-search,
.app-header-icon-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    color: var(--mt-muted);
    transition: color 0.2s;
}

.app-header-search:hover,
.app-header-icon-btn:hover {
    color: var(--mt-text);
}

.app-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-page-title {
    position: relative;
    z-index: 2;
    font-size: 32px;
    font-weight: 700;
    color: var(--mt-text);
    padding: 16px 20px 12px;
    letter-spacing: -0.02em;
}

.app-filter-pill {
    display: none;
}

.app-search-filter {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 20px 20px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--mt-border);
}

.app-search-filter-icon {
    flex-shrink: 0;
    color: var(--mt-muted);
}

.app-search-filter-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--mt-text);
    font-size: 14px;
}

.app-search-filter-input::placeholder {
    color: var(--mt-muted);
}

.app-group-card {
    position: relative;
    z-index: 2;
    margin: 0 16px 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--mt-border);
    overflow: hidden;
}

.app-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.app-group-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--mt-text);
}

.app-group-chevron {
    width: 20px;
    height: 20px;
    color: var(--mt-muted);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

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

.app-group-projects {
    padding: 0 0 6px;
}

.app-project-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}

.app-project-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

.app-project-item:active {
    background: rgba(0, 0, 0, 0.05);
}

.app-project-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.app-project-icon svg {
    width: 18px;
    height: 18px;
}

.app-project-name {
    flex: 1;
    font-size: 15px;
    color: var(--mt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-project-members {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--mt-muted);
}

.app-project-members svg {
    width: 22px;
    height: 22px;
}

.app-group-card.app-ungrouped {
    background: var(--mt-bg);
    border-color: var(--mt-border);
}

.app-projects-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--mt-muted);
    font-size: 15px;
}

/* ═══════════════════════════════════════════════════
   MOBILE: Bottom-Nav + App-Layout aktivieren
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Layout-Anpassungen: kein Sidebar-Offset auf Mobile */
    .top-navbar {
        left: 0;
    }

    .main-content {
        left: 0;
        bottom: 0;
    }

    .notes-layout {
        left: 0;
        bottom: 0;
    }

    .project-panel {
        left: 0;
    }

    .mt-board-scroll {
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
    }

    /* Dashboard: Desktop-Elemente ausblenden, Mobile-App-Layout einblenden */
    body.app-projects-page .top-navbar {
        display: none;
    }

    body.app-projects-page .main-content {
        display: none;
    }

    body.app-projects-page {
        background: var(--mt-bg);
    }

    body.app-projects-page .app-header {
        display: none;
    }

    body.app-projects-page .app-page-title {
        padding-top: 20px;
    }

    body.app-projects-page .app-projects {
        display: block;
        position: fixed;
        top: 65px;
        left: 0;
        right: 0;
        bottom: var(--bottom-nav-height);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background: var(--mt-bg);
        padding-bottom: 16px;
    }

    body.app-projects-page .app-fab {
        display: none;
        position: fixed;
        bottom: calc(var(--bottom-nav-height) + 20px);
        right: 20px;
        width: 56px;
        height: 56px;
        border-radius: 100%;
        background: var(--mt-blue);
        color: #fff;
        border: none;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(0, 170, 255, 0.4);
        cursor: pointer;
        z-index: 50;
        -webkit-tap-highlight-color: transparent;
    }

        body.app-projects-page .app-fab svg {
        width: 28px;
        height: 28px;
    }
}

/* ═══════════════════════════════════════════════════
   Mobile Kanban Board – Full-Width Snap-Columns
   ═══════════════════════════════════════════════════ */

/* Mobile Projekt-Header (App-Style) */
.mobile-project-header {
    display: none;
}

/* Mobile FAB für neue Aufgabe */
.kanban-fab {
    display: none;
}

/* Mobile Task-Dialog Elemente (desktop hidden) */
.td-mobile-col-bar { display: none; }
.td-mobile-assignee-row { display: none; }
.mobile-sheet-backdrop { display: none; }
.td-col-picker-sheet { display: none; }
.mph-menu-sheet { display: none; }
.mph-search-sheet { display: none; }
.td-mobile-bottom-bar { display: none; }
.td-action-sheet { display: none; }

@media (max-width: 768px) {

    /* Desktop-Navbar auf Projektseite ausblenden */
    body.project-page .top-navbar {
        display: none;
    }

    /* Mobile Projekt-Header einblenden (below hk-navbar) */
    body.project-page .mobile-project-header {
        display: flex;
        position: fixed;
        top: 65px;
        left: 0;
        right: 0;
        height: calc(54px + var(--safe-top));
        z-index: 20;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px;
        padding-top: var(--safe-top);
        background: #fff;
        border-bottom: 1px solid var(--mt-border);
    }

    .mph-left {
        display: flex;
        align-items: center;
        gap: 0;
    }

    .mph-btn {
        width: 40px;
        height: 40px;
        border: none;
        background: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        color: var(--mt-text);
        -webkit-tap-highlight-color: transparent;
    }

    .mph-btn:active {
        background: rgba(0,0,0,0.06);
    }

    .mph-title-wrap {
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        padding: 6px 4px;
        border-radius: 8px;
        max-width: 200px;
    }

    .mph-title-wrap:active {
        background: rgba(0,0,0,0.05);
    }

    .mph-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--mt-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
    }

    .mph-title-chevron {
        color: var(--mt-muted);
        flex-shrink: 0;
    }

    .mph-right {
        display: flex;
        align-items: center;
        gap: 0;
    }

    /* ─── Mobile Project Menu Bottom Sheet ─────────────────────── */
    .mph-menu-sheet {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #fff;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
        padding-bottom: max(var(--safe-bottom), 16px);
        transform: translateY(100%);
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mph-menu-sheet.show {
        transform: translateY(0);
        pointer-events: auto;
    }

    .mph-menu-sheet::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0.15);
        margin: 10px auto 6px;
    }

    .mph-menu-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px 12px;
        font-size: 16px;
        font-weight: 600;
        color: var(--mt-text);
    }

    .mph-menu-sheet-close {
        border: none;
        background: none;
        color: var(--mt-blue);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        padding: 4px 8px;
    }

    .mph-menu-sheet-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 20px;
        width: 100%;
        border: none;
        background: none;
        text-align: left;
        font-family: inherit;
        font-size: 16px;
        color: var(--mt-text);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mph-menu-sheet-item:active {
        background: rgb(245, 246, 248);
    }

    .mph-menu-sheet-item svg {
        color: var(--mt-muted);
        flex-shrink: 0;
    }

    .mph-menu-sheet-divider {
        height: 1px;
        background: var(--mt-border);
        margin: 4px 20px;
    }

    /* ─── Mobile Search Bottom Sheet ──────────────────────────── */
    .mph-search-sheet {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9999;
        background: #f5f6f8;
        transform: translateY(100%);
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mph-search-sheet.show {
        transform: translateY(0);
        pointer-events: auto;
    }

    .mph-search-sheet-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background: #fff;
        border-bottom: 1px solid var(--mt-border);
    }

    .mph-search-sheet-input-wrap {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        background: #f0f1f3;
        border-radius: 10px;
    }

    .mph-search-sheet-input-wrap svg {
        color: var(--mt-muted);
        flex-shrink: 0;
    }

    .mph-search-sheet-input {
        flex: 1;
        border: none;
        background: none;
        outline: none;
        font-size: 15px;
        color: var(--mt-text);
        font-family: inherit;
    }

    .mph-search-sheet-input::placeholder {
        color: var(--mt-muted);
    }

    .mph-search-sheet-done {
        border: none;
        background: none;
        color: var(--mt-blue);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        padding: 4px 8px;
        flex-shrink: 0;
    }

    .mph-search-sheet-tabs {
        display: flex;
        padding: 12px 16px 0;
        gap: 0;
        background: #fff;
    }

    .mph-search-tab {
        flex: 1;
        padding: 10px 0;
        border: 1px solid var(--mt-border);
        background: #fff;
        font-size: 14px;
        font-weight: 500;
        color: var(--mt-muted);
        cursor: pointer;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }

    .mph-search-tab:first-child {
        border-radius: 8px 0 0 8px;
    }

    .mph-search-tab:last-child {
        border-radius: 0 8px 8px 0;
    }

    .mph-search-tab + .mph-search-tab {
        border-left: none;
    }

    .mph-search-tab.active {
        background: var(--mt-text);
        border-color: var(--mt-text);
        color: #fff;
    }

    .mph-search-sheet-results {
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
    }

    .mph-search-result-item {
        background: #fff;
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 12px;
        border: 1px solid var(--mt-border);
    }

    .mph-search-result-project {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--mt-muted);
        margin-bottom: 4px;
    }

    .mph-search-result-project svg {
        width: 14px;
        height: 14px;
        color: var(--mt-muted);
    }

    .mph-search-result-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--mt-text);
        margin-bottom: 4px;
    }

    .mph-search-result-desc {
        font-size: 14px;
        color: var(--mt-muted);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mph-search-result-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 10px;
        font-size: 13px;
        color: var(--mt-muted);
    }

    .mph-search-result-meta svg {
        width: 16px;
        height: 16px;
    }

    .mph-search-result-stat {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .mph-search-result-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-left: auto;
    }

    .mph-search-result-avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    .mph-search-empty {
        text-align: center;
        padding: 40px 20px;
        color: var(--mt-muted);
        font-size: 15px;
    }

    /* Kanban-Board mobile umbauen */
    body.project-page .main-content {
        top: calc(65px + 54px + var(--safe-top));
        padding: 0;
    }

    body.project-page .kanban-board {
        /* Horizontal scroll-snap */
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        height: 100%;
        gap: 0;
        padding: 0;
        /* kein sichtbarer Scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    body.project-page .kanban-board::-webkit-scrollbar {
        display: none;
    }

    /* Jede Spalte = 100% Viewport-Breite, snap */
    body.project-page .kanban-column {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        height: 100%;
        flex-shrink: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: flex;
        flex-direction: column;
        background: rgb(242, 244, 246);
        overflow: hidden;
    }

    body.project-page .kanban-column:nth-child(even) {
        background: rgb(242, 244, 246);
    }

    /* Spalten-Header: volle Breite, auffällige farbige Bar */
    body.project-page .column-header {
        height: 52px;
        padding: 0 16px;
        gap: 12px;
        flex-shrink: 0;
    }

    body.project-page .column-header h3 {
        font-size: 18px;
    }

    /* Task-Liste scrollt vertikal innerhalb der Spalte */
    body.project-page .task-list {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 12px 80px;
        scrollbar-width: none;
    }

    body.project-page .task-list::-webkit-scrollbar {
        display: none;
    }

    /* Task-Karten: schöner auf Mobile */
    body.project-page .task-card {
        border-radius: 14px;
        padding: 16px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    }

    body.project-page .task-card h4 {
        font-size: 16px;
        font-weight: 600;
    }

    /* "Aufgabe hinzufügen"-Button ausblenden (stattdessen FAB) */
    body.project-page .add-task-btn {
        display: none;
    }

    /* Column-Empty-State anpassen */
    body.project-page .column-empty {
        padding: 60px 20px;
    }

    /* Spalten-Indikator-Dots unten */
    .kanban-dots {
        position: fixed;
        bottom: calc(var(--bottom-nav-height) + 10px);
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        z-index: 15;
        pointer-events: none;
    }

    .kanban-dot {
        width: 6px;
        height: 6px;
        border-radius: 100%;
        background: rgba(0,0,0,0.2);
        transition: all 0.25s ease;
    }

    .kanban-dot.active {
        width: 18px;
        border-radius: 3px;
        background: var(--mt-blue);
    }

    /* FAB für neue Aufgabe (Mobile) */
    body.project-page .kanban-fab {
        display: flex;
        position: fixed;
        bottom: calc(var(--bottom-nav-height) + 16px);
        right: 20px;
        width: 56px;
        height: 56px;
        border-radius: 100%;
        background: var(--mt-blue);
        color: #fff;
        border: none;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(0, 170, 255, 0.4);
        cursor: pointer;
        z-index: 30;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.15s;
    }

    body.project-page .kanban-fab:active {
        transform: scale(0.93);
    }

    body.project-page .kanban-fab svg {
        width: 28px;
        height: 28px;
    }

    /* ============================================================
       TASK DIALOG – MOBIL (Full-Screen App-Style)
       ============================================================ */

    /* Scrim (backdrop) */
    body.project-page #taskModal.show {
        align-items: stretch;
        padding: 0;
    }

    body.project-page .task-overlay-scroll {
        padding: 0;
        background: rgb(242, 244, 246);
        align-items: stretch;
        justify-content: flex-start;
        min-height: 100%;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    body.project-page .task-dialog {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        height: 100%;
        box-shadow: none;
        background: rgb(242, 244, 246);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body.project-page .drag-drop-overlay { border-radius: 0; }

    /* ---- TOP BAR (Header) ----
       Layout: [X] [Complete-Button – volle Breite] ... [Pin] [Dots]
    */
    body.project-page .td-header {
        min-height: calc(56px + var(--safe-top));
        height: calc(56px + var(--safe-top));
        padding: 0 6px;
        padding-top: var(--safe-top);
        background: #fff;
        border-bottom: none;
        position: sticky;
        top: 0;
        z-index: 200;
        display: flex;
        align-items: center;
        gap: 2px;
    }

    body.project-page .td-header-left  { display: contents; }
    body.project-page .td-header-right { display: contents; }

    body.project-page .td-close-btn  { order: 1; flex-shrink: 0; width: 40px; height: 40px; }
    body.project-page .td-close-btn svg { width: 20px; height: 20px; }
    body.project-page .td-header-open,
    body.project-page .td-header-completed,
    body.project-page .td-header-archived,
    body.project-page .td-header-deleted { order: 2; flex: 1; min-width: 0; }
    body.project-page .td-pin-wrap   { order: 3; flex-shrink: 0; }
    body.project-page #taskTtHeaderBtn { order: 4; flex-shrink: 0; }
    body.project-page .td-dots-wrap  { order: 5; flex-shrink: 0; }

    /* Header-Open: voller Desktop-Button (Haken + Label), aber kein Assignee-Trigger */
    body.project-page .td-header-open {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body.project-page .td-header-open > div[style*="width:30px"] { display: none; }
    /* Trigger-Container bleibt im DOM (damit das fixed Popover darin funktioniert),
       nur die sichtbaren Kinder (Avatar + Info) werden ausgeblendet */
    body.project-page .td-header-open .td-assignee-trigger {
        width: 0;
        height: 0;
        padding: 0;
        overflow: visible;
    }
    body.project-page .td-header-open .td-assignee-avatar,
    body.project-page .td-header-open .td-assignee-info { display: none; }

    body.project-page .td-complete-btn {
        height: 40px;
        padding: 0 14px;
        font-size: 14px;
        border-radius: 10px;
    }
    body.project-page #taskCompleteBtn span {
        display: inline;
    }

    /* Header-Completed */
    body.project-page .td-header-completed {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 6px;
        overflow: hidden;
    }
    body.project-page .td-archive-btn {
        font-size: 13px;
        padding: 6px 12px;
        border-radius: 8px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    body.project-page .td-completed-info { overflow: hidden; }
    body.project-page .td-completed-check { width: 22px; height: 22px; flex-shrink: 0; }
    body.project-page .td-completed-label,
    body.project-page .td-completed-date {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Header-Archived / Deleted */
    body.project-page .td-header-archived,
    body.project-page .td-header-deleted {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 6px;
        overflow: hidden;
    }
    body.project-page .td-archived-icon { width: 26px; height: 26px; flex-shrink: 0; }

    /* ---- COLUMN BAR (Spalten-Auswahl) ----
       Antippbar → öffnet Column-Picker-Sheet
    */
    body.project-page .td-mobile-col-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 16px;
        height: 48px;
        flex-shrink: 0;
        color: #fff;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .td-mobile-col-bar:active { opacity: 0.85; }
    .td-mcb-icon { display: flex; align-items: center; flex-shrink: 0; }
    .td-mcb-icon svg { width: 20px; height: 20px; }
    .td-mcb-name {
        font-size: 16px;
        font-weight: 600;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .td-mcb-count {
        font-size: 14px;
        font-weight: 500;
        opacity: 0.85;
        flex-shrink: 0;
    }
    .td-mcb-chevron {
        opacity: 0.7;
        flex-shrink: 0;
        margin-left: 2px;
    }

    /* ---- ASSIGNEE ROW ---- */
    body.project-page .td-mobile-assignee-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        background: transparent;
        margin: 0;
        border-radius: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .td-mobile-assignee-row:active { background: rgba(0,0,0,0.03); }
    .td-mar-avatar { flex-shrink: 0; }
    .td-mar-info { flex: 1; min-width: 0; }
    .td-mar-label {
        font-size: 11px;
        color: rgb(138, 148, 153);
        font-weight: 500;
        margin-bottom: 1px;
    }
    .td-mar-name {
        font-size: 15px;
        font-weight: 500;
        color: rgb(61, 71, 77);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ---- BODY: single-column ---- */
    body.project-page .td-body {
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: rgb(242, 244, 246);
        flex: 1;
    }
    body.project-page .td-main {
        width: 100%;
        overflow-y: visible;
        padding: 12px 0 0;
    }
    body.project-page .td-main > * { flex-shrink: 0; }

    /* ---- Titel + Beschreibung ---- */
    body.project-page .td-title-wrap {
        background: #fff;
        border-radius: 14px 14px 0 0;
        margin: 4px 12px 0;
        padding: 0;
        border-bottom: 1px solid rgb(240, 242, 244);
    }
    body.project-page .td-title {
        padding: 16px 16px 12px;
        font-size: 20px;
        font-weight: 500;
        border-color: transparent !important;
        background: transparent !important;
        border-radius: 0;
    }
    body.project-page .td-desc-wrap {
        background: #fff;
        border-radius: 0 0 14px 14px;
        margin: 0 12px 12px;
        padding: 0;
    }
    body.project-page .td-description {
        padding: 12px 16px 14px;
        border-color: transparent !important;
        background: transparent !important;
        font-size: 16px;
        line-height: 1.5;
    }
    body.project-page .td-desc-hint {
        padding: 0 16px 10px;
        font-size: 11px;
    }

    /* ---- Section Labels ---- */
    body.project-page .td-section {
        padding: 0 12px;
        margin-bottom: 0;
    }
    body.project-page .td-section-title {
        height: 36px;
        margin-top: 14px;
        padding: 0 4px;
    }
    body.project-page .td-section-title-text {
        font-size: 12px;
        font-weight: 700;
        color: rgb(138, 148, 153);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    body.project-page .td-dots-icon { display: none; }

    /* ---- Mobile Tab Bar ---- */
    body.project-page .td-mobile-tabs {
        display: flex;
        background: #fff;
        border-radius: 14px;
        margin: 12px 12px 0;
        padding: 4px;
        gap: 2px;
    }
    body.project-page .td-mobile-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px;
        border: none;
        background: transparent;
        border-radius: 10px;
        font-size: 11px;
        font-weight: 500;
        color: rgb(138, 148, 153);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s, color 0.15s;
    }
    body.project-page .td-mobile-tab svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    body.project-page .td-mobile-tab.active {
        background: var(--mt-blue);
        color: #fff;
    }
    body.project-page .td-mobile-tab:active:not(.active) {
        background: rgb(240, 242, 244);
    }

    /* ---- Tab Content Switching ---- */
    body.project-page .td-tab-content {
        display: none !important;
    }
    body.project-page .td-tab-content.td-tab-active {
        display: block !important;
    }

    /* ---- Hide desktop activity dropdown/title on mobile (tabs replace it) ---- */
    body.project-page .td-activity-section .td-section-title {
        display: none;
    }
    /* History mobile section */
    body.project-page .td-history-section {
        display: none !important;
        padding: 0 12px;
    }
    body.project-page .td-history-section.td-tab-active {
        display: block !important;
    }
    body.project-page .td-history-section .td-history-feed {
        background: #fff;
        border-radius: 14px;
        padding: 0 16px 16px;
        margin-top: 12px;
    }

    /* ---- Add-Row (blaue Links) → weiße Karte ---- */
    body.project-page .td-add-row {
        background: #fff;
        border-radius: 14px;
        height: 52px;
        padding: 0 16px;
        margin-bottom: 8px;
    }

    /* ---- Checkliste + Anhänge: kein Hover-Hintergrund auf Mobile ---- */
    body.project-page .cl-header:hover,
    body.project-page .ag-header:hover { background: transparent; }

    /* ---- Checklisten ---- */
    body.project-page .td-checklist-section {
        margin-top: 12px;  /* Abstand zum Beschreibungsbereich */
    }
    body.project-page .td-checklist-section .cl-block {
        background: #fff;
        border-radius: 14px;
        margin-bottom: 8px;
        overflow: hidden;
    }
    /* Header: einheitlich wie ag-header */
    body.project-page .td-checklist-section .cl-header {
        padding: 14px 16px 10px;
    }
    /* Body: kein Desktop-Indent, Items flush */
    body.project-page .td-checklist-section .cl-body {
        padding-left: 0;
    }
    body.project-page .td-checklist-section .cl-item {
        padding: 10px 16px;
        border-top: 1px solid rgb(240, 242, 244);
    }
    body.project-page .td-checklist-section .cl-item-drag {
        display: flex;
    }
    body.project-page .td-checklist-section .cl-item-delete {
        display: none;
    }
    /* "Eintrag hinzufügen"-Link */
    body.project-page .td-checklist-section .cl-add-item-row {
        padding: 0 16px;
        border-top: 1px solid rgb(240, 242, 244);
    }
    body.project-page .td-checklist-section .cl-add-item {
        padding: 12px 0;
    }
    body.project-page .td-checklist-section .cl-add-dots {
        opacity: 1;
    }
    /* Neue-Eingabe-Zeile */
    body.project-page .td-checklist-section .cl-new-item-row {
        padding: 10px 16px;
        border-top: 1px solid rgb(240, 242, 244);
    }

    /* ---- Anhänge ---- */
    body.project-page .td-attachments-section {
        margin-top: 12px;  /* Abstand zum Checklisten-Bereich bzw. Beschreibung */
    }
    body.project-page .td-attachments-section .td-add-row { margin-bottom: 0; }
    body.project-page #attachmentsContainer:not(:empty) {
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 0;
    }
    /* ag-header: einheitliches Padding */
    body.project-page .td-attachments-section .ag-header {
        padding: 14px 16px 10px;
    }
    /* ag-body: kein Desktop-Indent */
    body.project-page .td-attachments-section .ag-body {
        padding-left: 0;
    }
    body.project-page .td-attachments-section .td-attachment-grid {
        padding-left: 16px;
    }
    body.project-page .td-attachments-section .ag-add-row {
        padding: 0 16px;
        border-top: 1px solid rgb(240, 242, 244);
    }
    body.project-page .td-attachments-section .ag-add-attachment {
        padding: 12px 0;
    }
    body.project-page .td-attachments-section .ag-add-dots {
        opacity: 1;
    }

    /* ---- Kommentare / Aktivität ---- */
    body.project-page .td-activity-section { margin-top: 12px; }
    body.project-page .td-comment-input {
        padding: 8px 16px;
        margin-bottom: 0;
        background: #fff;
        border-radius: 14px 14px 0 0;
    }
    body.project-page .td-comment-textarea {
        border-radius: 10px;
        font-size: 14px;
        min-height: 48px;
        cursor: pointer;
    }
    body.project-page .td-comment-toolbar {
        display: none;
    }
    body.project-page .td-emoji-btn {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    body.project-page .td-emoji-btn svg {
        width: 24px;
        height: 24px;
    }
    body.project-page .td-send-btn {
        width: 40px;
        height: 40px;
    }
    body.project-page .td-send-btn svg {
        width: 30px;
        height: 30px;
    }
    body.project-page .td-activity-feed {
        padding: 0 16px 16px;
        background: #fff;
        border-radius: 0 0 14px 14px;
    }
    /* On mobile: always show comments panel, always hide history panel (separate section) */
    body.project-page #panelComments { display: block !important; }
    body.project-page #panelHistory { display: none !important; }

    /* ---- SIDEBAR → fullwidth property rows ---- */
    body.project-page .td-sidebar {
        width: 100%;
        border-left: none;
        border-radius: 0;
        background: transparent;
        padding: 0 12px;
        margin-top: 12px;   /* Abstand zum Kommentarbereich */
        flex-shrink: 0;
    }
    body.project-page .td-sidebar::before { display: none; }

    /* Wrapper: gibt den 4 Rows eine gemeinsame weiße Karte mit Rundungen */
    body.project-page .td-sb-group {
        background: #fff;
        border-radius: 14px;
        overflow: hidden;     /* Kinder werden sauber abgerundet geclippt */
    }

    /* Einzelne Rows: kein eigenes Hintergrund/Radius (kommt vom Wrapper) */
    body.project-page .td-sb-row {
        background: transparent;
        padding: 0 16px;
        box-shadow: none;
        border-radius: 0;
        border-bottom: none;
        min-height: 58px;
        align-items: center;
        flex-wrap: wrap;
        position: relative;
    }
    /* Trennlinie eingerückt (beginnt nach Icon-Bereich) */
    body.project-page .td-sb-row::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50px;   /* 16px padding + 24px icon + 10px gap */
        right: 16px;
        height: 1px;
        background: rgb(235, 238, 240);
    }
    /* Hide separator on the very last row in the group (watchers) */
    body.project-page .td-sb-group > .td-sb-row:last-child::after {
        display: none;
    }

    /* ---- Unified sidebar row layout (mobile) ----
       Icon (left) | Label | Value (right-aligned) | Chevron >
    */
    body.project-page .td-sidebar .td-sb-row-content {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 58px;
        width: 100%;
        flex: 1;
        min-width: 0;
    }
    /* Icons: default grau, dunkel wenn has-row-value */
    body.project-page .td-sb-row .td-sb-icon {
        color: rgb(190, 195, 200);
        width: 26px;
        height: 26px;
    }
    body.project-page .td-sb-row.has-row-value .td-sb-icon {
        color: rgb(50, 55, 60);
    }
    /* Labels: default grau, dunkel wenn has-row-value */
    body.project-page .td-sb-row .td-sb-label {
        flex: 0 0 auto;
        font-weight: 500;
        font-size: 16px;
        color: rgb(190, 195, 200);
    }
    body.project-page .td-sb-row.has-row-value .td-sb-label {
        font-weight: 600;
        color: rgb(30, 35, 40);
    }
    body.project-page .td-sb-row .td-sb-value {
        display: inline-flex;
        flex: 1;
        min-width: 0;
        text-align: right;
        justify-content: flex-end;
        align-items: center;
        font-size: 15px;
        color: rgb(138, 148, 153);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    body.project-page .td-sb-row .td-sb-value:empty { display: none; }
    body.project-page .td-sb-row .td-sb-value:not(:empty) ~ .td-chevron {
        margin-left: 6px;
    }
    /* Value with colored text (due date set) */
    body.project-page .td-sb-value.has-value {
        color: rgb(230, 155, 0);
        font-weight: 600;
        font-size: 15px;
    }

    /* Chevron: nach rechts zeigend (>) statt nach unten (v), immer ganz rechts */
    body.project-page .td-sb-row .td-chevron {
        flex-shrink: 0;
        color: rgb(190, 195, 200);
        width: 18px;
        height: 18px;
        margin-left: auto;
        transform: rotate(-90deg);
    }

    /* Timer row: override desktop padding, hide play button, show icon + label + time */
    body.project-page .td-sb-timer {
        padding: 0 16px !important;
        gap: 0;
    }
    body.project-page .td-sb-timer .td-sb-row-content {
        padding: 0 !important;
        align-items: center;
        gap: 10px;
    }
    body.project-page .td-sb-timer .td-chevron {
        margin-right: 0 !important;
        margin-left: auto !important;
    }
    body.project-page .td-sb-timer .td-sb-timer-play { display: none !important; }
    body.project-page .td-sb-timer .td-sb-tt-icon {
        display: inline-flex !important;
        flex-shrink: 0;
    }
    body.project-page .td-sb-timer .td-sb-tt-label {
        display: inline !important;
        flex: 0 0 auto;
    }
    body.project-page .td-sb-timer .td-sb-timer-display {
        flex: 1;
        text-align: right;
        font-size: 15px;
        color: rgb(138, 148, 153);
    }

    /* Fälligkeit: override desktop flex:1 on label */
    body.project-page .td-sb-row-due > .td-sb-row-content > .td-sb-label {
        flex: 0 0 auto !important;
    }

    /* Tags & Watchers: reset desktop column layout, hide below-row containers */
    body.project-page .td-sb-row-tags,
    body.project-page .td-sb-row-watchers {
        flex-direction: row !important;
        align-items: center !important;
        padding: 0 16px !important;
    }
    body.project-page .td-sb-row-tags > .td-sb-row-content,
    body.project-page .td-sb-row-watchers > .td-sb-row-content {
        padding: 0 !important;
        width: 100%;
    }
    body.project-page .watcher-avatars { display: none !important; }

    /* Inline tag pills in value slot */
    body.project-page .td-sb-value .td-sb-inline-pills {
        display: inline-flex;
        gap: 6px;
        align-items: center;
        justify-content: flex-end;
        overflow: hidden;
    }
    body.project-page .td-sb-value .td-sb-inline-pill {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 22px;
    }
    body.project-page .td-sb-value .td-sb-inline-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 30px;
        border-radius: 50%;
        background: rgb(108, 117, 125);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        flex-shrink: 0;
    }

    /* Inline watcher avatars in value slot */
    body.project-page .td-sb-value .td-sb-inline-avatars {
        display: inline-flex;
        gap: 0;
        align-items: center;
        justify-content: flex-end;
    }
    body.project-page .td-sb-value .td-sb-inline-avatars .wa-avatar {
        width: 34px;
        height: 34px;
        border-radius: 100%;
        overflow: hidden;
        margin-left: -8px;
        border: 2px solid #fff;
        flex-shrink: 0;
    }
    body.project-page .td-sb-value .td-sb-inline-avatars .wa-avatar:first-child {
        margin-left: 0;
    }

    /* Meta-Info */
    body.project-page .td-sb-meta {
        background: transparent;
        padding: 14px 4px 100px;
    }
    body.project-page .td-sb-meta-project,
    body.project-page .td-sb-meta-info { font-size: 12px; color: rgb(138, 148, 153); }
    body.project-page .td-sb-meta-row { margin-top: 8px; }
    body.project-page .td-meta-info-label,
    body.project-page .td-meta-info-value { font-size: 12px; }

    /* ─── Mobile Task Bottom Bar ─────────────────────────── */
    .td-mobile-bottom-bar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* Etwas mehr Abstand zum unteren Bildschirmrand (vor allem iOS) */
        height: calc(60px + var(--safe-bottom) + 8px);
        padding: 0 12px;
        padding-bottom: calc(var(--safe-bottom) + 8px);
        background: #fff;
        border-top: 1px solid var(--mt-border);
        align-items: center;
        justify-content: space-between;
        z-index: 101;
    }

    .td-mbb-btn {
        width: 44px;
        height: 44px;
        border: none;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--mt-text);
        cursor: pointer;
        border-radius: 10px;
        -webkit-tap-highlight-color: transparent;
    }

    .td-mbb-btn:active {
        background: rgba(0, 0, 0, 0.06);
    }

    .td-mbb-complete-btn {
        flex: 1;
        max-width: 280px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1.5px solid var(--mt-border);
        border-radius: 10px;
        background: #fff;
        font-size: 15px;
        font-weight: 600;
        color: var(--mt-text);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        margin: 0 8px;
    }

    .td-mbb-complete-btn:active {
        background: rgba(0, 0, 0, 0.04);
    }

    /* Im "completed"-Zustand bleibt der Button optisch unverändert
       (Label wechselt zu "Archivieren", Farben/Border identisch zum offenen Zustand) */
    .td-mbb-complete-btn.completed {
        background: #fff;
        border-color: var(--mt-border);
        color: var(--mt-text);
    }

    /* Adjust task body to not be hidden behind bottom bar */
    body.project-page #taskModal .td-body {
        padding-bottom: calc(60px + var(--safe-bottom) + 24px);
    }

    /* Hide desktop header complete/dots/pin buttons on mobile (we have bottom bar) */
    body.project-page .td-complete-wrap {
        display: none;
    }
    body.project-page .td-dots-wrap {
        display: none;
    }
    body.project-page .td-pin-wrap {
        display: flex;
    }

    /* ─── Mobile Task Action Sheet ───────────────────────── */
    .td-action-sheet {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #fff;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
        padding-bottom: max(var(--safe-bottom), 16px);
        transform: translateY(100%);
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .td-action-sheet.show {
        transform: translateY(0);
        pointer-events: auto;
    }

    .td-action-sheet::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0.15);
        margin: 10px auto 6px;
    }

    .td-action-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px 12px;
        font-size: 16px;
        font-weight: 600;
        color: var(--mt-text);
    }

    .td-action-sheet-close {
        border: none;
        background: none;
        color: var(--mt-blue);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        padding: 4px 8px;
    }

    .td-action-sheet-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 20px;
        width: 100%;
        border: none;
        background: none;
        text-align: left;
        font-family: inherit;
        font-size: 16px;
        color: var(--mt-text);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .td-action-sheet-item:active {
        background: rgb(245, 246, 248);
    }

    .td-action-sheet-item svg {
        color: var(--mt-muted);
        flex-shrink: 0;
    }

    .td-action-sheet-item-restore {
        color: var(--mt-blue);
    }

    .td-action-sheet-item-restore svg {
        color: var(--mt-blue);
    }

    /* ============================================================
       iOS-STYLE BOTTOM SHEETS (alle Popovers mobil)
       Einheitliche Slide-up-Animation wie Mobile-Menü-Sheet.
       ============================================================ */

    /* Sheet-Backdrop: Opacity-Transition statt display-Toggle */
    body.project-page .mobile-sheet-backdrop,
    body.mytasks-page .mobile-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        -webkit-tap-highlight-color: transparent;
    }

    body.project-page .mobile-sheet-backdrop.show,
    body.mytasks-page .mobile-sheet-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }

    /* ---- Full-page slide-from-right panels (mobile) ---- */
    body.project-page .tt-popover,
    body.project-page .cal-popover,
    body.project-page .tag-popover,
    body.project-page .watcher-popover,
    body.project-page .assignee-popover,
    body.project-page .attach-popover,
    body.project-page .tb-popover {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 9999;
        box-shadow: none;
        background: rgb(242, 244, 246) !important;
        transform: translateX(100%);
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0 !important;
        padding-bottom: var(--safe-bottom) !important;
    }

    body.project-page .tt-popover.show,
    body.project-page .cal-popover.open,
    body.project-page .tag-popover.open,
    body.project-page .watcher-popover.open,
    body.project-page .assignee-popover.open,
    body.project-page .attach-popover.open,
    body.project-page .tb-popover.show {
        transform: translateX(0);
        pointer-events: auto;
    }

    /* Remove old grab handle */
    body.project-page .tt-popover::before,
    body.project-page .cal-popover::before,
    body.project-page .tag-popover::before,
    body.project-page .watcher-popover::before,
    body.project-page .assignee-popover::before,
    body.project-page .attach-popover::before,
    body.project-page .tb-popover::before {
        display: none !important;
    }

    /* iOS-style navigation bar for full-page panels */
    .fp-nav {
        display: flex;
        align-items: center;
        height: 56px;
        padding: 0 16px;
        padding-top: var(--safe-top);
        background: rgb(242, 244, 246);
        border-bottom: 1px solid rgb(225, 228, 230);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 2;
    }
    .fp-nav-back {
        display: flex;
        align-items: center;
        gap: 4px;
        background: none;
        border: none;
        color: var(--mt-blue);
        font-size: 16px;
        font-weight: 400;
        padding: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }
    .fp-nav-back svg { flex-shrink: 0; }
    .fp-nav-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 17px;
        font-weight: 600;
        color: rgb(38, 38, 38);
        white-space: nowrap;
    }
    .fp-nav-action {
        margin-left: auto;
        background: none;
        border: none;
        color: var(--mt-blue);
        font-size: 16px;
        font-weight: 400;
        padding: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }

    /* Panel content area */
    .fp-content {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px;
    }
    .fp-card {
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
    }
    .fp-card-row {
        display: flex;
        align-items: center;
        padding: 14px 16px;
        gap: 12px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .fp-card-row:not(:last-child) {
        border-bottom: 1px solid rgb(240, 242, 244);
    }
    .fp-card-row:active { background: rgb(245, 246, 248); }
    .fp-card-row-name {
        flex: 1;
        font-size: 16px;
        font-weight: 400;
        color: rgb(38, 38, 38);
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fp-card-row-check {
        flex-shrink: 0;
        color: var(--mt-blue);
    }

    /* Hide old close buttons / headers in full-page mode */
    body.project-page .assignee-popover .ap-header,
    body.project-page .tag-popover .tag-popover-header,
    body.project-page .watcher-popover .wp-header,
    body.project-page .cal-popover .cal-header,
    body.project-page .tt-popover .tt-popover-header,
    body.project-page .attach-popover .attach-popover-header,
    body.project-page .tb-popover .tb-popover-header {
        display: none !important;
    }

    /* ---- Unified search bars in full-page panels ---- */
    body.project-page .assignee-popover .ap-search,
    body.project-page .tag-popover .tag-popover-search,
    body.project-page .watcher-popover .wp-search {
        display: flex;
        align-items: center;
        margin: 16px 16px 0;
        padding: 0 12px;
        height: 44px;
        border: none;
        border-radius: 10px;
        background: #fff;
        position: relative;
    }
    body.project-page .assignee-popover .ap-search-input,
    body.project-page .watcher-popover .wp-search-input {
        font-size: 16px;
        height: 42px;
    }
    /* Tag search: reset absolute icon positioning to inline flex */
    body.project-page .tag-popover .tag-popover-search-icon {
        position: static;
        transform: none;
        margin: 0;
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        color: rgb(138, 148, 153);
    }
    body.project-page .tag-popover .tag-popover-search-input {
        border: none;
        border-radius: 0;
        padding: 0 10px;
        font-size: 16px;
        height: 42px;
        background: transparent;
        width: auto;
        flex: 1;
    }
    body.project-page .tag-popover .tag-popover-search-input:focus {
        border-color: transparent;
    }

    /* ---- Unified list cards in full-page panels ---- */
    body.project-page .assignee-popover .ap-list,
    body.project-page .tag-popover .tag-popover-list,
    body.project-page .watcher-popover .wp-list {
        margin: 12px 16px;
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
        max-height: none !important;
    }
    body.project-page .tag-popover .tag-popover-create {
        margin: 0 16px 16px;
    }
    /* Tag items: consistent row style */
    body.project-page .tag-popover .tag-popover-item {
        padding: 12px 16px;
        border-radius: 0;
    }
    body.project-page .tag-popover .tag-popover-item:not(:last-child) {
        border-bottom: 1px solid rgb(240, 242, 244);
    }
    body.project-page .tag-popover .tag-popover-item:hover {
        background: transparent;
    }

    /* ---- Cal popover: content in white card ---- */
    /* ---- Cal popover: white card wrapping content ---- */
    body.project-page .cal-popover .cal-nav {
        background: #fff;
        margin: 16px 16px 0;
        border-radius: 14px 14px 0 0;
        padding: 12px 12px 0;
    }
    body.project-page .cal-popover .cal-weekdays {
        background: #fff;
        margin: 0 16px;
        padding: 8px 12px 0;
    }
    body.project-page .cal-popover .cal-grid {
        background: #fff;
        margin: 0 16px;
        padding: 0 12px;
    }
    body.project-page .cal-popover .cal-time-row {
        background: #fff;
        margin: 0 16px;
        padding: 12px;
    }
    body.project-page .cal-popover .cal-footer {
        background: #fff;
        margin: 0 16px 16px;
        border-radius: 0 0 14px 14px;
        padding: 8px 12px 12px;
    }

    /* ---- TT popover: content in white card ---- */
    body.project-page .tt-popover .tt-popover-body {
        margin: 16px;
        padding: 16px;
        background: #fff;
        border-radius: 14px;
    }

    /* ---- TB popover: content in white card ---- */
    body.project-page .tb-popover .tb-popover-body {
        margin: 16px;
        padding: 16px;
        background: #fff;
        border-radius: 14px;
    }

    /* ---- Attach popover: content in white card ---- */
    body.project-page .attach-popover .attach-popover-link-row {
        margin: 16px 16px 0;
    }
    body.project-page .attach-popover .attach-popover-link-input {
        border-radius: 10px;
        font-size: 16px;
    }
    body.project-page .attach-popover .attach-popover-options {
        margin: 12px 16px;
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
    }

    /* Emoji picker stays as bottom-sheet */
    body.project-page .emoji-picker {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0;
        max-height: 55vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 9999;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
        transform: translateY(100%);
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding-bottom: var(--safe-bottom);
    }
    body.project-page .emoji-picker.open {
        transform: translateY(0);
        pointer-events: auto;
    }
    body.project-page .emoji-picker::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0.15);
        margin: 10px auto 6px;
        flex-shrink: 0;
    }

    /* ---- Column-Picker Sheet ---- */
    body.project-page .td-col-picker-sheet {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #fff;
        border-radius: 20px 20px 0 0;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
        padding-bottom: max(var(--safe-bottom), 16px);
        transform: translateY(100%);
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body.project-page .td-col-picker-sheet.show {
        transform: translateY(0);
        pointer-events: auto;
    }

    .td-col-picker-sheet::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0.15);
        margin: 10px auto 6px;
    }
    .td-cps-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px 12px;
        font-size: 16px;
        font-weight: 600;
        color: rgb(61, 71, 77);
    }
    .td-cps-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 20px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        font-family: inherit;
    }
    .td-cps-item:active { background: rgb(245, 246, 248); }
    .td-cps-item.active { background: rgb(240, 248, 255); }
    .td-cps-color {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
    .td-cps-color svg { width: 18px; height: 18px; }
    .td-cps-name {
        font-size: 16px;
        font-weight: 500;
        color: rgb(61, 71, 77);
        flex: 1;
    }
    .td-cps-check {
        color: var(--mt-blue);
        flex-shrink: 0;
    }
    .td-cps-check svg { width: 22px; height: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════
   AI CHAT
   ═══════════════════════════════════════════════════════════════════ */

.ai-layout {
    display: flex;
    height: calc(100vh - 65px);
    height: calc(100dvh - 65px);
    margin-left: var(--sidebar-width);
    margin-top: 65px;
    overflow: hidden;
}

/* ─── Left: Conversation Sidebar ──────────────────────────────────── */

.ai-sidebar {
    width: 270px;
    min-width: 270px;
    background: #fff;
    border-right: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 12px;
    flex-shrink: 0;
}

.ai-sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--mt-text);
    letter-spacing: -0.01em;
    margin: 0;
}

.ai-new-chat-btn {
    height: 34px;
    padding: 0 14px;
    border: none;
    background: var(--mt-blue);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    gap: 6px;
    transition: background 0.15s;
}
.ai-new-chat-btn:hover { background: rgb(0, 150, 230); }

.ai-teams-sidebar-row {
    padding: 0 20px 12px;
    flex-shrink: 0;
}
.ai-teams-sidebar-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(98, 100, 167, 0.08) 0%, rgba(70, 78, 184, 0.05) 100%);
    color: #262a2e;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-teams-sidebar-btn:hover {
    border-color: rgba(70, 78, 184, 0.45);
    box-shadow: 0 1px 4px rgba(70, 78, 184, 0.12);
}
.ai-teams-sidebar-btn-active {
    border-color: var(--mt-blue);
    box-shadow: 0 0 0 1px var(--mt-blue);
}
.ai-teams-sidebar-label { flex: 1; text-align: left; }
.ai-teams-sidebar-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--mt-muted);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.ai-teams-readonly-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    margin: 0 16px 16px;
    background: var(--mt-bg-secondary, #f0f4f8);
    border: 1px solid var(--mt-border, #d0d7de);
    border-radius: 8px;
    color: var(--mt-muted, #6b7280);
    font-size: 13px;
    line-height: 1.4;
}

.ai-sidebar-search {
    padding: 4px 20px 16px;
    position: relative;
    flex-shrink: 0;
}

.ai-search-icon {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--mt-muted);
}

.ai-search-input {
    width: 100%;
    height: 38px;
    border: 1px solid var(--mt-border);
    border-radius: 50rem;
    padding: 0 12px 0 36px;
    font-size: 13px;
    color: var(--mt-text);
    background: var(--mt-bg);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-search-input:focus {
    border-color: var(--mt-blue);
    box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.1);
}

.ai-conversations-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px;
}

.ai-conv-item {
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 2px;
    position: relative;
}
.ai-conv-item:hover { background: rgba(0, 0, 0, 0.04); }
.ai-conv-item.ai-conv-active {
    background: rgba(0, 170, 255, 0.08);
}

.ai-conv-title {
    font-size: 13.5px;
    font-weight: 500;
    color: #262a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-conv-active .ai-conv-title { color: var(--mt-blue); font-weight: 600; }

.ai-conv-meta {
    font-size: 11px;
    color: var(--mt-muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-conv-provider {
    text-transform: capitalize;
    font-weight: 500;
}

.ai-conv-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--mt-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* ─── Right: Chat Main ────────────────────────────────────────────── */

.ai-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    overflow: hidden;
    min-width: 0;
}

/* Empty state */
.ai-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--mt-muted);
    gap: 16px;
    padding: 40px 24px;
}
.ai-empty-icon {
    opacity: 0.3;
    width: 64px;
    height: 64px;
}
.ai-empty-icon svg { width: 100%; height: 100%; }
.ai-empty-title {
    font-size: 20px;
    font-weight: 700;
    color: #262a2e;
    letter-spacing: -0.01em;
}
.ai-empty-desc {
    font-size: 14px;
    max-width: 360px;
    text-align: center;
    line-height: 1.65;
    color: var(--mt-muted);
}

/* Chat container */
.ai-chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Chat header */
.ai-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid var(--mt-border);
    flex-shrink: 0;
}

.ai-mobile-back-btn {
    display: none;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--mt-text);
    cursor: pointer;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
}
.ai-mobile-back-btn:hover { background: var(--mt-bg); }

.ai-model-selector { flex: 1; }

.ai-model-select {
    height: 38px;
    border: 1px solid var(--mt-border);
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: #262a2e;
    background: #fff;
    outline: none;
    min-width: 200px;
    max-width: 350px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.ai-model-select:focus { border-color: var(--mt-blue); }

.ai-chat-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.ai-action-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    color: var(--mt-muted);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.ai-action-btn:hover { background: rgba(0, 0, 0, 0.05); color: #262a2e; }
.ai-action-btn-danger:hover { color: #ff0000; background: rgba(255, 0, 0, 0.06); }

/* Messages */
.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px 0;
    scroll-behavior: smooth;
}

.ai-message {
    display: flex;
    gap: 14px;
    padding: 14px 32px;
    max-width: 880px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.ai-msg-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.ai-avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.ai-avatar-user {
    background: var(--mt-blue);
    color: #fff;
}

.ai-avatar-ai {
    background: #262a2e;
    color: #fff;
}

.ai-msg-body {
    flex: 1;
    min-width: 0;
}

.ai-msg-role {
    font-size: 13px;
    font-weight: 600;
    color: #262a2e;
    margin-bottom: 6px;
    text-transform: capitalize;
}

.ai-msg-content {
    font-size: 14px;
    line-height: 1.7;
    color: #262a2e;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ai-msg-content p { margin: 0 0 10px; }
.ai-msg-content p:last-child { margin-bottom: 0; }

.ai-msg-content pre {
    background: #1e2128;
    border-radius: 10px;
    padding: 16px 18px;
    overflow-x: auto;
    margin: 10px 0;
    font-size: 13px;
    line-height: 1.55;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-msg-content pre code {
    background: none;
    padding: 0;
    color: #e6edf3;
    font-family: 'SF Mono', 'Menlo', 'Monaco', Consolas, monospace;
    font-size: 13px;
}

.ai-msg-content code {
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 12.5px;
    font-family: 'SF Mono', 'Menlo', 'Monaco', Consolas, monospace;
}

.ai-msg-content ul, .ai-msg-content ol {
    margin: 8px 0;
    padding-left: 22px;
}

.ai-msg-content li { margin-bottom: 5px; }

.ai-msg-content blockquote {
    border-left: 3px solid var(--mt-blue);
    padding: 8px 14px;
    margin: 10px 0;
    color: var(--mt-muted);
    background: rgba(0, 170, 255, 0.04);
    border-radius: 0 8px 8px 0;
}

.ai-msg-content table {
    border-collapse: collapse;
    margin: 10px 0;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}
.ai-msg-content th, .ai-msg-content td {
    border: 1px solid var(--mt-border);
    padding: 8px 12px;
    text-align: left;
    font-size: 13px;
}
.ai-msg-content th { background: rgba(0, 0, 0, 0.03); font-weight: 600; }

.ai-msg-image { margin-top: 10px; position: relative; display: inline-block; }
.ai-msg-image img {
    max-width: 100%;
    max-height: 500px;
    border-radius: 12px;
    border: 1px solid var(--mt-border);
    cursor: pointer;
    transition: opacity 0.15s;
}
.ai-msg-image img:hover { opacity: 0.9; }
.ai-msg-image .ai-img-download {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1;
}
.ai-msg-image:hover .ai-img-download { opacity: 1; }
.ai-msg-image .ai-img-download:hover { background: rgba(0,0,0,0.8); }

.ai-msg-video { margin-top: 8px; position: relative; display: inline-block; max-width: 100%; }
.ai-msg-video video {
    max-width: 100%;
    max-height: 500px;
    border-radius: 8px;
    border: 1px solid var(--mt-border);
    background: #000;
    display: block;
}

/* Download-Button (Desktop: fade-in bei Hover, Mobile: immer sichtbar) */
.ai-msg-video .ai-video-download {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}
.ai-msg-video:hover .ai-video-download { opacity: 1; }
.ai-msg-video .ai-video-download:hover { background: rgba(0,0,0,0.8); }
@media (hover: none), (max-width: 768px) {
    /* Touch-Geräte / Mobile: Button dauerhaft sichtbar */
    .ai-msg-video .ai-video-download { opacity: 1; }
}

.ai-video-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 36px 28px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--mt-border);
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.ai-video-progress-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--mt-border);
    border-top-color: var(--mt-blue);
    border-radius: 50%;
    animation: ai-spin 1s linear infinite;
}
@keyframes ai-spin {
    to { transform: rotate(360deg); }
}
.ai-video-progress-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--mt-text);
}
.ai-video-progress-hint {
    font-size: 12px;
    color: var(--mt-muted);
}
.ai-video-progress-timer {
    font-size: 20px;
    font-weight: 700;
    color: var(--mt-blue);
    font-variant-numeric: tabular-nums;
}

/* Video generation options bar */
.ai-video-options {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    padding: 10px 14px;
    background: var(--mt-bg);
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    margin-bottom: 6px;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.ai-video-opt-group { display: flex; align-items: center; gap: 8px; }
.ai-video-opt-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mt-muted);
    white-space: nowrap;
    min-width: fit-content;
}
.ai-video-opt-pills { display: flex; gap: 4px; }
.ai-opt-pill {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    background: transparent;
    color: var(--mt-text);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.3;
}
.ai-opt-pill:hover { border-color: var(--mt-blue); color: var(--mt-blue); }
.ai-opt-pill.active {
    background: var(--mt-blue);
    color: #fff;
    border-color: var(--mt-blue);
}
.ai-opt-pill.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.ai-msg-cost {
    font-size: 11px;
    color: var(--mt-muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.7;
}
.ai-msg-cost:hover { opacity: 1; }
.ai-header-cost {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mt-muted);
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--mt-border);
    border-radius: 50rem;
    padding: 5px 12px;
    white-space: nowrap;
    cursor: default;
    margin-left: auto;
    margin-right: 8px;
}

/* Typing indicator */
.ai-typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 0;
}
.ai-typing-indicator::before,
.ai-typing-indicator::after,
.ai-typing-indicator {
    content: '';
}
@keyframes aiTypingDot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}
.ai-typing-indicator::before,
.ai-typing-indicator::after {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mt-muted);
    display: inline-block;
    animation: aiTypingDot 1.5s infinite;
}
.ai-typing-indicator::before { animation-delay: 0s; }
.ai-typing-indicator::after { animation-delay: 0.3s; }

/* Input area */
.ai-input-area {
    padding: 16px 32px 20px;
    background: #fff;
    border-top: 1px solid var(--mt-border);
    flex-shrink: 0;
}

.ai-attachment-preview {
    display: flex;
    gap: 8px;
    max-width: 840px;
    margin: 0 auto 10px;
    flex-wrap: wrap;
}
.ai-attachment-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--mt-border);
}
.ai-attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ai-attachment-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.ai-attachment-remove:hover { background: rgba(208,31,46,0.85); }
.ai-attachment-thumb-video {
    width: auto;
    min-width: 64px;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
}
.ai-attachment-thumb-video img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--mt-border);
}
.ai-att-role {
    width: 100%;
    margin-top: 3px;
    padding: 2px 4px;
    font-size: 10px;
    border: 1px solid var(--mt-border);
    border-radius: 4px;
    background: var(--mt-bg);
    color: var(--mt-text);
    cursor: pointer;
    text-align: center;
    outline: none;
}
.ai-att-role:focus { border-color: var(--mt-blue); }

.ai-attach-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--mt-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
    padding: 0;
}
.ai-attach-btn:hover { color: var(--mt-blue); background: rgba(0,170,255,0.08); }

.ai-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    max-width: 840px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--mt-border);
    /* Mittlere Rundung — bleibt bei mehrzeiligem Text optisch sauber.
       (Vorher 50rem = Pill → wird bei wachsender Höhe oben/unten zu rund.) */
    border-radius: 22px;
    padding: 8px 8px 8px 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-input-wrap:focus-within {
    border-color: var(--mt-blue);
    box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.1);
}

.ai-message-input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-size: 14px;
    color: #262a2e;
    line-height: 1.5;
    resize: none;
    font-family: inherit;
    min-height: 24px;
    max-height: 200px;
    padding: 4px 0;
}

.ai-send-btn {
    width: 38px;
    height: 38px;
    border: none;
    background: var(--mt-blue);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.ai-send-btn:disabled { opacity: 0.35; cursor: default; }
.ai-send-btn:not(:disabled):hover { background: rgb(0, 150, 230); }

.ai-input-hint {
    max-width: 840px;
    margin: 6px auto 0;
    font-size: 11px;
    color: var(--mt-muted);
    min-height: 16px;
}

#aiStreamingIndicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mt-blue);
    font-weight: 500;
}

/* ─── AI Auto-Resolve ─────────────────────────────────────────────── */

.ai-resolve-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mt-blue);
    background: rgba(0, 136, 255, 0.06);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}

.ai-resolve-link:hover {
    background: rgba(0, 136, 255, 0.12);
    text-decoration: none;
}

.ai-resolve-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.ai-resolve-overlay.open {
    opacity: 1;
    visibility: visible;
}

.ai-resolve-panel {
    background: #fff;
    border-radius: 14px;
    width: 95%;
    max-width: 560px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: translateY(10px);
    transition: transform 0.2s;
}

.ai-resolve-overlay.open .ai-resolve-panel {
    transform: translateY(0);
}

.ai-resolve-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mt-border);
}

.ai-resolve-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    color: var(--mt-muted);
    transition: background 0.15s;
}

.ai-resolve-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.ai-resolve-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.ai-resolve-explanation {
    font-size: 14px;
    line-height: 1.65;
    color: var(--mt-text);
}

.ai-resolve-explanation p { margin: 0 0 8px; }
.ai-resolve-explanation p:last-child { margin-bottom: 0; }

.ai-resolve-prompt-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--mt-border);
}

.ai-resolve-textarea {
    width: 100%;
    border: 1px solid var(--mt-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mt-text);
    background: var(--mt-bg);
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}

.ai-resolve-textarea:focus {
    outline: none;
    border-color: var(--mt-blue);
}

.ai-resolve-apply-btn {
    margin-top: 10px;
    padding: 8px 20px;
    font-size: 13px;
}

/* ─── AI Chat Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .ai-layout {
        margin-left: 0;
        margin-top: 65px;
        height: calc(100vh - 65px);
        height: calc(100dvh - 65px);
    }

    .ai-sidebar {
        width: 100%;
        min-width: 100%;
    }

    .ai-chat-main {
        display: none;
    }

    .ai-layout.ai-chat-active .ai-sidebar {
        display: none;
    }

    .ai-layout.ai-chat-active .ai-chat-main {
        display: flex;
    }

    /* Chat-Detailseite: Bottom-Nav ausblenden, korrekte Höhe (Navbar abziehen!) */
    body.ai-chat-open .ai-layout {
        height: calc(100vh - 65px);
        height: calc(100dvh - 65px);
    }

    /* iOS Keyboard-Fix: Body komplett sperren, damit beim Schließen der
       Tastatur kein residuelles Scrollen hängen bleibt. Layout scrollt
       intern (.ai-messages), das Body selbst bleibt fixiert. */
    body.ai-chat-open {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.ai-chat-open .bottom-nav,
    body.ai-chat-open .mobile-menu-sheet,
    body.ai-chat-open .mobile-menu-backdrop {
        display: none !important;
    }

    .ai-mobile-back-btn {
        display: flex;
    }

    .ai-message {
        padding: 10px 16px;
    }

    .ai-input-area {
        padding: 10px 12px max(10px, var(--safe-bottom));
    }

    .ai-input-wrap {
        border-radius: 20px;
        padding: 6px 6px 6px 14px;
    }

    /* font-size >= 16px verhindert iOS-Autozoom */
    .ai-message-input {
        font-size: 16px;
    }

    .ai-model-select {
        min-width: 0;
        max-width: none;
        flex: 1;
    }
}

/* ═══════════════════════════════════════════════════
   MOBILE: Login-Seite
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .login-box {
        padding: 24px 20px;
    }

    .login-box input[type="text"],
    .login-box input[type="password"] {
        font-size: 16px;
        min-height: 48px;
        border-radius: 8px;
    }

    .login-box .btn-primary {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
        border-radius: 8px;
    }
}

/* ═══════════════════════════════════════════════════
   MOBILE: Meine Aufgaben (mytasks)
   ═══════════════════════════════════════════════════ */
.mobile-mytasks-header {
    display: none;
}

@media (max-width: 768px) {
    body.mytasks-page .top-navbar {
        display: none;
    }

    .mobile-mytasks-header {
        display: flex;
        position: fixed;
        top: 65px; /* unter hk-navbar */
        left: 0;
        right: 0;
        height: calc(54px + var(--safe-top));
        z-index: 20;
        align-items: center;
        justify-content: space-between;
        padding: var(--safe-top) 8px 0;
        background: #fff;
        border-bottom: 1px solid var(--mt-border);
    }

    .mobile-mytasks-header .mph-title {
        font-size: 17px;
        font-weight: 600;
        color: var(--mt-text);
    }

    .mobile-mytasks-header .mph-right {
        width: 40px;
    }

    body.mytasks-page .main-content {
        top: calc(65px + 54px + var(--safe-top));
        padding: 0;
    }

    /* Doppelte Trennlinie verhindern: Page-Header hat schon border-bottom,
       Spalten-Header darunter braucht keine zweite Linie auf Mobile */
    body.mytasks-page .mt-column-header-main {
        border-bottom: none;
    }

    body.mytasks-page .mt-board-scroll {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        height: calc(100vh - 54px - var(--safe-top) - var(--bottom-nav-height));
        height: calc(100dvh - 54px - var(--safe-top) - var(--bottom-nav-height));
        gap: 0;
        padding: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    body.mytasks-page .mt-board-scroll::-webkit-scrollbar {
        display: none;
    }

    body.mytasks-page .mt-column,
    body.mytasks-page .mt-column-main {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        flex-shrink: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    body.mytasks-page .mt-column-add {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        scroll-snap-align: start;
        justify-content: center;
        padding-top: 40px;
    }

    body.mytasks-page .mt-column-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 24px;
        scrollbar-width: none;
    }

    body.mytasks-page .mt-column-body::-webkit-scrollbar {
        display: none;
    }

    body.mytasks-page .mt-task-card {
        border-radius: 14px;
        margin: 0 12px 10px;
    }
}

/* ═══════════════════════════════════════════════════
   MOBILE: Notizen (Read-Only, Projekte-Stil)
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body.notes-page {
        background: #1a1d21;
    }

    body.notes-page .notes-layout {
        display: flex;
        flex-direction: column;
        bottom: var(--bottom-nav-height);
        background: linear-gradient(180deg, #1e2328 0%, #2c3038 50%, #1a1d21 100%);
    }

    body.notes-page .notes-sidebar {
        width: 100%;
        min-width: 100%;
        position: absolute;
        inset: 0;
        z-index: 5;
        transition: transform 0.3s ease;
        background: linear-gradient(180deg, #1e2328 0%, #2c3038 50%, #1a1d21 100%);
        border-right: none;
    }

    body.notes-page .notes-sidebar.notes-mobile-hidden {
        transform: translateX(-100%);
        pointer-events: none;
    }

    body.notes-page .notes-main {
        position: absolute;
        inset: 0;
        z-index: 4;
    }

    /* ─── Gruppen-Ansicht: Projekte-Stil ─── */

    body.notes-page .ns-header {
        padding: calc(var(--safe-top) + 20px) 20px 12px;
    }

    body.notes-page .ns-title {
        font-size: 32px;
        font-weight: 700;
        color: #fff;
        letter-spacing: -0.02em;
    }

    body.notes-page .ns-filter {
        margin: 0 20px 20px;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    body.notes-page .ns-filter-input {
        font-size: 14px;
    }

    body.notes-page .ns-section {
        margin: 0 16px 16px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        overflow: hidden;
    }

    body.notes-page .ns-section-label {
        padding: 14px 16px 8px;
        font-size: 12px;
    }

    body.notes-page .ns-group-item {
        padding: 10px 16px;
        margin: 0;
        border-radius: 0;
    }

    body.notes-page .ns-group-item-left {
        gap: 14px;
    }

    body.notes-page .ns-group-item:active {
        background: rgba(255, 255, 255, 0.08);
    }

    body.notes-page .ns-group-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: currentColor;
    }

    body.notes-page .ns-group-icon svg {
        color: #fff;
    }

    body.notes-page .ns-group-icon svg path {
        fill: #fff;
    }

    body.notes-page .ns-group-name {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.85);
    }

    body.notes-page .ns-group-lock {
        color: rgba(255, 255, 255, 0.25);
    }

    /* Chevron-Pfeil rechts an Gruppen-Items */
    body.notes-page .ns-group-item-right::after {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.3)' d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E") center/contain no-repeat;
        flex-shrink: 0;
    }

    /* ─── Seiten-Ansicht: Projekte-Stil ─── */

    body.notes-page .ns-header-pages {
        padding: calc(var(--safe-top) + 20px) 20px 12px;
        gap: 12px;
    }

    body.notes-page .ns-back-btn {
        width: 36px;
        height: 36px;
        border-radius: 100%;
    }

    body.notes-page .ns-title-pages {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    body.notes-page .ns-pages-header {
        padding: 10px 20px 6px;
    }

    body.notes-page .ns-page-item {
        padding: 10px 16px;
        margin: 1px 16px;
        border-radius: 10px;
        gap: 10px;
    }

    body.notes-page .ns-page-item:active {
        background: rgba(255, 255, 255, 0.08);
    }

    body.notes-page .ns-page-icon {
        width: 32px;
        height: 32px;
    }

    body.notes-page .ns-page-name {
        font-size: 15px;
    }

    /* ─── "Kürzlich verwendet" (notes-main, unter dem Sidebar-Layer) ─── */

    body.notes-page .notes-main-title {
        padding: 24px 20px 8px;
        font-size: 22px;
    }

    body.notes-page .notes-recent-subtitle {
        padding: 0 20px 16px;
    }

    body.notes-page .notes-recent-list {
        padding: 0 16px;
    }

    body.notes-page .notes-recent-item {
        padding: 14px 16px;
    }

    /* ─── Editor-Header (Zurück-Button) ─── */

    body.notes-page .notes-mobile-editor-header {
        display: flex;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 50px;
        z-index: 10;
        align-items: center;
        padding: 0 8px;
        background: var(--mt-white);
        border-bottom: 1px solid var(--mt-border);
        flex-shrink: 0;
    }

    body.notes-page .notes-mobile-editor-header .mph-btn {
        width: 40px;
        height: 40px;
        border: none;
        background: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        color: var(--mt-text);
        -webkit-tap-highlight-color: transparent;
    }

    body.notes-page .notes-mobile-editor-header .mph-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--mt-text);
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 4px;
    }

    /* ─── Read-Only: Bearbeitungs-Controls ausblenden ─── */

    body.notes-page .ne-cover-add,
    body.notes-page .ne-add-btn,
    body.notes-page .ne-block-menu,
    body.notes-page .ne-inline-toolbar,
    body.notes-page .ne-slash-menu,
    body.notes-page .ns-add-btn,
    body.notes-page .ns-add-page-btn,
    body.notes-page .ns-icon-btn,
    body.notes-page .ns-group-options {
        display: none !important;
    }

    body.notes-page .ne-body {
        padding-left: 20px;
        padding-right: 20px;
    }

    body.notes-page .ne-title {
        font-size: 26px;
    }

    body.notes-page .ns-header-actions {
        display: none;
    }

    body.notes-page .ns-pages-header .ns-add-page-btn {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════
   MOBILE: Konto-Seite
   ═══════════════════════════════════════════════════ */
.mobile-account-header {
    display: none;
}

.notes-mobile-editor-header {
    display: none;
}

@media (max-width: 768px) {
    body.account-page-body .top-navbar {
        display: none;
    }

    .mobile-account-header {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(54px + var(--safe-top));
        z-index: 20;
        align-items: center;
        justify-content: space-between;
        padding: var(--safe-top) 8px 0;
        background: #fff;
        border-bottom: 1px solid var(--mt-border);
    }

    .mobile-account-header .mph-title {
        font-size: 17px;
        font-weight: 600;
        color: var(--mt-text);
    }

    .mobile-account-header .mph-right {
        width: 40px;
    }

    body.account-page-body .main-content {
        top: calc(54px + var(--safe-top));
    }

    body.account-page-body .account-container {
        padding: 20px 0 32px;
    }

    body.account-page-body .account-title {
        font-size: 22px;
        margin-bottom: 16px;
        padding: 0 16px;
    }

    body.account-page-body .account-tabs {
        padding: 0 16px;
    }

    body.account-page-body .account-profile-row {
        flex-direction: column-reverse;
        gap: 20px;
    }

    body.account-page-body .account-avatar-col {
        flex-direction: row;
        gap: 16px;
        padding-top: 0;
        align-items: center;
    }

    body.account-page-body .account-avatar-hint {
        text-align: left;
        max-width: none;
    }

    body.account-page-body .account-tab {
        padding: 10px 14px;
        font-size: 14px;
        min-height: 44px;
    }

    body.account-page-body .account-section {
        padding: 18px 16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    body.account-page-body input[type="text"],
    body.account-page-body input[type="email"],
    body.account-page-body input[type="password"] {
        font-size: 16px;
        min-height: 44px;
    }

    body.account-page-body .account-name-row {
        flex-direction: column;
    }

    /* Benachrichtigungen-Tab Mobile */
    .notif-table thead {
        font-size: 11px;
    }

    .notif-th-channel {
        width: 60px;
    }

    .notif-event-label {
        font-size: 13px;
    }

    .notif-event-desc {
        font-size: 11px;
    }

    .notif-toggle {
        width: 34px;
        height: 20px;
    }

    .notif-toggle-slider::before {
        width: 14px;
        height: 14px;
    }

    .notif-toggle input:checked + .notif-toggle-slider::before {
        transform: translateX(14px);
    }

    /* Notification Dropdown Mobile */
    .notif-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
        border: none;
        box-shadow: 0 -4px 32px rgba(0,0,0,0.2);
    }

    .notif-dropdown-body {
        max-height: 60vh;
    }
}

/* ═══════════════════════════════════════════════════
   MOBILE: Admin-Seite
   ═══════════════════════════════════════════════════ */
.mobile-admin-header {
    display: none;
}

@media (max-width: 768px) {
    .admin-app-wrap {
        left: 0;
        top: 65px;
    }

    .admin-sidebar {
        display: none;
    }

    .admin-content-header {
        display: none;
    }

    .admin-main-content {
        padding: 16px;
    }

    body.admin-page .admin-app-wrap {
        top: calc(65px + 88px + var(--safe-top));
    }

    .mobile-admin-header {
        display: block;
        position: fixed;
        top: 65px;
        left: 0;
        right: 0;
        z-index: 20;
        background: #fff;
        border-bottom: 1px solid var(--mt-border);
        padding-top: var(--safe-top);
    }

    .mobile-admin-header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding: 0 8px;
    }

    .mobile-admin-header-top .mph-title {
        font-size: 17px;
        font-weight: 600;
        color: var(--mt-text);
        flex: 1;
        text-align: center;
    }

    .mobile-admin-tabs {
        display: flex;
        overflow-x: auto;
        gap: 0;
        padding: 0 8px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mobile-admin-tabs::-webkit-scrollbar {
        display: none;
    }

    .mobile-admin-tab {
        flex-shrink: 0;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 500;
        color: var(--mt-muted);
        cursor: pointer;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-admin-tab.active {
        color: var(--mt-blue);
        border-bottom-color: var(--mt-blue);
    }

    body.admin-page .table-container {
        border-radius: 0;
        box-shadow: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.admin-page .data-table th,
    body.admin-page .data-table td {
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 13px;
    }

    body.admin-page .modal.show .modal-content {
        width: calc(100% - 16px);
        max-height: calc(100vh - 100px);
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
        border-radius: 14px;
    }

    body.admin-page .update-container {
        padding: 16px 12px;
    }

    body.admin-page .update-settings-grid,
    body.admin-page .ai-provider-keys-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    body.admin-page .ai-admin-container {
        padding: 16px 0;
    }

    body.admin-page .ai-admin-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    body.admin-page input[type="text"],
    body.admin-page input[type="email"],
    body.admin-page input[type="password"],
    body.admin-page input[type="number"],
    body.admin-page select,
    body.admin-page textarea {
        font-size: 16px;
    }
}

/* ═══════════════════════════════════════════════════
   MOBILE: Uebergreifende Anpassungen
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Global: Modals */
    .modal.show .modal-content {
        width: calc(100% - 16px);
        max-height: calc(100vh - var(--bottom-nav-height) - 24px);
        max-height: calc(100dvh - var(--bottom-nav-height) - 24px);
        overflow-y: auto;
        border-radius: 14px;
    }

    /* Global: Form-Inputs - iOS zoom prevention */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px;
    }

    /* Global: Buttons touch target */
    .btn {
        min-height: 40px;
    }

    /* Global: form-group spacing for touch */
    .form-group label {
        padding-bottom: 4px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 44px;
    }

    /* Global: Close-Button on modals bigger for touch */
    .close {
        font-size: 32px;
        top: 8px;
        right: 12px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile headers: shared mph-btn style */
    .mph-btn {
        width: 40px;
        height: 40px;
        border: none;
        background: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        color: var(--mt-text);
        -webkit-tap-highlight-color: transparent;
    }

    .mph-btn:active {
        background: rgba(0, 0, 0, 0.06);
    }

}

/* ===== SW Update Banner ===== */
.sw-update-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100000;
    background: #1a1a2e;
    color: #fff;
    padding: 14px 16px;
    padding-bottom: calc(14px + var(--safe-bottom));
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 -2px 12px rgba(0,0,0,.3);
    animation: swBannerSlide .35s ease-out;
}

.sw-update-banner button {
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: #4f8cff;
    color: #fff;
}

.sw-update-banner button:active {
    opacity: .8;
}

@keyframes swBannerSlide {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ─── AI Tools / Agents ──────────────────────────────────────────────────── */

.ai-tools-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 4px;
}

/* Tools-Button — visuell harmonisiert mit .ai-header-cost (Pill-Style) */
.ai-tools-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--mt-border);
    border-radius: 50rem;
    background: rgba(0, 0, 0, 0.03);
    color: var(--mt-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ai-tools-toggle-btn svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}
.ai-tools-toggle-btn:hover svg {
    opacity: 1;
}
.ai-tools-toggle-btn:hover {
    border-color: var(--mt-blue);
    color: var(--mt-blue);
    background: rgba(0, 170, 255, 0.05);
}
body.dark-mode .ai-tools-toggle-btn {
    background: rgba(255, 255, 255, 0.03);
}

.ai-tools-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--mt-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 0 4px;
}

/* Aktivierte Tools NICHT als Icon-Chips anzeigen — Anzahl im Button reicht */
.ai-tools-chips { display: none !important; }

.ai-tool-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 14px;
    border: 1px solid var(--mt-border);
    background: var(--mt-card);
}

.ai-tool-chip-active {
    border-color: #22c55e44;
    background: #22c55e11;
}

.ai-tool-chip-unauth {
    border-color: #ef444444;
    background: #ef444411;
    opacity: 0.6;
}

/* Tools Panel */
.ai-tools-panel {
    border-bottom: 1px solid var(--mt-border);
    background: var(--mt-card);
    max-height: 480px;
    overflow-y: auto;
}

.ai-tools-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--mt-border);
}
.ai-tools-panel-title-block { flex: 1; min-width: 0; }
.ai-tools-panel-title {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--mt-text);
}
.ai-tools-panel-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--mt-muted);
}

.ai-tools-panel-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Filter-Tabs (Pill-Group) */
.ai-tools-filter-tabs {
    display: inline-flex;
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
body.dark-mode .ai-tools-filter-tabs {
    background: rgba(255,255,255,0.05);
}
.ai-tools-filter-tab {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--mt-muted);
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ai-tools-filter-tab:hover { color: var(--mt-text); }
.ai-tools-filter-tab.active {
    background: #fff;
    color: var(--mt-text);
    box-shadow: rgba(0,0,0,0.06) 0 1px 2px;
}
body.dark-mode .ai-tools-filter-tab.active {
    background: #2a2d31;
    color: #e7eaec;
}

.ai-tools-panel-close {
    background: none;
    border: none;
    color: var(--mt-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
    border-radius: 4px;
}
.ai-tools-panel-close:hover {
    color: var(--mt-text);
    background: rgba(0,0,0,0.05);
}

/* Card-Grid */
.ai-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px 20px 20px;
}
@media (max-width: 768px) {
    .ai-tools-grid { grid-template-columns: 1fr; }
}

.ai-tools-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--mt-muted);
    font-size: 13px;
}

/* Tool-Card */
.ai-tool-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--mt-border);
    border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.dark-mode .ai-tool-card {
    background: #1e2124;
    border-color: #2d3135;
}
.ai-tool-card:hover {
    border-color: rgb(190, 195, 200);
    box-shadow: rgba(0,0,0,0.04) 0 2px 8px;
}

.ai-tool-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 170, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
body.dark-mode .ai-tool-card-icon {
    background: rgba(0, 170, 255, 0.12);
}

.ai-tool-card-info {
    min-width: 0;
    overflow: hidden;
}
.ai-tool-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--mt-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-tool-card-category {
    font-size: 12px;
    color: var(--mt-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status-Badge */
.ai-tool-card-status {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ai-tool-status-active {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
.ai-tool-status-available {
    background: rgba(0, 0, 0, 0.05);
    color: var(--mt-muted);
}
.ai-tool-status-pending {
    background: rgba(234, 179, 8, 0.12);
    color: #ca8a04;
}
body.dark-mode .ai-tool-status-active {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
}
body.dark-mode .ai-tool-status-available {
    background: rgba(255, 255, 255, 0.06);
}

/* iOS-Switch */
.ai-tool-card-switch {
    position: relative;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}
.ai-tool-card-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}
.ai-tool-card-switch-track {
    position: absolute;
    inset: 0;
    background: rgb(208, 213, 218);
    border-radius: 11px;
    transition: background 0.2s;
}
.ai-tool-card-switch-track::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: rgba(0,0,0,0.15) 0 1px 3px;
    transition: transform 0.2s;
}
.ai-tool-card-switch input:checked + .ai-tool-card-switch-track {
    background: rgb(0, 170, 255);
}
.ai-tool-card-switch input:checked + .ai-tool-card-switch-track::before {
    transform: translateX(16px);
}

/* 3-Dot-Menu */
.ai-tool-card-menu {
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    color: var(--mt-muted);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.ai-tool-card-menu:hover {
    background: rgba(0,0,0,0.06);
    color: var(--mt-text);
}
body.dark-mode .ai-tool-card-menu:hover {
    background: rgba(255,255,255,0.08);
}

.ai-tool-auth-ok {
    font-size: 11px;
    color: #22c55e;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ai-tool-auth-ok::before {
    content: '●';
    font-size: 8px;
}

.ai-tool-auth-none {
    font-size: 11px;
    color: var(--mt-muted);
}

.ai-tool-connect-btn {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--mt-blue);
    background: transparent;
    color: var(--mt-blue);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.ai-tool-connect-btn:hover {
    background: var(--mt-blue);
    color: #fff;
}

.ai-tool-konto-link {
    font-size: 12px;
    color: var(--mt-blue);
    text-decoration: none;
    white-space: nowrap;
}

.ai-tool-konto-link:hover {
    text-decoration: underline;
}

.ai-tool-auth-connected {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-tool-disconnect-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: transparent;
    color: #ef4444;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
}

.ai-tool-disconnect-btn:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

.ai-tool-apikey-connect {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-tool-apikey-input {
    width: 160px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--mt-border);
    background: var(--mt-bg);
    color: var(--mt-text);
    font-size: 11px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    outline: none;
    transition: border-color 0.15s;
}

.ai-tool-apikey-input:focus {
    border-color: var(--mt-blue);
}

.ai-tool-apikey-input::placeholder {
    color: var(--mt-muted);
    font-family: inherit;
}

/* Tool Call Visualization in Chat */
.ai-tool-call {
    display: flex;
    align-items: flex-start;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--mt-border);
    background: var(--mt-card);
    font-size: 12px;
    color: var(--mt-muted);
}

.ai-tool-call-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ai-tool-call-spinner {
    animation: toolSpin 1.5s linear infinite;
    flex-shrink: 0;
}

@keyframes toolSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ai-tool-call-name {
    font-weight: 500;
    color: var(--mt-text);
    text-transform: capitalize;
}

.ai-tool-call-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.ai-tool-call-summary {
    color: var(--mt-muted);
    font-size: 11px;
    margin-left: 4px;
}

.ai-tool-result-ok {
    border-color: #22c55e33;
    background: #22c55e08;
}

.ai-tool-result-ok .ai-tool-call-icon {
    color: #22c55e;
}

.ai-tool-result-error {
    border-color: #ef444433;
    background: #ef444408;
}

.ai-tool-result-error .ai-tool-call-icon {
    color: #ef4444;
}

.ai-tool-result-error .ai-tool-call-summary {
    color: #ef4444;
}

.ai-tool-call:has(.ai-tool-reauth) {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.ai-tool-reauth {
    display: flex;
    justify-content: flex-start;
}

.ai-tool-reauth-btn {
    background: var(--mt-primary, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.ai-tool-reauth-btn:hover {
    opacity: 0.85;
}

/* ── Tool Debug Panel (Admin only) ────────────────────────────────────────── */

.tool-debug-panel {
    margin: 8px 0;
    border: 1px solid var(--mt-border);
    border-radius: 8px;
    background: var(--mt-card);
    overflow: hidden;
    font-size: 12px;
}

.tool-debug-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--mt-muted);
    font-weight: 500;
    user-select: none;
    transition: background 0.15s;
}

.tool-debug-toggle:hover {
    background: var(--mt-bg);
}

.tool-debug-toggle svg {
    opacity: 0.5;
    flex-shrink: 0;
}

.tool-debug-panel-chevron {
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.2s;
}

.tool-debug-panel.collapsed .tool-debug-panel-chevron {
    transform: rotate(-90deg);
}

.tool-debug-items {
    border-top: 1px solid var(--mt-border);
}

.tool-debug-panel.collapsed .tool-debug-items {
    display: none;
}

.tool-debug-item {
    border-bottom: 1px solid var(--mt-border);
}

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

.tool-debug-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.tool-debug-header:hover {
    background: var(--mt-bg);
}

.tool-debug-icon {
    font-size: 13px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.debug-status-ok .tool-debug-icon {
    color: #22c55e;
}

.debug-status-error .tool-debug-icon {
    color: #ef4444;
}

.tool-debug-name {
    font-weight: 500;
    color: var(--mt-text);
    text-transform: capitalize;
    white-space: nowrap;
}

.tool-debug-summary {
    color: var(--mt-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.debug-status-error .tool-debug-summary {
    color: #ef4444;
}

.tool-debug-duration {
    color: var(--mt-muted);
    font-size: 10px;
    font-family: monospace;
    white-space: nowrap;
    opacity: 0.7;
}

.tool-debug-chevron {
    font-size: 10px;
    color: var(--mt-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.tool-debug-item.expanded .tool-debug-chevron {
    transform: rotate(0deg);
}

.tool-debug-item:not(.expanded) .tool-debug-chevron {
    transform: rotate(-90deg);
}

.tool-debug-details {
    display: none;
    padding: 0 12px 10px;
}

.tool-debug-item.expanded .tool-debug-details {
    display: block;
}

.tool-debug-section {
    margin-top: 6px;
}

.tool-debug-section-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mt-muted);
    margin-bottom: 3px;
}

.tool-debug-json {
    background: var(--mt-bg);
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.5;
    color: var(--mt-text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
}

@media (max-width: 768px) {
    /* ─── Mobile Chat-Layout: Horizontal-Overflow verhindern ─── */
    .ai-chat-main,
    .ai-chat-container,
    .ai-messages {
        max-width: 100vw;
        overflow-x: hidden;
        min-width: 0;
    }

    /* Chat-Header: Pills dürfen umbrechen, falls eng */
    .ai-chat-header {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 8px;
        row-gap: 6px;
    }

    /* Modell-Select schrumpfbar */
    .ai-model-selector {
        min-width: 0;
        flex: 1 1 140px;
    }
    .ai-model-select {
        max-width: 100%;
    }

    /* Header-Cost — kein erzwungener margin-left:auto auf Mobile,
       sonst wird sie weit rechts geparkt und überlappt */
    .ai-header-cost {
        margin-left: 0;
        margin-right: 0;
    }

    /* Lange Inhalte (URLs, Code) brechen statt zu überlaufen */
    .ai-message,
    .ai-msg-content,
    .ai-msg-bubble {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .ai-msg-content pre,
    .ai-msg-content code {
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* Tools-Button bleibt auf Mobile sichtbar */
    .ai-tools-toggle-btn {
        padding: 5px 10px;
        font-size: 12px;
    }
    .ai-tools-panel {
        max-height: 70vh;
    }
    .ai-tools-panel-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 16px;
    }
    .ai-tools-panel-actions {
        justify-content: space-between;
        gap: 8px;
    }
    .ai-tools-filter-tabs {
        flex: 1;
    }
    .ai-tools-filter-tab {
        flex: 1;
        text-align: center;
        padding: 6px 8px;
    }
    .ai-tools-grid {
        padding: 12px 16px 16px;
        gap: 10px;
    }
    .ai-tool-card {
        padding: 10px 12px;
        gap: 10px;
    }
    .ai-tool-card-icon {
        width: 36px;
        height: 36px;
        font-size: 19px;
    }
    .ai-tool-card-status {
        display: none; /* Auf Mobile: Status durch Toggle-Zustand sichtbar */
    }
}

/* ═══════════════════════════════════════════════════════════
   Mobile Comment Overlay
   ═══════════════════════════════════════════════════════════ */
.mc-overlay {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 100000;
    background: #fff;
    flex-direction: column;
    overflow: hidden;
}
.mc-overlay.open {
    display: flex;
}

.mc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 12px;
    border-bottom: 1px solid rgb(230, 232, 235);
    flex-shrink: 0;
}
.mc-close-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(61, 71, 77);
    padding: 0;
    border-radius: 50%;
}
.mc-close-btn:active {
    background: rgb(240, 242, 244);
}
.mc-title {
    font-size: 16px;
    font-weight: 600;
    color: rgb(61, 71, 77);
}
.mc-send-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(0, 170, 255);
    padding: 0;
    border-radius: 50%;
    transition: opacity 0.15s;
}
.mc-send-btn[disabled] {
    opacity: 0.35;
    pointer-events: none;
}
.mc-send-btn:active {
    opacity: 0.7;
}

.mc-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
/* Reply-Preview oben im mobilen Overlay (analog zum Composer-Preview auf Desktop) */
.mc-reply-preview {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 12px 0;
    padding: 8px 10px;
    border-left: 3px solid rgb(0, 170, 255);
    background: rgba(0, 170, 255, 0.06);
    border-radius: 0 6px 6px 0;
    flex: none;
}
.mc-reply-preview-body {
    flex: 1;
    min-width: 0;
}
.mc-reply-preview-author {
    color: rgb(0, 130, 200);
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 2px;
}
.mc-reply-preview-content {
    color: rgb(138, 148, 153);
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.mc-reply-preview-close {
    flex: none;
    width: 26px;
    height: 26px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: rgb(138, 148, 153);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.mc-reply-preview-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: rgb(61, 71, 77);
}
.mc-textarea {
    flex: 1;
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    padding: 16px;
    font-size: 16px;
    line-height: 1.5;
    font-family: inherit;
    color: rgb(61, 71, 77);
    background: #fff;
}
.mc-textarea::placeholder {
    color: rgba(61, 71, 77, 0.35);
}

.mc-mention-dropdown {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: auto;
    max-height: 240px;
    overflow-y: auto;
    z-index: 10;
}

.mc-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-top: 1px solid rgb(230, 232, 235);
    background: #fff;
    flex-shrink: 0;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
}
.mc-tool-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(100, 110, 118);
    padding: 0;
    border-radius: 8px;
}
.mc-tool-btn:active {
    background: rgb(240, 242, 244);
}

/* Attachment Picker (slides up from bottom) */
.mc-attach-picker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 60vh;
    background: #fff;
    border-top: 1px solid rgb(230, 232, 235);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 20;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mc-attach-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    font-weight: 600;
    font-size: 15px;
    color: rgb(61, 71, 77);
    flex-shrink: 0;
}
.mc-attach-picker-close {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 22px;
    color: rgb(138, 148, 153);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.mc-attach-picker-close:active { background: rgb(240,242,244); }

.mc-attach-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px;
}
.mc-attach-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 8px;
    cursor: pointer;
    color: rgb(61, 71, 77);
    font-size: 14px;
}
.mc-attach-picker-item:active {
    background: rgb(240, 242, 244);
}
.mc-attach-picker-item .mc-att-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgb(240, 242, 244);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.mc-attach-picker-item .mc-att-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mc-attach-picker-item .mc-att-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-attach-picker-empty {
    padding: 24px 16px;
    text-align: center;
    color: rgb(138, 148, 153);
    font-size: 13px;
}

.mc-attach-picker-actions {
    padding: 8px 16px;
    border-top: 1px solid rgb(240, 242, 244);
    flex-shrink: 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.mc-attach-upload-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    color: rgb(0, 170, 255);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.mc-attach-upload-btn:active {
    opacity: 0.7;
}

/* Attachment reference in comment bubbles */
.attachment-ref-link {
    color: rgb(0, 170, 255);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}
.attachment-ref-link:hover {
    text-decoration: underline;
}
.attachment-ref-link::before {
    content: '\1F4CE ';
}

/* Highlight-Animation für referenzierte Anhänge */
@keyframes att-flash {
    0%, 100% { background: transparent; }
    30% { background: rgba(0, 170, 255, 0.15); }
}
.att-highlight {
    animation: att-flash 0.6s ease 3;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBALER TIMER: Mobile Layout-Verschiebungen
   (am Ende der Datei, damit sie alle vorherigen Regeln überschreiben)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Globales Header-Menü (hk-navbar) unter den Timer-Banner schieben */
    body.gt-timer-active .hk-navbar {
        top: 44px !important;
    }

    /* Slide-In Sidebar-Menü (Logo) unter den Timer-Banner schieben */
    body.gt-timer-active .hk-menu {
        top: 44px !important;
    }

    body.gt-timer-active .mobile-project-header {
        top: calc(65px + 44px) !important;
    }

    body.gt-timer-active.project-page .main-content {
        top: calc(65px + 54px + 44px + var(--safe-top)) !important;
    }

    body.gt-timer-active.project-page #taskModal.modal.show {
        top: 44px;
    }

    /* Task-Detail Mobile (Fullscreen-Overlay) unter den Timer-Banner schieben */
    body.gt-timer-active.project-page .task-overlay-scroll {
        top: 44px !important;
    }

    body.gt-timer-active.project-page .task-dialog {
        min-height: calc(100vh - 44px) !important;
        min-height: calc(100dvh - 44px) !important;
    }

    body.gt-timer-active.project-page .kanban-fab {
        bottom: calc(var(--bottom-nav-height) + 16px);
    }

    body.gt-timer-active .mobile-mytasks-header {
        top: calc(65px + 44px) !important;
    }

    body.gt-timer-active.mytasks-page .main-content {
        top: calc(65px + 54px + 44px + var(--safe-top)) !important;
    }

    body.gt-timer-active .mobile-account-header {
        top: 44px !important;
    }

    body.gt-timer-active.account-page-body .main-content {
        top: calc(54px + 44px + var(--safe-top)) !important;
    }

    body.gt-timer-active .mobile-admin-header {
        top: 44px !important;
    }

    body.gt-timer-active.admin-page .admin-app-wrap {
        top: calc(65px + 40px) !important;
    }

    body.gt-timer-active.app-projects-page .app-projects {
        top: calc(65px + 44px) !important;
    }

    body.gt-timer-active .notes-layout {
        top: 44px !important;
    }

    body.gt-timer-active .ai-layout {
        margin-top: 44px !important;
        height: calc(100vh - var(--bottom-nav-height) - 44px) !important;
        height: calc(100dvh - var(--bottom-nav-height) - 44px) !important;
    }

    body.gt-timer-active.ai-chat-open .ai-layout {
        height: calc(100vh - 44px) !important;
        height: calc(100dvh - 44px) !important;
    }
}

/* ═══════════════════════════════════════════════════
   Dark Mode
   ═══════════════════════════════════════════════════ */
body.dark-mode {
    --mt-bg: #1a1d21;
    --mt-white: #1e2226;
    --mt-text: #d4d8dd;
    --mt-muted: #8a9199;
    --mt-border: #2e3338;
    --mt-sidebar: #15181a;
    color: var(--mt-text);
    background: var(--mt-bg);
}

body.dark-mode .hk-navbar {
    background: #1e2226;
    border-bottom-color: #2e3338;
}

body.dark-mode .hk-nav-btn {
    color: #d4d8dd;
}

body.dark-mode .hk-nav-btn:hover {
    background: #2e3338;
}

body.dark-mode .input-search {
    background: #2a2e33;
    border-color: #3a3f45;
    color: #d4d8dd;
}

body.dark-mode .top-navbar {
    background: #1e2226;
    border-bottom-color: #2e3338;
}

body.dark-mode .main-content {
    background: #1a1d21;
}

body.dark-mode .project-card {
    background: #1e2226;
    border-color: #2e3338;
}

body.dark-mode .hk-menu {
    background: #15181a;
    border-right-color: #2e3338;
}

body.dark-mode .menu-header {
    border-bottom-color: #2e3338;
}

body.dark-mode .brand-text {
    color: #d4d8dd;
}

body.dark-mode .nav-header {
    color: #6b7280;
}

body.dark-mode .nav-link {
    color: #9ca3af;
}

body.dark-mode .nav-link:hover,
body.dark-mode .nav-item.active .nav-link {
    color: #fff;
}

body.dark-mode .modal-content {
    background: #1e2226;
    color: #d4d8dd;
}

body.dark-mode .column-header h3 {
    color: #fff;
}

body.dark-mode .task-card {
    background: #1e2226;
    border-color: #2e3338;
}

body.dark-mode .task-card:hover {
    border-color: #3a3f45;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: #2a2e33;
    border-color: #3a3f45;
    color: #d4d8dd;
}

body.dark-mode .btn-secondary {
    background: #2a2e33;
    border-color: #3a3f45;
    color: #d4d8dd;
}

body.dark-mode .pnav-user-dropdown {
    background: #1e2226;
    border-color: #2e3338;
}

body.dark-mode .pnav-user-dropdown-item {
    color: #d4d8dd;
}

body.dark-mode .pnav-user-dropdown-item:hover {
    background: #2a2e33;
}

body.dark-mode .notif-dropdown {
    background: #1e2226;
    border-color: #2e3338;
}

body.dark-mode .rv-dropdown {
    background: #1e2226;
    border-color: #2e3338;
}

body.dark-mode .rv-item:hover {
    background: rgba(255,255,255,0.04);
}

body.dark-mode .qs-dropdown {
    background: #1e2226;
    border-color: rgba(0, 170, 255, 0.15);
}

body.dark-mode .qs-item:hover {
    background: rgba(0, 170, 255, 0.08);
}

body.dark-mode .qs-mobile-overlay {
    background: #1a1d21;
}

body.dark-mode .tt-quickstart-toggle {
    background: #3a3f45;
}

body.dark-mode .tt-quickstart-toggle.active {
    background: var(--mt-blue, #00aaff);
}

body.dark-mode .app-group-card {
    background: #1e2226;
    border-color: #2e3338;
}

body.dark-mode .app-search-filter {
    background: #2a2e33;
    border-color: #3a3f45;
}

body.dark-mode .admin-sidebar {
    background: #1e2226;
    border-right-color: #2e3338;
}

body.dark-mode .admin-sidebar-title {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .admin-sidebar-item:hover,
body.dark-mode .admin-sidebar-item.active {
    background: rgba(0, 170, 255, 0.1);
}

body.dark-mode .notes-sidebar {
    background: #1e2226;
    border-right-color: #2e3338;
}

body.dark-mode .ns-title,
body.dark-mode .ns-group-name,
body.dark-mode .ns-page-name {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .ns-section-label,
body.dark-mode .ns-pages-label,
body.dark-mode .ns-filter-icon,
body.dark-mode .ns-section-icon,
body.dark-mode .ns-group-lock,
body.dark-mode .ns-icon-btn,
body.dark-mode .ns-back-btn,
body.dark-mode .ns-add-page-btn,
body.dark-mode .ns-page-toggle,
body.dark-mode .ns-page-icon,
body.dark-mode .ns-group-options,
body.dark-mode .ns-empty,
body.dark-mode .ns-pages-chevron {
    color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .ns-filter {
    background: rgba(255, 255, 255, 0.04);
    border-color: #2e3338;
}

body.dark-mode .ns-filter-input {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .ns-filter-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

body.dark-mode .ns-group-item:hover,
body.dark-mode .ns-page-item:hover,
body.dark-mode .ns-page-toggle:hover,
body.dark-mode .ns-icon-btn:hover,
body.dark-mode .ns-back-btn:hover,
body.dark-mode .ns-add-page-btn:hover,
body.dark-mode .ns-group-options:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

body.dark-mode .ns-page-item.active {
    background: rgba(0, 170, 255, 0.12);
    color: var(--mt-blue);
}

body.dark-mode .ns-page-item.active .ns-page-icon,
body.dark-mode .ns-page-item.active .ns-page-name {
    color: var(--mt-blue);
}

body.dark-mode .ns-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .admin-content-header {
    background: #1e2226;
    border-bottom-color: #2e3338;
}

body.dark-mode .admin-main-content {
    background: #1a1d21;
}

body.dark-mode table th {
    background: #22262b;
}

body.dark-mode table td {
    border-color: #2e3338;
}

body.dark-mode .kanban-column {
    background: #1e2226;
}

@media (max-width: 768px) {
    body.dark-mode.app-projects-page {
        background: #1a1d21;
    }

    body.dark-mode.app-projects-page .app-projects {
        background: #1a1d21;
    }

    body.dark-mode .mobile-project-header {
        background: #1e2226;
        border-bottom-color: #2e3338;
    }
}

/* ===== GEPLANTE / WIEDERKEHRENDE AUFGABEN ===== */

/* Task Card: Recurring Badge */
.tc-recurring-badge {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    color: rgb(108, 117, 125);
    vertical-align: middle;
    flex-shrink: 0;
}
.tc-recurring-badge svg {
    width: 14px;
    height: 14px;
}

/* Recurring Overlay List */
.recurring-panel {
    max-width: 600px;
}

.recurring-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: rgb(0, 170, 255);
    background: none;
    border: 1.5px solid rgb(0, 170, 255);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.recurring-add-btn:hover {
    background: rgba(0, 170, 255, 0.08);
}
.recurring-add-btn svg {
    width: 14px;
    height: 14px;
}

.recurring-empty {
    padding: 32px 16px;
    text-align: center;
    color: rgb(138, 148, 153);
    font-size: 14px;
    line-height: 1.5;
}

.recurring-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgb(240, 242, 244);
    cursor: pointer;
    transition: background 0.15s;
}
.recurring-item:hover {
    background: rgb(248, 249, 250);
}
.recurring-item:last-child {
    border-bottom: none;
}
.recurring-item-paused {
    opacity: 0.55;
}

.recurring-item-main {
    flex: 1;
    min-width: 0;
}

.recurring-item-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.recurring-item-icon {
    flex-shrink: 0;
    color: rgb(0, 170, 255);
}
.recurring-item-title {
    font-size: 14px;
    font-weight: 600;
    color: rgb(23, 43, 77);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recurring-item-paused-badge {
    font-size: 11px;
    font-weight: 600;
    color: rgb(255, 152, 0);
    background: rgba(255, 152, 0, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}
.recurring-item-assignee {
    flex-shrink: 0;
    margin-left: auto;
}

.recurring-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: rgb(138, 148, 153);
}
.recurring-item-sep {
    color: rgb(200, 205, 210);
}
.recurring-item-tags {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.recurring-item-delete {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 8px;
    color: rgb(180, 190, 195);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.recurring-item-delete:hover {
    color: rgb(208, 31, 46);
    background: rgba(208, 31, 46, 0.08);
}

/* Recurring Popover (Sidebar-Modul) */
.rc-popover {
    display: none;
    position: fixed;
    width: 340px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    z-index: 2000;
    overflow: hidden;
    max-height: 80vh;
    overflow-y: auto;
}
.rc-popover.open {
    display: block;
}

.rc-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgb(240, 242, 244);
}
.rc-popover-title {
    font-size: 14px;
    font-weight: 600;
    color: rgb(23, 43, 77);
}
.rc-popover-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Active Toggle */
.rc-active-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rc-active-label {
    font-size: 14px;
    font-weight: 500;
    color: rgb(23, 43, 77);
}
.rc-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.rc-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.rc-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgb(210, 215, 218);
    border-radius: 24px;
    transition: background 0.2s;
}
.rc-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.rc-toggle input:checked + .rc-toggle-slider {
    background: rgb(0, 170, 255);
}
.rc-toggle input:checked + .rc-toggle-slider::before {
    transform: translateX(20px);
}

/* Tabs */
.rc-tabs {
    display: flex;
    gap: 0;
    background: rgb(240, 242, 244);
    border-radius: 10px;
    padding: 3px;
}
.rc-tab {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: rgb(108, 117, 125);
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.rc-tab.active {
    background: rgb(0, 170, 255);
    color: #fff;
}
.rc-tab:hover:not(.active) {
    background: rgba(0, 0, 0, 0.04);
}

/* Day List (weekly multi-select, two columns) */
.rc-day-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}
.rc-day-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px;
    font-size: 14px;
    color: rgb(23, 43, 77);
    cursor: pointer;
    border-bottom: 1px solid rgb(240, 242, 244);
}
.rc-day-option:nth-last-child(-n+2) {
    border-bottom: none;
}
.rc-day-option input[type="checkbox"] {
    display: none;
}
.rc-day-check {
    display: none;
    color: rgb(0, 170, 255);
}
.rc-day-option.checked .rc-day-check {
    display: block;
}

/* Calendar Grid (monthly / yearly) */
.rc-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.rc-cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    font-size: 14px;
    color: rgb(23, 43, 77);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s;
}
.rc-cal-day:hover {
    background: rgb(240, 242, 244);
}
.rc-cal-day.selected {
    background: rgb(0, 170, 255);
    color: #fff;
    font-weight: 600;
}
.rc-cal-day-last {
    grid-column: span 3;
    border-radius: 16px;
    aspect-ratio: auto;
    padding: 8px 0;
    font-size: 13px;
}

/* Year month nav */
.rc-year-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 8px;
}
.rc-year-month-label {
    font-size: 15px;
    font-weight: 600;
    color: rgb(23, 43, 77);
}
.rc-year-month-prev,
.rc-year-month-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: rgb(108, 117, 125);
    transition: background 0.15s;
}
.rc-year-month-prev:hover,
.rc-year-month-next:hover {
    background: rgb(240, 242, 244);
}

/* Summary text */
.rc-summary {
    font-size: 13px;
    color: rgb(108, 117, 125);
    line-height: 1.4;
    min-height: 18px;
}

/* Every Row */
.rc-every-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgb(23, 43, 77);
    padding-top: 4px;
    border-top: 1px solid rgb(240, 242, 244);
}
.rc-every-unit {
    color: rgb(108, 117, 125);
}

/* Inputs */
.rc-input {
    height: 36px;
    border: 1.5px solid rgb(210, 215, 218);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 14px;
    font-family: inherit;
    color: rgb(23, 43, 77);
    background: rgb(248, 249, 250);
    outline: none;
    transition: border-color 0.15s;
}
.rc-input:focus {
    border-color: rgb(0, 170, 255);
}
.rc-input[type="number"] {
    width: 60px;
    text-align: center;
    -moz-appearance: textfield;
}
.rc-input[type="number"]::-webkit-outer-spin-button,
.rc-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.rc-input[type="date"],
.rc-input[type="time"] {
    flex: 1;
    width: 100%;
}

/* Settings area */
.rc-settings-area {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid rgb(240, 242, 244);
}
.rc-settings-area > .rc-active-row {
    padding-bottom: 4px;
    border-bottom: 1px solid rgb(240, 242, 244);
}
.rc-panel {
    margin: 0;
}

/* Extra fields: time, start, end */
.rc-extra-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgb(240, 242, 244);
}
.rc-extra-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rc-extra-label {
    font-size: 13px;
    font-weight: 500;
    color: rgb(108, 117, 125);
    white-space: nowrap;
    min-width: 100px;
}
.rc-extra-row .rc-input {
    flex: 1;
}

.rc-actions {
    padding-top: 4px;
}
.rc-save-btn {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: rgb(0, 170, 255);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.rc-save-btn:hover {
    background: rgb(0, 150, 235);
}

/* Recurring Board View Toggle */
.recurring-board-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgb(0, 170, 255), rgb(0, 140, 220));
    color: #fff;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 170, 255, 0.2);
}
.recurring-board-bar-label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.recurring-board-bar-label svg {
    flex-shrink: 0;
}
.recurring-board-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.recurring-board-bar-add {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: rgb(0, 170, 255);
    background: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.recurring-board-bar-add:hover {
    background: rgb(240, 248, 255);
}
.recurring-board-bar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s;
}
.recurring-board-bar-close:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Recurring Task Cards in Board View */
.tc-recurring {
    border-left: 3px solid rgb(0, 170, 255);
}
.tc-recurring.tc-recurring-paused {
    border-left-color: rgb(255, 152, 0);
    opacity: 0.7;
}
/* Recurring-Badge: Pill auf der Karte (überschreibt Banner-Default von .tc-badge) */
.tc-badge.tc-badge-recurring {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: auto;
    min-height: 0;
    margin: 0 0 8px 0;          /* statt -17px -20px 17px -20px */
    padding: 4px 10px;
    border-radius: 999px;        /* echte Pille, nicht eckig oben */
    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;
    color: rgb(0, 170, 255);
    background: rgba(0, 170, 255, 0.12);
    /* Pill darf nicht über die Karten-Breite hinaus */
    max-width: 100%;
    box-sizing: border-box;
    /* Lange Day-Listen ggf. umbrechen, statt zu überlaufen */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    align-self: flex-start;      /* nicht über die ganze Breite spannen wenn parent flex ist */
    width: max-content;
}
.tc-badge.tc-badge-recurring svg {
    width: 12px;
    height: 12px;
    margin-right: 0;             /* gap übernimmt das Spacing */
    flex-shrink: 0;
}
.tc-badge.tc-badge-recurring.paused {
    color: rgb(255, 152, 0);
    background: rgba(255, 152, 0, 0.12);
}

/* Paused Badge in Sidebar */
.td-sb-paused-badge {
    font-size: 11px;
    font-weight: 600;
    color: rgb(255, 152, 0);
    background: rgba(255, 152, 0, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
}

/* Recurring Parent Link */
.td-recurring-link {
    color: rgb(0, 170, 255) !important;
    text-decoration: none;
    cursor: pointer;
}
.td-recurring-link:hover {
    text-decoration: underline;
}

/* Mobile Responsive: Recurring Popover — slide from right like other panels */
@media (max-width: 768px) {
    body.project-page .rc-popover {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 9999;
        box-shadow: none;
        background: rgb(242, 244, 246) !important;
        transform: translateX(100%);
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0 !important;
        padding-bottom: var(--safe-bottom) !important;
    }
    body.project-page .rc-popover.open {
        transform: translateX(0);
        pointer-events: auto;
    }
    body.project-page .rc-popover .rc-popover-header {
        display: none;
    }
    body.project-page .rc-popover .fp-nav {
        display: flex;
    }
    body.project-page .rc-popover .rc-popover-body {
        flex: 1;
        padding: 16px;
        overflow-y: auto;
    }
}

/* ===== READ-RECEIPTS: AUFGABE GESEHEN / KOMMENTAR GELESEN ===== */

.td-seen-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
}

.td-seen-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    color: rgb(138, 148, 153);
    line-height: 1;
}

.td-seen-badge:hover {
    background: rgba(0, 0, 0, 0.03);
}

.td-seen-badge[data-active="1"] {
    color: rgb(0, 170, 255);
    border-color: rgba(0, 170, 255, 0.35);
    background: rgba(0, 170, 255, 0.08);
}

.td-seen-badge[data-active="1"]:hover {
    background: rgba(0, 170, 255, 0.14);
}

.td-seen-checks {
    flex: none;
}

/* Popover (gemeinsam für Task-Header und Comment-Indicator)
   Hinweis: z-index muss über dem Task-Modal (.modal z-index:1000) liegen,
   da das Comment-Popover direkt an document.body angehängt wird (Sibling des Modals). */
.seen-popover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    width: 280px;
    max-height: 360px;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.08) 0 0 0 1px,
                rgba(0, 0, 0, 0.12) 0 8px 24px -4px;
    z-index: 1100;
    flex-direction: column;
    overflow: hidden;
}

.seen-popover.open {
    display: flex;
}

.seen-popover .ap-header {
    padding: 12px 16px;
    font-weight: 600;
    color: rgb(61, 71, 77);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgb(225, 228, 230);
}

.seen-popover .ap-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
}

.seen-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: default;
}

.seen-user-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

.seen-user-row .ap-user-name {
    flex: 1;
    color: rgb(61, 71, 77);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seen-user-row .ap-user-time {
    flex: none;
    color: rgb(138, 148, 153);
    font-size: 12px;
    margin-left: 8px;
}

.seen-empty {
    padding: 16px;
    color: rgb(138, 148, 153);
    font-size: 13px;
    text-align: center;
}

/* Comment-Seen-Indicator (kleiner Button neben Löschen) */
.td-activity-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.td-comment-seen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: rgb(138, 148, 153);
    border-radius: 4px;
    line-height: 1;
}

.td-comment-seen:hover {
    background: rgba(0, 0, 0, 0.05);
}

.td-comment-seen[data-active="1"] {
    color: rgb(0, 170, 255);
}

.comment-seen-popover {
    position: fixed;
}

/* Mobile: Popover als Full-Page-Sheet (analog assignee-popover) */
@media (max-width: 768px) {
    .seen-popover.open {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: none;
        margin-top: 0;
        border-radius: 0;
        z-index: 1000;
    }
    .seen-popover .ap-list {
        max-height: none;
        flex: 1;
    }
}

/* ═══════════════════════════════════════════════════
   Dark Mode — AI Chat
   ═══════════════════════════════════════════════════ */
body.dark-mode .ai-sidebar {
    background: #1e2226;
    border-right-color: #2e3338;
}
body.dark-mode .ai-sidebar-header,
body.dark-mode .ai-sidebar-footer {
    border-color: #2e3338;
}
body.dark-mode .ai-conv-item { color: var(--mt-text); }
body.dark-mode .ai-conv-item:hover { background: rgba(255, 255, 255, 0.05); }
body.dark-mode .ai-conv-item.ai-conv-active {
    background: rgba(0, 170, 255, 0.12);
}
body.dark-mode .ai-conv-title { color: var(--mt-text); }
body.dark-mode .ai-conv-meta,
body.dark-mode .ai-conv-snippet { color: var(--mt-muted); }
body.dark-mode .ai-conv-search input,
body.dark-mode .ai-conv-search-input {
    background: #15181a;
    border-color: #2e3338;
    color: var(--mt-text);
}

body.dark-mode .ai-chat-main {
    background: #1a1d21;
}
body.dark-mode .ai-chat-header {
    background: #1e2226;
    border-bottom-color: #2e3338;
}
body.dark-mode .ai-empty-state { color: var(--mt-text); }
body.dark-mode .ai-empty-title { color: var(--mt-text); }
body.dark-mode .ai-empty-subtitle { color: var(--mt-muted); }

body.dark-mode .ai-mobile-back-btn { color: var(--mt-text); }
body.dark-mode .ai-mobile-back-btn:hover { background: rgba(255, 255, 255, 0.06); }

body.dark-mode .ai-model-select {
    background: #15181a;
    border-color: #2e3338;
    color: var(--mt-text);
}

body.dark-mode .ai-action-btn { color: var(--mt-muted); }
body.dark-mode .ai-action-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--mt-text);
}
body.dark-mode .ai-action-btn-danger:hover {
    color: #ff6b6b;
    background: rgba(255, 0, 0, 0.1);
}

body.dark-mode .ai-header-cost {
    background: rgba(255, 255, 255, 0.04);
    border-color: #2e3338;
    color: var(--mt-muted);
}

/* Messages */
body.dark-mode .ai-messages { background: #1a1d21; }
body.dark-mode .ai-message,
body.dark-mode .ai-msg-content { color: var(--mt-text); }
body.dark-mode .ai-msg-author { color: var(--mt-text); }
body.dark-mode .ai-msg-time { color: var(--mt-muted); }
body.dark-mode .ai-msg-bubble {
    background: #1e2226;
    border-color: #2e3338;
    color: var(--mt-text);
}
body.dark-mode .ai-msg-user .ai-msg-bubble {
    background: rgba(0, 170, 255, 0.12);
    border-color: rgba(0, 170, 255, 0.25);
}
body.dark-mode .ai-msg-content code {
    background: rgba(255, 255, 255, 0.07);
    color: #e8b86c;
}
body.dark-mode .ai-msg-content pre {
    background: #15181a;
    border: 1px solid #2e3338;
}
body.dark-mode .ai-msg-content pre code {
    background: transparent;
    color: var(--mt-text);
}
body.dark-mode .ai-msg-content blockquote {
    border-left-color: #2e3338;
    color: var(--mt-muted);
}
body.dark-mode .ai-msg-content th {
    background: rgba(255, 255, 255, 0.04);
    color: var(--mt-text);
}
body.dark-mode .ai-msg-content table,
body.dark-mode .ai-msg-content th,
body.dark-mode .ai-msg-content td {
    border-color: #2e3338;
}
body.dark-mode .ai-msg-content a { color: var(--mt-blue); }
body.dark-mode .ai-msg-content hr { border-color: #2e3338; }

/* Tool-Calls / Debug-Bubbles */
body.dark-mode .ai-tool-call {
    background: rgba(255, 255, 255, 0.03);
    border-color: #2e3338;
}
body.dark-mode .ai-tool-call-name { color: var(--mt-text); }
body.dark-mode .tool-debug-panel {
    background: rgba(255, 255, 255, 0.03);
    border-color: #2e3338;
}
body.dark-mode .tool-debug-panel-header { color: var(--mt-text); }
body.dark-mode .tool-debug-item {
    background: #15181a;
    border-color: #2e3338;
}
body.dark-mode .tool-debug-item-header { color: var(--mt-text); }
body.dark-mode .tool-debug-section-title { color: var(--mt-muted); }
body.dark-mode .tool-debug-section pre {
    background: #0f1113;
    color: var(--mt-text);
    border: 1px solid #2e3338;
}

/* Input area */
body.dark-mode .ai-input-area {
    background: #1e2226;
    border-top-color: #2e3338;
}
body.dark-mode .ai-input-wrap {
    background: #15181a;
    border-color: #2e3338;
}
body.dark-mode .ai-input-wrap:focus-within {
    border-color: var(--mt-blue);
    box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.18);
}
body.dark-mode .ai-message-input {
    color: var(--mt-text);
}
body.dark-mode .ai-message-input::placeholder {
    color: var(--mt-muted);
}
body.dark-mode .ai-attach-btn { color: var(--mt-muted); }
body.dark-mode .ai-attach-btn:hover {
    background: rgba(0,170,255,0.12);
    color: var(--mt-blue);
}

/* Tools-Panel */
body.dark-mode .ai-tools-panel {
    background: #1e2226;
    border-bottom-color: #2e3338;
}
body.dark-mode .ai-tools-panel-header {
    border-bottom-color: #2e3338;
}
body.dark-mode .ai-tools-panel-title { color: var(--mt-text); }
body.dark-mode .ai-tools-panel-subtitle { color: var(--mt-muted); }
body.dark-mode .ai-tools-empty { color: var(--mt-muted); }
body.dark-mode .ai-tools-panel-close { color: var(--mt-muted); }
body.dark-mode .ai-tools-panel-close:hover {
    background: rgba(255,255,255,0.06);
    color: var(--mt-text);
}

/* "Neuer Chat"-Button + Plus-Icons */
body.dark-mode .ai-new-chat-btn {
    background: var(--mt-blue);
    color: #fff;
}
body.dark-mode .ai-new-chat-btn:hover {
    background: rgb(0, 145, 220);
}

/* Typing-Indicator */
body.dark-mode .ai-typing-indicator { color: var(--mt-muted); }

/* Scrollbar in Dark */
body.dark-mode .ai-messages::-webkit-scrollbar-thumb,
body.dark-mode .ai-conv-list::-webkit-scrollbar-thumb {
    background: #2e3338;
}
body.dark-mode .ai-messages::-webkit-scrollbar-thumb:hover,
body.dark-mode .ai-conv-list::-webkit-scrollbar-thumb:hover {
    background: #3d4248;
}

/* ═══════════════════════════════════════════════════
   Mobile Dashboard / Home
   ═══════════════════════════════════════════════════ */

/* "Mobile-only"-Sidebar-Item: auf Desktop verstecken */
.nav-item-mobile-only { display: none; }

/* Auf Mobile: home-page nutzt das gleiche Layout-Pattern wie Projekte
   (.app-projects als fixed Container, .app-page-title etc.) */
@media (max-width: 768px) {
    .nav-item-mobile-only { display: block; }

    body.home-page {
        background: var(--mt-bg);
    }

    /* Container wie auf der Projekte-Seite (fixed unter hk-navbar) */
    body.home-page .home-page-wrap {
        display: block;
        position: fixed;
        top: 65px;
        left: 0;
        right: 0;
        bottom: var(--bottom-nav-height);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background: var(--mt-bg);
        padding-bottom: 16px;
    }

    /* Kein zusätzlicher Top-Abstand über dem Titel (Navbar ist direkt darüber) */
    body.home-page .app-page-title {
        padding-top: 8px;
        padding-bottom: 14px;
    }

    /* Standard main-content auf der Home-Seite ausblenden (Desktop-Layout) */
    body.home-page .main-content {
        display: none;
    }
}

/* ── Stat-Kacheln (3-Spalten-Grid, gleiche Margins wie .app-group-card) ── */
.home-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 16px 16px;
    position: relative;
    z-index: 2;
}
.home-stat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 12px;
    background: #fff;
    border: 1px solid var(--mt-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--mt-text);
    transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.home-stat-card:active {
    transform: scale(0.98);
    background: rgb(248, 250, 252);
    border-color: var(--mt-blue, rgb(0, 170, 255));
}
.home-stat-card--static { cursor: default; }
.home-stat-card--static:active { transform: none; background: #fff; border-color: var(--mt-border); }
.home-stat-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mt-blue, rgb(0, 170, 255));
}
.home-stat-label {
    font-size: 11px;
    color: var(--mt-muted);
    line-height: 1.25;
    flex: 1;
    overflow: hidden;
}
.home-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--mt-text);
    line-height: 1;
}

/* ── Sektion „Letzte Aufgaben" (nutzt .app-group-card als Container) ── */
.home-section-bar {
    height: 4px;
    background: var(--mt-blue, rgb(0, 170, 255));
}
.home-section-header {
    padding: 14px 16px 8px;
}
.home-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mt-text);
}

/* ── Aufgaben-Liste (Items im app-project-item-Stil) ── */
.home-tasks-list {
    display: flex;
    flex-direction: column;
}
.home-tasks-empty {
    padding: 18px 16px;
    text-align: center;
    color: var(--mt-muted);
    font-size: 14px;
}
.home-tasks-error { color: #d63031; }

.home-task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid rgb(240, 242, 244);
    text-decoration: none;
    color: var(--mt-text);
    transition: background 0.1s;
}
.home-task-row:active {
    background: rgb(248, 250, 252);
}

.home-task-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--mt-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-task-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.home-task-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.home-task-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.home-task-meta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgb(240, 243, 246);
    color: var(--mt-muted);
    flex-shrink: 0;
}

/* Auf Desktop noch nicht aktiv → Container ausblenden */
@media (min-width: 769px) {
    body.home-page .home-page-wrap {
        display: none;
    }
}

/* ── Dark Mode ── */
body.dark-mode .home-stat-card {
    background: #1e2226;
    border-color: #2e3338;
}
body.dark-mode .home-stat-card:active {
    background: #2a2e33;
}
body.dark-mode .home-task-row {
    border-top-color: #2e3338;
}
body.dark-mode .home-task-row:active {
    background: rgba(255,255,255,0.04);
}
body.dark-mode .home-task-meta-badge {
    background: rgba(255,255,255,0.06);
}

/* ===== COMPOSER TOOLBAR (Verlinkungen) =====
   Schwebt über der mobilen Tastatur bzw. über dem Input auf Desktop.
   Wird per JS positioniert (position: fixed) — Sichtbarkeit via .visible. */
.composer-toolbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    gap: 18px;
    padding: 8px 16px;
    background: rgb(245, 247, 248);
    border-top: 1px solid rgb(225, 228, 230);
    z-index: 10010;
}
.composer-toolbar.visible {
    display: flex;
}
.composer-toolbar .ct-btn {
    background: none;
    border: none;
    padding: 4px;
    color: rgb(138, 148, 153);
    cursor: pointer;
    line-height: 1;
    border-radius: 4px;
}
.composer-toolbar .ct-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: rgb(61, 71, 77);
}
.composer-toolbar .ct-btn[data-active="1"] {
    color: rgb(0, 170, 255);
}
@media (min-width: 769px) {
    /* Desktop: kompakter, am Composer angedockt — wird per JS direkt überm Input positioniert */
    .composer-toolbar {
        position: absolute;
        left: auto;
        right: auto;
        bottom: auto;
        border-radius: 8px;
        border: 1px solid rgb(225, 228, 230);
        padding: 6px 12px;
        gap: 14px;
        box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px -2px;
    }
}

/* ===== LINK PICKER SHEET ===== */
.link-picker {
    display: none;
    position: fixed;
    z-index: 10020;
    background: #fff;
    flex-direction: column;
    overflow: hidden;
}
.link-picker.open {
    display: flex;
}
.link-picker .lp-header {
    padding: 14px 16px;
    border-bottom: 1px solid rgb(225, 228, 230);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
}
.link-picker .lp-title {
    font-weight: 600;
    color: rgb(61, 71, 77);
}
.link-picker .lp-tabs {
    display: flex;
    border-bottom: 1px solid rgb(225, 228, 230);
    flex: none;
}
.link-picker .lp-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 12px 16px;
    color: rgb(138, 148, 153);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}
.link-picker .lp-tab.active {
    color: rgb(0, 170, 255);
    border-bottom-color: rgb(0, 170, 255);
}
.link-picker .lp-search {
    padding: 12px 16px;
    border-bottom: 1px solid rgb(225, 228, 230);
    flex: none;
}
.link-picker .lp-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}
.link-picker .lp-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.lp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgb(240, 242, 244);
}
.lp-row:hover {
    background: rgba(0, 0, 0, 0.03);
}
.lp-row[data-disabled="1"] {
    opacity: 0.4;
    cursor: not-allowed;
}
.lp-row .lp-row-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgb(240, 242, 244);
    object-fit: cover;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(138, 148, 153);
}
.lp-row .lp-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.lp-row .lp-row-body {
    flex: 1;
    min-width: 0;
}
.lp-row .lp-row-title {
    color: rgb(61, 71, 77);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-row .lp-row-sub {
    color: rgb(138, 148, 153);
    font-size: 12px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-row .lp-row-hint {
    color: rgb(208, 31, 46);
    font-size: 11px;
    margin-top: 2px;
}
.lp-tab-content[data-lp-content="new"] {
    padding: 16px;
}
.lp-new-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 12px;
    outline: none;
}
.lp-new-submit {
    width: 100%;
    padding: 10px 16px;
    background: rgb(0, 170, 255);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.lp-new-submit:hover {
    background: rgb(0, 150, 230);
}
.lp-upload-btn {
    margin: 12px 16px;
    padding: 10px 16px;
    background: rgb(245, 247, 248);
    color: rgb(61, 71, 77);
    border: 1px dashed rgb(180, 190, 195);
    border-radius: 6px;
    width: calc(100% - 32px);
    cursor: pointer;
    font-size: 14px;
}
.lp-upload-btn:hover {
    background: rgba(0, 170, 255, 0.06);
    border-color: rgb(0, 170, 255);
    color: rgb(0, 170, 255);
}

/* Mobile: Full-Page-Sheet */
@media (max-width: 768px) {
    .link-picker.open {
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 100%;
    }
}
/* Desktop: kleines Floating-Sheet */
@media (min-width: 769px) {
    .link-picker.open {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 420px;
        max-height: 70vh;
        border-radius: 12px;
        box-shadow: rgba(0, 0, 0, 0.12) 0 8px 24px -4px,
                    rgba(0, 0, 0, 0.08) 0 0 0 1px;
    }
}

/* ===== CHIPS für Verlinkungen ===== */
.cl-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin: 4px 4px 0 0;
    background: rgba(0, 170, 255, 0.08);
    border: 1px solid rgba(0, 170, 255, 0.25);
    border-radius: 999px;
    font-size: 12px;
    color: rgb(0, 130, 200);
    cursor: pointer;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cl-link-chip:hover {
    background: rgba(0, 170, 255, 0.14);
}
.cl-link-chip .cl-chip-icon {
    flex: none;
    color: currentColor;
}
.cl-link-chip .cl-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cl-link-chip .cl-chip-remove {
    background: none;
    border: none;
    padding: 0 0 0 4px;
    color: rgb(138, 148, 153);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.cl-link-chip .cl-chip-remove:hover {
    color: rgb(208, 31, 46);
}
/* Container für Chips am Checklisten-Item */
.cl-item-links {
    margin-left: 32px;
    margin-top: 2px;
    margin-bottom: 6px;
}
.cl-item.completed .cl-link-chip {
    opacity: 0.6;
}

/* Inline-Anhänge im Kommentar */
.td-comment-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.td-comment-att-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgb(245, 247, 248);
    border: 1px solid rgb(225, 228, 230);
    border-radius: 6px;
    font-size: 12px;
    color: rgb(61, 71, 77);
    cursor: pointer;
    max-width: 240px;
}
.td-comment-att-chip:hover {
    background: rgb(235, 237, 240);
}
.td-comment-att-chip img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
    flex: none;
}
.td-comment-att-chip .att-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pending-Chips im Kommentar-Composer (vor dem Posten) */
.td-comment-pending {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px 0;
}
.td-comment-pending.visible {
    display: flex;
}
.td-comment-pending .cl-link-chip,
.td-comment-pending .td-comment-att-chip {
    cursor: default;
}

/* ===== KOMMENTAR-HEADER-ROW (Name + Hover-Aktionen rechts) ===== */
.td-activity-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.td-activity-header-row .td-activity-text {
    flex: 1;
    min-width: 0;
}
.td-activity-actions {
    display: flex;
    gap: 4px;
    flex: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}
.td-activity-entry:hover .td-activity-actions,
.td-activity-actions:focus-within {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.12s ease, visibility 0s linear 0s;
}
@media (max-width: 768px) {
    .td-activity-actions {
        opacity: 1;
        visibility: visible;
    }
}
.td-activity-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgb(138, 148, 153);
    cursor: pointer;
    line-height: 1;
}
.td-activity-action:hover {
    background: rgba(0, 0, 0, 0.05);
    color: rgb(61, 71, 77);
}

/* ===== REPLY-QUOTE INNERHALB EINES KOMMENTARS ===== */
.td-comment-reply-quote {
    margin-bottom: 8px;
    padding: 6px 10px;
    border-left: 3px solid rgb(0, 170, 255);
    background: rgba(0, 170, 255, 0.04);
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background 0.12s;
}
.td-comment-reply-quote:hover {
    background: rgba(0, 170, 255, 0.08);
}
.td-comment-reply-quote-author {
    color: rgb(0, 130, 200);
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 2px;
}
.td-comment-reply-quote-content {
    color: rgb(138, 148, 153);
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Reply-Preview im Composer (vor dem Posten) */
.cr-reply-preview {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-left: 3px solid rgb(0, 170, 255);
    background: rgba(0, 170, 255, 0.05);
    border-radius: 0 6px 6px 0;
}
.cr-reply-preview-body {
    flex: 1;
    min-width: 0;
}
.cr-reply-preview-author {
    color: rgb(0, 130, 200);
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 2px;
}
.cr-reply-preview-content {
    color: rgb(138, 148, 153);
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cr-reply-preview-close {
    flex: none;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: rgb(138, 148, 153);
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.cr-reply-preview-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: rgb(61, 71, 77);
}

/* ===== EMOJI-REAKTIONEN AUF KOMMENTAREN ===== */
.td-comment-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.cr-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgb(245, 247, 248);
    border: 1px solid rgb(225, 228, 230);
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    user-select: none;
    position: relative;
}
.cr-chip:hover {
    background: rgb(235, 240, 245);
}
.cr-chip[data-me="1"] {
    background: rgba(0, 170, 255, 0.1);
    border-color: rgba(0, 170, 255, 0.4);
}
.cr-chip[data-me="1"]:hover {
    background: rgba(0, 170, 255, 0.18);
}
.cr-chip .cr-emoji {
    font-size: 14px;
    line-height: 1;
    /* Korrekte Emoji-Darstellung in allen Browsern */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}
.cr-chip .cr-count {
    color: rgb(61, 71, 77);
    font-weight: 500;
    font-size: 12px;
}
.cr-chip[data-me="1"] .cr-count {
    color: rgb(0, 130, 200);
}
.cr-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background: transparent;
    border: 1px dashed rgb(200, 205, 208);
    border-radius: 999px;
    color: rgb(138, 148, 153);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
}
.cr-add-btn:hover {
    border-color: rgb(0, 170, 255);
    color: rgb(0, 170, 255);
    background: rgba(0, 170, 255, 0.05);
}
.cr-add-btn svg {
    width: 14px;
    height: 14px;
}

/* Hover-Tooltip mit User-Liste */
.cr-tooltip {
    position: fixed;
    z-index: 10500;
    background: rgb(36, 41, 46);
    color: #fff;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: rgba(0, 0, 0, 0.25) 0 4px 12px -2px;
    max-width: 240px;
    pointer-events: none;
    white-space: normal;
}
.cr-tooltip-emoji {
    font-size: 16px;
    margin-right: 6px;
    vertical-align: middle;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}
.cr-tooltip-users {
    color: rgba(255, 255, 255, 0.95);
}
.cr-tooltip-users .cr-tooltip-user {
    display: block;
    padding: 1px 0;
}
.cr-tooltip::after {
    /* kleines Pfeil-Dreieck nach unten */
    content: '';
    position: absolute;
    left: 12px;
    bottom: -5px;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgb(36, 41, 46);
}
.cr-tooltip[data-position="below"]::after {
    bottom: auto;
    top: -5px;
    border-top: none;
    border-bottom: 5px solid rgb(36, 41, 46);
}

/* ===== KOMMENTAR BEARBEITEN ===== */

/* "(bearbeitet)"-Badge im Aktivitäts-Datum */
.td-activity-edited {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 500;
    color: rgb(138, 148, 153);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.td-activity-edited:hover {
    color: rgb(0, 130, 200);
    text-decoration: underline;
}

/* Inline-Edit-Box (Desktop): ersetzt die Bubble */
.td-comment-edit-box {
    margin-top: 14px;
    background: #fff;
    border: 1px solid rgb(0, 170, 255);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(0, 170, 255, 0.12) 0 0 0 3px;
}
.td-comment-edit-textarea {
    width: 100%;
    min-height: 90px;
    max-height: 400px;
    padding: 12px 16px;
    border: none;
    outline: none;
    resize: none;
    font-family: inherit;
    font-size: 15px;
    line-height: 22px;
    color: rgb(61, 71, 77);
    background: transparent;
    box-sizing: border-box;
}
.td-comment-edit-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid rgb(235, 238, 240);
    background: #fff;
}
.td-comment-edit-toolbar .td-emoji-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgb(138, 148, 153);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.td-comment-edit-toolbar .td-emoji-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: rgb(61, 71, 77);
}
.td-comment-edit-fmt {
    color: rgb(0, 130, 200);
    text-decoration: none;
    font-size: 13px;
}
.td-comment-edit-fmt:hover { text-decoration: underline; }
.td-comment-edit-cancel,
.td-comment-edit-save {
    padding: 7px 16px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid rgb(0, 170, 255);
    background: #fff;
    color: rgb(0, 130, 200);
}
.td-comment-edit-cancel:hover {
    background: rgba(0, 170, 255, 0.06);
}
.td-comment-edit-save {
    background: rgb(0, 170, 255);
    color: #fff;
}
.td-comment-edit-save:hover {
    background: rgb(0, 150, 230);
}
.td-comment-edit-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Original-Overlay (Admin sieht ursprünglichen Kommentar) */
.comment-orig-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.comment-orig-overlay.open {
    display: flex;
}
.comment-orig-card {
    width: min(540px, calc(100% - 24px));
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.18) 0 12px 32px -8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.comment-orig-head {
    padding: 14px 16px;
    border-bottom: 1px solid rgb(225, 228, 230);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.comment-orig-title {
    font-weight: 600;
    color: rgb(61, 71, 77);
}
.comment-orig-meta {
    padding: 10px 16px;
    color: rgb(138, 148, 153);
    font-size: 12px;
    border-bottom: 1px solid rgb(235, 238, 240);
}
.comment-orig-edited {
    margin-top: 4px;
    color: rgb(180, 100, 0);
}
.comment-orig-body {
    padding: 16px;
    color: rgb(61, 71, 77);
    font-size: 14px;
    line-height: 1.5;
    overflow-y: auto;
    white-space: pre-wrap;
}


/* ===== QUICK-CREATE-TASK DIALOG (project.php + mytasks.php) ===== */
.qct-overlay.show {
    align-items: center;
    padding: 20px;
}

.qct-dialog {
    width: min(540px, calc(100% - 24px));
    background: #fff;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.18) 0 12px 40px;
    padding: 22px 22px 18px;
    position: relative;
    flex-shrink: 0;
}

.qct-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.qct-title {
    font-size: 18px;
    font-weight: 700;
    color: rgb(34, 41, 46);
    margin: 0;
}

.qct-close-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: rgb(138, 148, 153);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.qct-close-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: rgb(34, 41, 46);
}

.qct-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.qct-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qct-field label {
    font-size: 13px;
    font-weight: 600;
    color: rgb(61, 71, 77);
}

.qct-field input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgb(220, 225, 228);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: rgb(34, 41, 46);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.qct-field input[type="text"]:focus {
    outline: none;
    border-color: rgb(0, 170, 255);
    box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.18);
}

.qct-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Custom Picker (Project / Column / Pin) – Stil orientiert sich an Assignee/Pin-Popover */
.qct-picker {
    position: relative;
}

.qct-picker-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 8px;
    border: 1px solid rgb(220, 225, 228);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-family: inherit;
    color: rgb(34, 41, 46);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
    height: 42px;
    box-sizing: border-box;
}

.qct-picker-trigger:hover {
    border-color: rgb(180, 188, 195);
}

.qct-picker.open .qct-picker-trigger,
.qct-picker-trigger:focus-visible {
    outline: none;
    border-color: rgb(0, 170, 255);
    box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.18);
}

.qct-picker-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgb(220, 225, 228);
}

.qct-picker-icon svg {
    width: 14px;
    height: 14px;
}

.qct-picker-icon:empty {
    background: rgb(235, 238, 240);
}

.qct-picker-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgb(34, 41, 46);
    font-weight: 500;
}

.qct-picker-label.qct-picker-placeholder {
    color: rgb(138, 148, 153);
    font-weight: 400;
}

.qct-picker-chevron {
    flex-shrink: 0;
    color: rgb(138, 148, 153);
    transition: transform 0.15s;
}

.qct-picker.open .qct-picker-chevron {
    transform: rotate(180deg);
}

/* Popover */
.qct-picker-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 240px;
    z-index: 50;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.08) 0 0 0 1px, rgba(0, 0, 0, 0.12) 0 8px 24px -4px;
    overflow: hidden;
}

.qct-picker.open .qct-picker-popover {
    display: block;
}

.qct-picker-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 12px 8px;
    padding: 0 12px;
    height: 36px;
    border: 1px solid rgb(225, 228, 230);
    border-radius: 8px;
    background: #fff;
}

.qct-picker-search-icon {
    color: rgb(138, 148, 153);
    flex-shrink: 0;
}

.qct-picker-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: inherit;
    color: rgb(34, 41, 46);
    background: transparent;
}

.qct-picker-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0 8px;
}

.qct-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.1s;
    color: rgb(34, 41, 46);
    font-size: 14px;
}

.qct-picker-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.qct-picker-item.qct-picker-item-active {
    background: rgba(0, 170, 255, 0.08);
}

.qct-picker-item-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgb(138, 148, 153);
}

.qct-picker-item-icon svg {
    width: 13px;
    height: 13px;
}

.qct-picker-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.qct-picker-item-check {
    flex-shrink: 0;
    color: rgb(0, 170, 255);
    width: 16px;
    height: 16px;
    display: none;
}

.qct-picker-item.qct-picker-item-active .qct-picker-item-check {
    display: block;
}

.qct-picker-empty {
    padding: 20px 14px;
    text-align: center;
    color: rgb(138, 148, 153);
    font-size: 13px;
}

/* Title-Row mit Pin-Button rechts */
.qct-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qct-title-row input[type="text"] {
    flex: 1;
    min-width: 0;
}

.qct-pin-wrap {
    flex-shrink: 0;
}

/* Pin-Icon-Button (kleiner als im Task-Detail, passend zum Input) */
.qct-pin-wrap .td-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid rgb(220, 225, 228);
    color: rgb(138, 148, 153);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.qct-pin-wrap .td-icon-btn:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgb(180, 188, 195);
    color: rgb(61, 71, 77);
}

/* Pin-Pill-Button (wenn gepinnt) */
.qct-pin-wrap .td-pin-pill-btn {
    height: 42px;
    padding: 0 14px;
}

.qct-pin-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgb(61, 71, 77);
    cursor: pointer;
    user-select: none;
    font-weight: 500;
}

.qct-pin-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: rgb(0, 170, 255);
}

.qct-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.qct-submit {
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
}

.qct-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Trigger-Button im Header (Desktop): nutzt .btn .btn-primary, hier nur Layout-Anpassungen */
.pnav-add-task-btn {
    height: 32px;
    padding: 0 16px;
    font-size: 13px;
    margin-right: 12px;
}

/* Mobile: Button ausblenden, nutzt stattdessen FAB */
@media (max-width: 768px) {
    .pnav-add-task-btn {
        display: none;
    }

    .qct-dialog {
        width: calc(100% - 24px);
        padding: 18px;
    }

    .qct-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ============================================================
   Web Share Target — share.php Auswahl-Dialog
   ============================================================ */

body.share-target-page {
    margin: 0;
    background: rgba(20, 24, 26, 0.55);
    min-height: 100vh;
    min-height: 100dvh;
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    color: #15181a;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.share-target-hidden-input {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
}

.share-target-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: transparent;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.share-target-sheet {
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 22px;
    padding: 22px 22px 18px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    animation: shareSheetIn 0.18s ease-out;
}

@keyframes shareSheetIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.share-target-busy { pointer-events: none; opacity: 0.65; }

.share-target-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.share-target-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #15181a;
}

.share-target-close {
    background: #f1f3f5;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7177;
    transition: background 0.15s;
}

.share-target-close:hover {
    background: #e6e9ec;
    color: #15181a;
}

.share-target-preview {
    background: #f7f8f9;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13.5px;
    color: #4a5057;
    border: 1px solid #ebeef0;
}

.share-target-preview-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
    word-break: break-word;
}

.share-target-preview-row--text { font-style: italic; }

.share-target-preview-icon {
    flex-shrink: 0;
    color: #8a9499;
    margin-top: 1px;
}

.share-target-preview-url {
    color: #2563eb;
    word-break: break-all;
}

.share-target-preview-text {
    white-space: pre-wrap;
}

.share-target-option {
    width: 100%;
    background: #f1f3f5;
    border: none;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 17px;
    font-weight: 500;
    color: #15181a;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, transform 0.05s;
    font-family: inherit;
}

.share-target-option:hover {
    background: #e6e9ec;
}

.share-target-option:active {
    transform: scale(0.99);
    background: #dde1e4;
}

.share-target-option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.share-target-option-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #15181a;
}

.share-target-option-label {
    flex: 1;
}

.share-target-status {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
}

.share-target-status--info {
    background: #eef4ff;
    color: #1d4ed8;
}

.share-target-status--error {
    background: #fee4e2;
    color: #b42318;
}

/* Desktop: Sheet zentrieren statt unten */
@media (min-width: 769px) {
    .share-target-overlay {
        align-items: center;
    }
}

/* iOS PWA: Sicheres Standalone-Layout */
@media (display-mode: standalone) {
    body.share-target-page {
        background: #15181a;
    }
}

/* ===== Board Sidebar (Rechte Sidebar: Mitglieder + Filter) ===== */

.board-sidebar {
    position: fixed;
    top: 125px;
    right: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.project-view.main-content {
    right: 80px;
    overflow-x: auto;
    overflow-y: hidden;
}

body.project-page .kanban-board {
    height: 100%;
    min-height: 0;
}

body.project-page .kanban-column {
    height: 100%;
}

body.project-page .task-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
body.project-page .task-list::-webkit-scrollbar {
    width: 4px;
}
body.project-page .task-list::-webkit-scrollbar-track {
    background: transparent;
}
body.project-page .task-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}
body.project-page .task-list::-webkit-scrollbar-thumb:hover {
    background: #b0b5ba;
}

.bs-filter-panel {
    position: fixed;
    top: 125px;
    right: 80px;
    bottom: 0;
    width: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #1e2124;
    color: #e5e7eb;
    display: none;
    flex-direction: column;
    border-left: 1px solid #2d3136;
    z-index: 99;
}

.bs-filter-panel.open {
    display: flex;
}

.bs-icons {
    width: 80px;
    flex: 1;
    background: #2b2e33;
    border-left: 1px solid #23262b;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.bs-icons::-webkit-scrollbar {
    display: none;
}

.bs-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.bs-icon-btn:hover {
    background: #3a3f47;
    color: #e5e7eb;
}
.bs-icon-btn.active {
    background: rgba(0, 170, 255, 0.15);
    color: var(--mt-blue);
}

.bs-divider {
    width: 32px;
    height: 1px;
    background: #3a3f47;
    margin: 4px 0;
    flex-shrink: 0;
}

/* Member avatars in sidebar */
.bs-members-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 2px 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.bs-members-list::-webkit-scrollbar {
    display: none;
}

.bs-member-item {
    position: relative;
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 4px 0 2px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.bs-member-item:hover {
    background: #3a3f47;
}
.bs-member-item.active {
    background: rgba(0, 170, 255, 0.15);
}

.bs-member-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.bs-member-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    object-fit: cover;
    display: block;
}

.bs-member-initials {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: rgb(138, 148, 153);
}

.bs-member-count {
    position: absolute;
    bottom: -2px;
    right: -4px;
    background: var(--mt-blue);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border: 1.5px solid #2b2e33;
    line-height: 1;
}

.bs-member-name {
    font-size: 10px;
    color: #9ca3af;
    text-align: center;
    width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    padding: 0 2px;
}

/* Unassigned item */
.bs-member-item--unassigned .bs-member-initials {
    background: #9ca3af;
}
.bs-member-item--unassigned .bs-member-initials svg {
    opacity: 0.9;
}

/* ===== Filter Panel ===== */

.bs-fp-title {
    font-size: 18px;
    font-weight: 700;
    padding: 16px 16px 12px;
    margin: 0;
    color: #fff;
}

.bs-fp-search {
    margin: 0 12px 14px;
    background: #2d3136;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 8px;
}
.bs-fp-search input {
    flex: 1;
    border: none;
    background: transparent;
    color: #e5e7eb;
    font-size: 13px;
    padding: 9px 0;
    outline: none;
}
.bs-fp-search input::placeholder {
    color: #6b7280;
}

/* Filter sections */
.bs-fp-section {
    padding: 0 12px;
    margin-bottom: 10px;
    position: relative;
}

.bs-fp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
}

.bs-fp-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #d1d5db;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bs-fp-label svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Dropdown button */
.bs-fp-dropdown {
    position: relative;
}
.bs-fp-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #383c42;
    border: none;
    color: #d1d5db;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.bs-fp-dropdown-btn:hover {
    background: #44494f;
}

/* Dropdown menu */
.bs-fp-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #fff;
    color: #1f2937;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    min-width: 160px;
    z-index: 100;
    overflow: hidden;
}
.bs-fp-dropdown-menu.open {
    display: block;
}
.bs-fp-dropdown-item {
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bs-fp-dropdown-item:hover {
    background: #f3f4f6;
}
.bs-fp-dropdown-item.active::after {
    content: '✓';
    font-size: 14px;
    color: #4f46e5;
}

/* Tag pills in filter */
.bs-fp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0 4px;
}
.bs-fp-tag {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.15s;
    color: #fff;
}
.bs-fp-tag.active {
    opacity: 1;
}
.bs-fp-tag:hover {
    opacity: 0.85;
}

/* Popover (for watcher picker, due date, status) */
.bs-fp-popover {
    background: #fff;
    color: #1f2937;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.22);
    margin-top: 8px;
    overflow: hidden;
    z-index: 100;
}
.bs-fp-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
}
.bs-fp-popover-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
    line-height: 1;
    padding: 0 2px;
}
.bs-fp-popover-close:hover {
    color: #111;
}

.bs-fp-popover-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid #f3f4f6;
}
.bs-fp-popover-search input {
    flex: 1;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    outline: none;
    background: #fff;
    color: #1f2937;
}
.bs-fp-popover-search input:focus {
    border-color: #a5b4fc;
}

.bs-fp-popover-list {
    max-height: 260px;
    overflow-y: auto;
}
.bs-fp-popover-item {
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.1s;
}
.bs-fp-popover-item:hover {
    background: #f3f4f6;
}
.bs-fp-popover-item.active {
    background: #eef2ff;
    color: #4f46e5;
    font-weight: 500;
}

.bs-fp-popover-item .bs-fp-popover-avatar {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    flex-shrink: 0;
}
.bs-fp-popover-item .bs-fp-popover-avatar img {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    object-fit: cover;
}
.bs-fp-popover-item .bs-fp-popover-initials {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: rgb(138, 148, 153);
}

/* Filter active indicator badge on filter toggle btn */
.bs-filter-toggle .bs-filter-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    display: none;
}
.bs-filter-toggle.has-filter .bs-filter-badge {
    display: block;
}
.bs-filter-toggle {
    position: relative;
}

/* Sidebar + Filter-Panel sind immer dunkel — keine dark-mode Overrides nötig */

/* Hide sidebar on mobile */
@media (max-width: 768px) {
    .board-sidebar,
    .bs-filter-panel {
        display: none;
    }
    .project-view.main-content {
        right: 0;
        overflow-x: auto;
        overflow-y: auto;
    }
}

/* ═══════════════════════════════════════════════════════════
   Benutzer-Detail-Seite (user-edit.php)
   ═══════════════════════════════════════════════════════════ */
body.user-edit-page {
    background: rgb(244, 246, 248);
}

/* Hauptlayout — eigener Scroll-Container (Body ist auf admin-page overflow:hidden) */
.ue-app-wrap {
    position: fixed;
    top: 65px;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 28px 80px;
    transition: left 0.2s ease;
    z-index: 1;
}
body.sidebar-collapsed .ue-app-wrap { left: 70px; }

/* Header */
.ue-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.ue-header-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
}
.ue-header-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgb(225, 228, 230);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ue-header-avatar .ue-avatar-placeholder {
    font-size: 28px;
}
.ue-header-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.ue-avatar-placeholder {
    font-size: 22px;
    font-weight: 600;
    color: rgb(108, 117, 125);
}
.ue-header-info { min-width: 0; }
.ue-breadcrumb {
    font-size: 12px;
    color: var(--mt-muted);
    margin-bottom: 4px;
}
.ue-breadcrumb a {
    color: var(--mt-blue, rgb(0, 170, 255));
    text-decoration: none;
}
.ue-breadcrumb a:hover { text-decoration: underline; }
.ue-breadcrumb-sep { margin: 0 6px; opacity: 0.6; }
.ue-header-name {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 700;
    color: var(--mt-text);
}
.ue-header-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--mt-muted);
}
.ue-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ue-meta-item svg { opacity: 0.7; }

.ue-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.ue-back-btn { display: inline-flex; align-items: center; gap: 6px; }

/* Content Grid: Main + Sidebar */
.ue-content-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: flex-start;
}
@media (max-width: 1100px) {
    .ue-content-grid { grid-template-columns: 1fr; }
}

.ue-main-col, .ue-side-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Tabs */
.ue-tabs {
    display: flex;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 4px;
    overflow-x: auto;
}
.ue-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--mt-muted);
    font-size: 13px;
    font-weight: 500;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.ue-tab:hover { color: var(--mt-text); }
.ue-tab.active {
    background: var(--mt-blue, rgb(0, 170, 255));
    color: #fff;
}

.ue-tab-panel { display: none; }
.ue-tab-panel.active { display: flex; flex-direction: column; gap: 16px; }

/* Cards */
.ue-card {
    background: #fff;
    border: 1px solid var(--mt-border);
    border-radius: 12px;
    /* KEIN overflow:hidden — sonst werden Dropdowns (Multi-Toggle-Panels)
       am Card-Rand abgeschnitten. Inhalte halten sich von selbst innerhalb. */
}
.ue-card-header {
    padding: 16px 20px 4px;
}
.ue-card-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--mt-text);
}
.ue-card-title-sm {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--mt-text);
}
.ue-card-subtitle {
    margin: 0;
    font-size: 12px;
    color: var(--mt-muted);
}
.ue-card-body { padding: 16px 20px 20px; }

/* Form Grid */
.ue-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 900px) {
    .ue-form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .ue-form-grid { grid-template-columns: 1fr; }
}

.ue-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ue-form-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--mt-muted);
}
.ue-form-group input[type="text"],
.ue-form-group input[type="email"],
.ue-form-group input[type="password"],
.ue-form-group input[type="date"],
.ue-form-group input[type="time"],
.ue-form-group input[type="datetime-local"],
.ue-form-group input[type="tel"],
.ue-form-group input[type="number"],
.ue-form-group input[type="search"],
.ue-form-group input[type="url"],
.ue-form-group select,
.ue-form-group textarea {
    padding: 8px 12px;
    border: 1px solid var(--mt-border);
    border-radius: 7px;
    background: #fff;
    color: var(--mt-text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.ue-form-group textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.45;
}
.ue-form-group input:focus,
.ue-form-group select:focus,
.ue-form-group textarea:focus {
    outline: none;
    border-color: var(--mt-blue, rgb(0, 170, 255));
    box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.12);
}
.ue-form-group input::placeholder,
.ue-form-group textarea::placeholder {
    color: #94a3b8;
}
.ue-form-group input:disabled,
.ue-form-group select:disabled,
.ue-form-group textarea:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    border-color: var(--mt-border);
}
.ue-form-group input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.55;
    cursor: pointer;
}
.ue-form-hint {
    font-size: 11px;
    color: var(--mt-muted);
}

.ue-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    padding: 8px 12px;
    border: 1px solid var(--mt-border);
    border-radius: 7px;
    background: #fff;
}

.ue-password-wrap {
    position: relative;
    display: flex;
}
.ue-password-wrap input { flex: 1; padding-right: 38px; }
.ue-password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--mt-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
}
.ue-password-toggle:hover { color: var(--mt-text); }

.ue-section-divider {
    height: 1px;
    background: var(--mt-border);
    margin: 20px 0;
}
.ue-section-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--mt-muted);
    margin-bottom: 10px;
}

.ue-teams-aad-wrap {
    margin-top: 14px;
}
.ue-teams-aad-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.ue-teams-aad-row input {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--mt-border);
    border-radius: 7px;
    background: #fff;
    font-family: monospace;
    font-size: 12px;
}

/* Avatar-Section */
.ue-avatar-section { }
.ue-avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.ue-avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: rgb(225, 228, 230);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ue-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.ue-avatar-preview .ue-avatar-placeholder { font-size: 28px; }
.ue-avatar-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.ue-btn-danger {
    color: #d63031;
    border-color: rgba(214, 48, 49, 0.3);
}
.ue-btn-danger:hover {
    background: rgba(214, 48, 49, 0.06);
}

/* Permission-Rows (Zugriffe-Tab) */
.ue-perm-row {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr;
    gap: 20px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--mt-border);
}
.ue-perm-row:last-child { border-bottom: none; }
.ue-perm-row-disabled { opacity: 0.7; }
@media (max-width: 800px) {
    .ue-perm-row { grid-template-columns: 1fr; gap: 8px; }
}

.ue-perm-row-label strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--mt-text);
    margin-bottom: 4px;
}
.ue-perm-row-label small {
    font-size: 12px;
    color: var(--mt-muted);
    line-height: 1.4;
}
.ue-perm-placeholder {
    font-size: 13px;
    color: var(--mt-muted);
    font-style: italic;
}

/* Multi-Toggle Dropdown */
.ue-multi-toggle {
    position: relative;
    width: 100%;
}
.ue-multi-toggle-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid var(--mt-border);
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    color: var(--mt-text);
    text-align: left;
    transition: border-color 0.15s;
}
.ue-multi-toggle-btn:hover { border-color: rgb(190, 195, 200); }
.ue-multi-toggle.open .ue-multi-toggle-btn {
    border-color: var(--mt-blue, rgb(0, 170, 255));
    box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.1);
}
.ue-multi-toggle-caret {
    flex-shrink: 0;
    color: var(--mt-muted);
    transition: transform 0.15s;
}
.ue-multi-toggle.open .ue-multi-toggle-caret { transform: rotate(180deg); }
.ue-multi-toggle-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--mt-border);
    border-radius: 7px;
    max-height: 320px;
    overflow: hidden;
    z-index: 50;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    flex-direction: column;
}
.ue-multi-toggle.open .ue-multi-toggle-panel { display: flex; }
.ue-multi-search {
    padding: 8px;
    border-bottom: 1px solid var(--mt-border);
}
.ue-multi-search input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    font-size: 13px;
    background: rgb(248, 250, 252);
}
.ue-multi-actions {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--mt-border);
}
.ue-multi-action {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 12px;
    color: var(--mt-blue, rgb(0, 170, 255));
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 4px;
}
.ue-multi-action:hover { background: rgba(0, 170, 255, 0.06); }
.ue-multi-options {
    overflow-y: auto;
    flex: 1;
    padding: 4px 0;
}
.ue-multi-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--mt-text);
    transition: background 0.1s;
}
.ue-multi-option:hover { background: rgb(248, 250, 252); }
.ue-multi-option input { margin: 0; cursor: pointer; }
.ue-multi-option.is-owner { opacity: 0.7; }
.ue-owner-hint { color: var(--mt-muted); font-size: 11px; }
.ue-multi-empty {
    padding: 16px;
    text-align: center;
    color: var(--mt-muted);
    font-size: 13px;
}

/* Pills (Übersicht) */
.ue-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 700px) { .ue-overview-grid { grid-template-columns: 1fr; } }
.ue-overview-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mt-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.ue-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ue-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgb(238, 242, 246);
    border-radius: 14px;
    font-size: 12px;
    color: var(--mt-text);
}
.ue-pills-empty {
    font-size: 12px;
    color: var(--mt-muted);
    font-style: italic;
}

/* Projekte-Tabelle */
.ue-projects-table-wrap {
    overflow-x: auto;
}
.ue-projects-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ue-projects-table th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 500;
    font-size: 12px;
    color: var(--mt-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--mt-border);
}
.ue-projects-table td {
    padding: 12px;
    border-bottom: 1px solid var(--mt-border);
}
.ue-projects-table tr:last-child td { border-bottom: none; }
.ue-empty {
    text-align: center;
    color: var(--mt-muted);
    padding: 24px !important;
    font-size: 13px;
}
.ue-empty-small { color: var(--mt-muted); }
.ue-role-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    background: rgb(238, 242, 246);
    color: var(--mt-text);
}
.ue-role-owner {
    background: rgba(0, 170, 255, 0.12);
    color: var(--mt-blue, rgb(0, 170, 255));
}
.ue-link-btn {
    background: none;
    border: none;
    color: #d63031;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
}
.ue-link-btn:hover { text-decoration: underline; }

/* Sidebar (Übersicht + Schnellaktionen) */
.ue-info-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ue-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--mt-border);
    font-size: 13px;
}
.ue-info-row:last-child { border-bottom: none; }
.ue-info-label {
    color: var(--mt-muted);
}
.ue-info-value {
    color: var(--mt-text);
    font-weight: 500;
    text-align: right;
}
.ue-status-pill {
    padding: 3px 10px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.ue-quick-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
    color: var(--mt-text);
    text-align: left;
    transition: background 0.15s;
}
.ue-quick-action:hover { background: rgb(248, 250, 252); }
.ue-quick-action svg {
    flex-shrink: 0;
    color: var(--mt-muted);
}
.ue-quick-action-danger { color: #d63031; }
.ue-quick-action-danger svg { color: #d63031; }
.ue-quick-action-danger:hover { background: rgba(214, 48, 49, 0.06); }

/* Empty State */
.ue-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--mt-muted);
}
.ue-empty-state svg {
    color: rgb(190, 195, 200);
    margin-bottom: 12px;
}
.ue-empty-state p {
    margin: 0;
    font-size: 13px;
}

/* Activity Filters */
.ue-activity-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 14px;
    background: rgb(248, 250, 252);
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    margin-bottom: 16px;
}
body.dark-mode .ue-activity-filters {
    background: rgba(255,255,255,0.03);
    border-color: #2e3338;
}
.ue-activity-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.ue-activity-filter-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--mt-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ue-activity-filter-search {
    flex: 1;
    min-width: 180px;
}
.ue-activity-filter-search input {
    padding: 7px 12px;
    border: 1px solid var(--mt-border);
    border-radius: 7px;
    background: #fff;
    font-size: 13px;
    width: 100%;
}
body.dark-mode .ue-activity-filter-search input {
    background: #15181a;
    border-color: #2e3338;
    color: var(--mt-text);
}
.ue-activity-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ue-activity-pill {
    padding: 5px 12px;
    border: 1px solid var(--mt-border);
    border-radius: 50rem;
    background: #fff;
    color: var(--mt-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ue-activity-pill:hover {
    border-color: var(--mt-blue, rgb(0, 170, 255));
    color: var(--mt-blue, rgb(0, 170, 255));
}
.ue-activity-pill.active {
    background: var(--mt-blue, rgb(0, 170, 255));
    border-color: var(--mt-blue, rgb(0, 170, 255));
    color: #fff;
}
body.dark-mode .ue-activity-pill {
    background: #15181a;
    border-color: #2e3338;
    color: var(--mt-text);
}

/* Activity Feed */
.ue-activity-feed {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.ue-activity-day-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--mt-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.ue-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ue-activity-item {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    background: #fff;
}
.ue-activity-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ue-activity-content {
    flex: 1;
    min-width: 0;
}
.ue-activity-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ue-activity-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mt-text);
}
.ue-activity-time {
    font-size: 11px;
    color: var(--mt-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.ue-activity-meta {
    font-size: 12px;
    color: var(--mt-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ue-activity-task-link {
    color: var(--mt-blue, rgb(0, 170, 255));
    text-decoration: none;
}
.ue-activity-task-link:hover { text-decoration: underline; }
.ue-activity-preview {
    margin-top: 6px;
    padding: 8px 12px;
    background: rgb(248, 250, 252);
    border-radius: 7px;
    font-size: 12px;
    color: var(--mt-text);
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.dark-mode .ue-activity-item {
    background: #1e2226;
    border-color: #2e3338;
}
body.dark-mode .ue-activity-preview {
    background: rgba(255,255,255,0.04);
}

/* Footer-Actions */
.ue-footer-actions {
    display: none; /* Top-Buttons reichen auf Desktop */
}

/* Toast */
.ue-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    padding: 10px 18px;
    background: rgba(20, 25, 30, 0.92);
    color: #fff;
    border-radius: 24px;
    font-size: 13px;
    z-index: 10000;
    transition: transform 0.25s ease;
}
.ue-toast.show { transform: translateX(-50%) translateY(0); }

/* Mobile-Anpassungen */
@media (max-width: 768px) {
    body.user-edit-page .mobile-admin-header {
        display: block;
    }
    .ue-app-wrap {
        left: 0;
        top: calc(54px + var(--safe-top));
        padding: 16px 14px 90px;
    }
    .ue-page-header {
        flex-direction: column;
        gap: 12px;
    }
    .ue-header-actions {
        display: none; /* Save liegt im Mobile-Header */
    }
    .ue-content-grid {
        grid-template-columns: 1fr;
    }
    .ue-side-col {
        order: 2;
    }
    .ue-footer-actions {
        display: flex;
        gap: 8px;
        padding: 12px 14px;
        background: #fff;
        border-top: 1px solid var(--mt-border);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
    }
    .ue-footer-actions .btn { flex: 1; }
}

/* Dark Mode */
body.dark-mode.user-edit-page { background: #15181a; }
body.dark-mode .ue-tabs,
body.dark-mode .ue-card {
    background: #1e2226;
    border-color: #2e3338;
}
body.dark-mode .ue-form-group input,
body.dark-mode .ue-form-group select,
body.dark-mode .ue-form-group textarea,
body.dark-mode .ue-checkbox-label,
body.dark-mode .ue-multi-toggle-btn,
body.dark-mode .ue-teams-aad-row input {
    background: #15181a;
    border-color: #2e3338;
    color: var(--mt-text);
}
body.dark-mode .ue-form-group input:disabled,
body.dark-mode .ue-form-group select:disabled,
body.dark-mode .ue-form-group textarea:disabled {
    background: #1a1d20;
    color: #6b7280;
}
body.dark-mode .ue-form-group input::placeholder,
body.dark-mode .ue-form-group textarea::placeholder {
    color: #4b5563;
}
body.dark-mode .ue-multi-toggle-panel {
    background: #1e2226;
    border-color: #2e3338;
}
body.dark-mode .ue-multi-option:hover,
body.dark-mode .ue-quick-action:hover {
    background: rgba(255, 255, 255, 0.04);
}
body.dark-mode .ue-pill {
    background: rgba(255, 255, 255, 0.06);
}

/* ═══════════════════════════════════════════════════════════════
   TELEFONIE
   ═══════════════════════════════════════════════════════════════ */

.tel-connection-card {
    background: var(--mt-white, #fff);
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}
.tel-connection-header {
    display: flex;
    align-items: center;
    gap: 14px;
}
.tel-connection-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(0, 170, 255, 0.08);
    color: var(--mt-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tel-connection-info {
    flex: 1;
    min-width: 0;
}
.tel-connection-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--mt-text);
}
.tel-connection-status {
    font-size: 13px;
    color: var(--mt-muted);
    margin: 0;
}
.tel-connection-status.connected {
    color: #22c55e;
}

/* Automation Card */
.tel-automation-card {
    background: var(--mt-white, #fff);
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
}
.tel-automation-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.tel-automation-info {
    flex: 1;
    min-width: 0;
}
.tel-automation-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--mt-text);
}
.tel-automation-desc {
    font-size: 13px;
    color: var(--mt-muted);
    margin: 0;
    line-height: 1.5;
}

/* Toggle Switch */
.tel-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}
.tel-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.tel-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--mt-border);
    border-radius: 24px;
    transition: background 0.2s;
}
.tel-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.tel-toggle input:checked + .tel-toggle-slider {
    background: var(--mt-blue);
}
.tel-toggle input:checked + .tel-toggle-slider::before {
    transform: translateX(20px);
}
.tel-toggle input:disabled + .tel-toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Automation Settings */
.tel-automation-settings {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--mt-border);
}
.tel-setting-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.tel-setting-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--mt-text);
    min-width: 140px;
    padding-top: 8px;
}

/* Task Picker */
.tel-task-picker {
    flex: 1;
    position: relative;
}

/* Quick-Start Trigger Button */
.tel-qs-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--mt-muted);
    background: var(--mt-white, #fff);
    border: 1px dashed var(--mt-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.tel-qs-trigger:hover,
.tel-qs-trigger.active {
    border-color: var(--mt-blue);
    background: rgba(0, 170, 255, 0.03);
    color: var(--mt-text);
}
.tel-qs-chevron {
    margin-left: auto;
    transition: transform 0.2s;
}
.tel-qs-trigger.active .tel-qs-chevron {
    transform: rotate(180deg);
}

/* Quick-Start Dropdown */
.tel-qs-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--mt-white, #fff);
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    padding: 6px;
}
.tel-qs-dropdown .qs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--mt-text);
    transition: background 0.1s;
}
.tel-qs-dropdown .qs-item:hover {
    background: rgba(0, 170, 255, 0.06);
}
.tel-qs-dropdown .qs-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}
.tel-qs-dropdown .qs-item-content {
    flex: 1;
    min-width: 0;
}
.tel-qs-dropdown .qs-item-title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tel-qs-dropdown .qs-item-project {
    font-size: 12px;
    color: var(--mt-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tel-qs-empty {
    padding: 16px 14px;
    font-size: 13px;
    color: var(--mt-muted);
    text-align: center;
    line-height: 1.5;
}

/* Selected Task */
.tel-selected-task {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(0, 170, 255, 0.06);
    border: 1px solid rgba(0, 170, 255, 0.18);
    border-radius: 8px;
}
.tel-selected-task .qs-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}
.tel-selected-task .qs-item-content {
    flex: 1;
    min-width: 0;
}
.tel-selected-task .qs-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--mt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tel-selected-task .qs-item-project {
    font-size: 12px;
    color: var(--mt-muted);
}
.tel-selected-task-remove {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--mt-muted);
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
.tel-selected-task-remove:hover {
    color: var(--mt-text);
}

/* Listener Status */
.tel-listener-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-top: 16px;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 8px;
    font-size: 13px;
    color: #16a34a;
}
.tel-listener-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: tel-pulse 2s ease-in-out infinite;
}
@keyframes tel-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Call Toast (telefonie.php local toasts) */
.tel-call-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    background: #1e2226;
    color: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    transform: translateX(120%);
    transition: transform 0.3s ease;
    max-width: 360px;
}
.tel-call-toast.show {
    transform: translateX(0);
}
.tel-call-toast--incoming {
    border-left: 4px solid #22c55e;
}
.tel-call-toast--ended {
    border-left: 4px solid var(--mt-blue);
}
.tel-call-toast-icon {
    color: #22c55e;
    flex-shrink: 0;
}
.tel-call-toast--ended .tel-call-toast-icon {
    color: var(--mt-blue);
}
.tel-call-toast-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tel-call-toast-body strong {
    font-size: 14px;
}
.tel-call-toast-body span {
    font-size: 12px;
    opacity: 0.7;
}

/* Global Call Notification (navbar, persistent) */
.sip-call-notif {
    position: fixed;
    top: 78px;
    right: 16px;
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #1e2226;
    color: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    transform: translateX(calc(100% + 32px));
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 400px;
    min-width: 280px;
    pointer-events: auto;
}
.sip-call-notif.show {
    transform: translateX(0);
}
.sip-call-notif--ringing {
    border-left: 4px solid #22c55e;
}
.sip-call-notif--active {
    border-left: 4px solid #f59e0b;
}
.sip-call-notif-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sip-call-notif--ringing .sip-call-notif-icon {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    animation: sip-ring-pulse 1.5s ease-in-out infinite;
}
.sip-call-notif--active .sip-call-notif-icon {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}
@keyframes sip-ring-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
.sip-call-notif-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sip-call-notif-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.sip-call-notif-caller {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sip-call-notif-meta {
    font-size: 12px;
    opacity: 0.6;
}
.sip-call-notif-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mt-blue);
    text-decoration: none;
    transition: opacity 0.15s;
}
.sip-call-notif-link:hover {
    opacity: 0.8;
}
.sip-call-notif-timer {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #f59e0b;
    margin-top: 4px;
}
.sip-call-notif-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    font-size: 16px;
    transition: color 0.15s;
}
.sip-call-notif-close:hover {
    color: #fff;
}

/* Dark Mode Overrides */
body.dark-mode .tel-connection-card,
body.dark-mode .tel-automation-card {
    background: #1e2226;
    border-color: #2e3338;
}
body.dark-mode .tel-qs-trigger {
    background: #15181a;
    border-color: #2e3338;
    color: #8a9499;
}
body.dark-mode .tel-qs-trigger:hover,
body.dark-mode .tel-qs-trigger.active {
    border-color: var(--mt-blue);
    background: rgba(0, 170, 255, 0.06);
    color: #d4d8dd;
}
body.dark-mode .tel-qs-dropdown {
    background: #1e2226;
    border-color: #2e3338;
}
body.dark-mode .tel-qs-dropdown .qs-item:hover {
    background: rgba(255,255,255,0.04);
}
body.dark-mode .tel-selected-task {
    background: rgba(0, 170, 255, 0.1);
    border-color: rgba(0, 170, 255, 0.2);
}

/* ─── Historie ──────────────────────────────────────────── */
.tel-history-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.tel-history-table-wrap {
    overflow: auto;
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    background: var(--mt-white, #fff);
    max-height: calc(100vh - 220px);
}
.tel-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.tel-history-table th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mt-muted);
    border-bottom: 1px solid var(--mt-border);
    white-space: nowrap;
    background: var(--mt-bg, #f8f9fa);
}
.tel-history-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mt-border);
    vertical-align: middle;
    color: var(--mt-text);
}
.tel-history-table tr:last-child td {
    border-bottom: none;
}
.tel-history-table tbody tr:hover {
    background: rgba(0,170,255,0.03);
}
.tel-history-time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.tel-history-mono {
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 12px;
    color: var(--mt-muted);
}
.tel-history-callid {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tel-history-loading {
    text-align: center;
    color: var(--mt-muted);
    padding: 32px 12px !important;
}
.tel-history-unmapped {
    color: #e67700;
    font-size: 12px;
    font-style: italic;
}

/* Event & Direction Badges */
.tel-history-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.tel-ev-new {
    background: rgba(0, 170, 255, 0.1);
    color: #0077cc;
}
.tel-ev-answer {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}
.tel-ev-hangup {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}
.tel-dir-in {
    background: rgba(139, 92, 246, 0.1);
    color: #6d28d9;
}
.tel-dir-out {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
}

/* Pagination */
.tel-history-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    gap: 8px;
    flex-wrap: wrap;
}
.tel-history-total {
    font-size: 12px;
    color: var(--mt-muted);
}
.tel-history-pages {
    display: flex;
    gap: 4px;
}
.tel-page-btn {
    padding: 4px 10px;
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    background: var(--mt-white, #fff);
    color: var(--mt-text);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}
.tel-page-btn:hover {
    border-color: var(--mt-blue);
    background: rgba(0,170,255,0.04);
}
.tel-page-btn.active {
    background: var(--mt-blue);
    color: #fff;
    border-color: var(--mt-blue);
}

/* Webhook Debug Log */
.tel-webhook-log {
    margin-top: 20px;
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    background: var(--mt-white, #fff);
    overflow: hidden;
}
.tel-webhook-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mt-border);
}
.tel-webhook-log-header h3 {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}
.tel-webhook-log-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--mt-muted);
    line-height: 1;
}
.tel-webhook-log-content {
    padding: 12px 14px;
    font-size: 11px;
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--mt-text);
    margin: 0;
}

/* Dark Mode – Historie */
body.dark-mode .tel-history-table-wrap {
    background: #1e2226;
    border-color: #2e3338;
}
body.dark-mode .tel-history-table th {
    background: #15181a;
    border-color: #2e3338;
}
body.dark-mode .tel-history-table td {
    border-color: #2e3338;
}
body.dark-mode .tel-ev-new { background: rgba(0,170,255,0.15); color: #5bb8f5; }
body.dark-mode .tel-ev-answer { background: rgba(34,197,94,0.15); color: #4ade80; }
body.dark-mode .tel-ev-hangup { background: rgba(239,68,68,0.15); color: #f87171; }
body.dark-mode .tel-dir-in { background: rgba(139,92,246,0.15); color: #a78bfa; }
body.dark-mode .tel-dir-out { background: rgba(245,158,11,0.15); color: #fbbf24; }
body.dark-mode .tel-page-btn {
    background: #1e2226;
    border-color: #2e3338;
    color: #d4d8dd;
}
body.dark-mode .tel-page-btn:hover {
    border-color: var(--mt-blue);
}
body.dark-mode .tel-webhook-log {
    background: #1e2226;
    border-color: #2e3338;
}
body.dark-mode .tel-webhook-log-header {
    border-color: #2e3338;
}

/* Mobile */
@media (max-width: 768px) {
    .tel-setting-row {
        flex-direction: column;
        gap: 6px;
    }
    .tel-setting-label {
        min-width: unset;
        padding-top: 0;
    }
    .tel-call-toast {
        left: 12px;
        right: 12px;
        max-width: unset;
    }
    .sip-call-notif {
        left: 12px;
        right: 12px;
        max-width: unset;
        min-width: unset;
    }
    .tel-history-table {
        font-size: 12px;
    }
    .tel-history-table th,
    .tel-history-table td {
        padding: 6px 8px;
    }
}