/* ── Base ─────────────────────────────────────────────────────────────────── */
body { background: #f4f6fb; }
.wrapper { min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
    width: 240px;
    min-height: 100vh;
    background: #1a1d2e;
    color: #c8ccd8;
    transition: transform .25s ease;
    flex-shrink: 0;
    z-index: 1040;
}
.sidebar-header { border-bottom: 1px solid rgba(255,255,255,.08); }

.sidebar-link {
    color: #c8ccd8 !important;
    border-radius: 8px;
    padding: .45rem .85rem;
    margin-bottom: 2px;
    font-size: .9rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: background .15s;
}
.sidebar-link:hover  { background: rgba(255,255,255,.08); color: #fff !important; }
.sidebar-link.active { background: #0d6efd;               color: #fff !important; }

.avatar-sm { width: 32px; height: 32px; font-size: .85rem; }

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.topbar { min-height: 56px; box-shadow: 0 1px 0 #e9ecef; }

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.breadcrumb-item a {
    color: #6c757d;
    text-decoration: none;
}
.breadcrumb-item a:hover { color: #495057; text-decoration: none; }

/* ── Main Content ─────────────────────────────────────────────────────────── */
.main-content { min-width: 0; background: #f4f6fb; overflow-x: hidden; }

/* ── Stat Cards ───────────────────────────────────────────────────────────── */
.stat-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* ── Task Cards ───────────────────────────────────────────────────────────── */
.task-card {
    border-left: 4px solid transparent;
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
    transition: box-shadow .15s, transform .15s;
    background: #fff;
    position: relative; /* needed so z-index works without transform stacking context issues */
}
.task-card:hover       { box-shadow: 0 4px 18px rgba(0,0,0,.11); transform: translateY(-1px); }
.task-card:has(.dropdown-menu.show) { z-index: 10; transform: none; }
.task-card.priority-critical { border-left-color: #dc3545; }
.task-card.priority-high     { border-left-color: #fd7e14; }
.task-card.priority-medium   { border-left-color: #ffc107; }
.task-card.priority-low      { border-left-color: #0dcaf0; }
.task-card.status-done       { opacity: .65; }
/* Ensure grid cells containing an open dropdown are above neighbours */
.task-card-grid { overflow: visible !important; }

/* Strip HTML tags from task description preview on card */
.task-desc-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Priority Badges ──────────────────────────────────────────────────────── */
.badge-priority-critical { background: #dc3545; }
.badge-priority-high     { background: #fd7e14; }
.badge-priority-medium   { background: #ffc107; color: #212529 !important; }
.badge-priority-low      { background: #0dcaf0; color: #212529 !important; }

/* ── Task Description (Rich Text) ────────────────────────────────────────── */
.task-description {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    border-left: 3px solid #dee2e6;
    font-size: .95rem;
    line-height: 1.65;
    color: #495057;
    overflow-wrap: break-word;
    word-break: break-word;
}
.task-description h1, .task-description h2, .task-description h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: .75rem;
    margin-bottom: .35rem;
    color: #212529;
}
.task-description h1 { font-size: 1.2rem; }
.task-description h2 { font-size: 1.1rem; }
.task-description h3 { font-size: 1rem; }
.task-description p { margin-bottom: .5rem; }
.task-description ul, .task-description ol {
    padding-left: 1.4rem;
    margin-bottom: .5rem;
}
.task-description li { margin-bottom: .2rem; }
.task-description strong { font-weight: 700; color: #212529; }
.task-description em { font-style: italic; }
.task-description s { opacity: .7; }
.task-description blockquote {
    border-left: 3px solid #0d6efd;
    padding-left: .75rem;
    margin: .5rem 0;
    color: #6c757d;
    font-style: italic;
}
.task-description code {
    background: #e9ecef;
    padding: .1rem .35rem;
    border-radius: 4px;
    font-size: .85em;
    color: #c7254e;
}
.task-description pre {
    background: #212529;
    color: #f8f9fa;
    padding: .75rem 1rem;
    border-radius: 6px;
    font-size: .85rem;
    overflow-x: auto;
    margin: .5rem 0;
}

/* ── Auth ─────────────────────────────────────────────────────────────────── */
.auth-wrapper {
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1d2e 0%, #0d6efd 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    border: none;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

/* ── Progress ─────────────────────────────────────────────────────────────── */
.progress { height: 6px; border-radius: 99px; }

/* ── Mobile Sidebar ───────────────────────────────────────────────────────── */
.sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1039;
}
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        transform: translateX(-100%);
    }
    .sidebar.show { transform: translateX(0); }
}

/* ── Mobile Layout Fixes ──────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* Stat cards: full width on very small screens */
    .stat-card .fs-3 { font-size: 1.4rem !important; }

    /* Task cards: no horizontal overflow */
    .task-card .card-body { padding: .75rem !important; }

    /* Filter bar: stack cleanly */
    .filter-form .row { gap: .5rem; }

    /* Topbar: smaller padding */
    .topbar { padding-left: .75rem !important; padding-right: .75rem !important; }

    /* Detail page: sidebar stacks below */
    .col-lg-8, .col-lg-4 { width: 100%; }

    /* Buttons wrap properly */
    .d-flex.gap-2 { flex-wrap: wrap; }

    /* Badge list wraps cleanly */
    .d-flex.flex-wrap.gap-1 { row-gap: .25rem; }

    /* Quill editor responsive */
    .ql-editor { min-height: 120px; }

    /* Main padding */
    main.flex-grow-1 { padding: .75rem !important; }

    /* Stat cards row: 2 per row on mobile */
    .col-6.col-lg-3 { width: 50%; }
}

@media (max-width: 575.98px) {
    /* On xs: filter inputs full width */
    .col-6.col-md-2, .col-6.col-md-4 { width: 100%; }

    /* Breadcrumb trimming */
    .breadcrumb { font-size: .78rem; }
    .breadcrumb-item { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Teams + task header stacks */
    .d-flex.justify-content-between { flex-direction: column; gap: .5rem; align-items: flex-start !important; }

    /* Task card status buttons stack */
    .btn-group-status { flex-direction: column; }

    /* Task description padding */
    .task-description { padding: .75rem; }
}

/* ── Alert close button ───────────────────────────────────────────────────── */
/* Bootstrap setzt auf .alert-dismissible das X auf position:absolute,
   was es aus dem Flex-Flow nimmt. Wir überschreiben das für d-flex Alerts. */
.alert.d-flex .btn-close,
.alert.d-flex.alert-dismissible .btn-close {
    position: static;    /* kein absolute mehr – wird echtes Flex-Item */
    padding: 0;
    align-self: center;
    flex-shrink: 0;
}
/* Damit kein extra rechts-Padding durch alert-dismissible */
.alert.d-flex.alert-dismissible { padding-right: 1rem; }

/* ── Misc ─────────────────────────────────────────────────────────────────── */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}
.overdue-badge { animation: pulse 2s infinite; }