/* ==========================================================================
   Kanban Board — Task Management UI
   ========================================================================== */

/* ==========================================================================
   Kanban toolbar — title, actions, type tabs, filters in one refined panel
   ========================================================================== */
.kanban-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem 1.1rem 0.95rem;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 0.9rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.kanban-toolbar .tb-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.kanban-toolbar .tb-row-head {
    gap: 0.85rem;
}

/* Title with status dot — dot color matches current scope */
.kanban-toolbar .tb-title {
    font-size: 1.35rem;
    font-weight: 400;
    color: #0f172a;
    letter-spacing: -0.015em;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    line-height: 1.2;
}
.kanban-toolbar .tb-title::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
    transition: background 0.2s, box-shadow 0.2s;
}
.kanban-toolbar.scope-business .tb-title::before {
    background: var(--primary-color, #0176D3);
    box-shadow: 0 0 0 3px rgba(1, 118, 211, 0.18);
}
.kanban-toolbar.scope-it .tb-title::before {
    background: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

/* Action buttons — ghost by default, one primary gradient */
.kanban-toolbar .tb-actions {
    display: inline-flex;
    gap: 0.4rem;
    flex-shrink: 0;
}
.kanban-toolbar .tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 400;
    padding: 0.45rem 0.8rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
    line-height: 1;
    text-decoration: none;
}
.kanban-toolbar .tb-btn:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}
.kanban-toolbar .tb-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.kanban-toolbar .tb-btn i { font-size: 0.9rem; }
.kanban-toolbar .tb-btn-icon { padding: 0.45rem 0.55rem; }
.kanban-toolbar .tb-btn-primary {
    background: linear-gradient(135deg, #0176D3 0%, #029bef 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(1, 118, 211, 0.22);
}
.kanban-toolbar .tb-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #015ba6 0%, #0176D3 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(1, 118, 211, 0.3);
}

/* Type segmented control */
.kanban-toolbar .tb-tabs {
    display: inline-flex;
    gap: 0;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 3px;
    border: 1px solid #e2e8f0;
}
.kanban-toolbar .tb-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 7px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.kanban-toolbar .tb-tab:hover:not(.active) {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}
.kanban-toolbar .tb-tab.active {
    background: white;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    font-weight: 500;
}
.kanban-toolbar .tb-tab i { font-size: 0.85rem; color: #94a3b8; }
.kanban-toolbar .tb-tab:hover i,
.kanban-toolbar .tb-tab.active i { color: inherit; }
.kanban-toolbar .tb-tab-business.active { color: var(--primary-color, #0176D3); }
.kanban-toolbar .tb-tab-business.active i { color: var(--primary-color, #0176D3); }
.kanban-toolbar .tb-tab-it.active { color: #dc2626; }
.kanban-toolbar .tb-tab-it.active i { color: #dc2626; }

@media (max-width: 640px) {
    .kanban-toolbar { padding: 0.75rem 0.85rem; gap: 0.7rem; }
    .kanban-toolbar .tb-title { font-size: 1.15rem; flex-basis: 100%; }
    .kanban-toolbar .tb-actions { margin-left: auto; }
    .kanban-toolbar .tb-btn-primary span { display: inline; }
}

/* --- Swimlane --- */
.swimlane {
    background: white;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.swimlane-header {
    padding: 0.65rem 1rem;
    font-weight: 400;
    font-size: 0.9rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    color: #334155;
}
.swimlane-header:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}
.swimlane-header .bi-chevron-right,
.swimlane-header .bi-chevron-down {
    font-size: 0.75rem;
    color: #94a3b8;
    transition: transform 0.2s;
}
.swimlane-header .badge {
    font-size: 0.7rem;
    font-weight: 500;
    background: #cbd5e1 !important;
    color: #475569;
}
.swimlane-body {
    display: flex;
    gap: 0.55rem;
    padding: 0.55rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.swimlane-body.collapsed {
    display: none;
}

/* --- Columns within swimlane — each is its own tinted container --- */
.kanban-column {
    min-width: 260px;
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}
/* Per-column accent: thin top stripe + faint wash, matching the card strip palette */
.kanban-column.col-new {
    background: linear-gradient(180deg, #fff5f5 0%, #ffffff 60%);
    border-top: 2px solid #fecaca;
}
.kanban-column.col-in_progress {
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 60%);
    border-top: 2px solid #fcd34d;
}
.kanban-column.col-done {
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 60%);
    border-top: 2px solid #86efac;
}

.kanban-column-header {
    padding: 0.55rem 0.85rem 0.45rem;
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(4px);
}
.kanban-column-header.new { color: #b91c1c; }
.kanban-column-header.in_progress { color: #b45309; }
.kanban-column-header.done { color: #15803d; }

/* Column header count pill */
.kanban-column-header .badge {
    font-size: 0.65rem;
    font-weight: 500;
    min-width: 20px;
    background: rgba(15, 23, 42, 0.06) !important;
    color: #475569 !important;
}

/* Sticky desktop column headers — higher contrast, colored accent dots */
.column-headers-sticky {
    position: sticky;
    top: 56px;
    z-index: 10;
    background: white;
    padding: 0.75rem 0.55rem 0.55rem;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 3px 10px -6px rgba(15, 23, 42, 0.08);
}
.column-header-label {
    font-size: 0.88rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.column-header-label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.04);
}
.column-header-label.new { color: #b91c1c; }
.column-header-label.new::before { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.column-header-label.in_progress { color: #b45309; }
.column-header-label.in_progress::before { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14); }
.column-header-label.done { color: #15803d; }
.column-header-label.done::before { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14); }

.kanban-tasks {
    padding: 0.45rem;
    flex: 1;
    min-height: 60px;
    transition: background 0.15s;
}

/* --- Task card — dense layout with full-height left priority strip --- */
.kanban-task {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 0.45rem 0.55rem 0.45rem 3rem; /* room for full-height left strip */
    margin-bottom: 0.3rem;
    min-height: 60px;
    cursor: grab;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
    position: relative;
    overflow: hidden;
}
/* Reserve mirrored right gutter when a task has a deadline strip */
.kanban-task.has-deadline-strip {
    padding-right: 2.85rem;
}
.kanban-task:active { cursor: grabbing; }
.kanban-task:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

/* --- Priority / close-date strip on the left (full card height) --- */
.task-priority-strip {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    user-select: none;
    transition: background 0.2s;
    border-right: 1px solid rgba(15, 23, 42, 0.04);
}
.task-priority-strip .strip-num {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}
.task-priority-strip .strip-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 3px;
}
.task-priority-strip .strip-day {
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.task-priority-strip .strip-month {
    font-size: 0.56rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.92;
}

/* --- Right strip: deadline, mirrors the left strip ---
   Neutral slate by default; tint intensifies as the deadline approaches.
   Four elements distributed evenly across the full strip height:
       day number · month label · divider · countdown label. */
.task-deadline-strip {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.4rem;
    padding: 0.55rem 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    user-select: none;
    border-left: 1px solid rgba(15, 23, 42, 0.05);
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}
.task-deadline-strip .strip-day {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.task-deadline-strip .strip-month {
    font-size: 0.54rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
}
.task-deadline-strip .strip-divider {
    width: 55%;
    height: 1px;
    background: currentColor;
    opacity: 0.18;
}
.task-deadline-strip .strip-countdown {
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}
/* Urgency ramp — alpha increases as the deadline gets closer. */
.task-deadline-strip.dl-normal {
    background: rgba(100, 116, 139, 0.07);
    color: #64748b;
}
.task-deadline-strip.dl-near {
    background: rgba(234, 179, 8, 0.1);
    color: #854d0e;
}
.task-deadline-strip.dl-soon {
    background: rgba(245, 158, 11, 0.18);
    color: #92400e;
}
.task-deadline-strip.dl-today {
    background: rgba(245, 158, 11, 0.32);
    color: #78350f;
}
.task-deadline-strip.dl-overdue {
    background: rgba(220, 38, 38, 0.2);
    color: #991b1b;
}

/* --- SortableJS drag classes --- */
.sortable-ghost {
    opacity: 0.35;
    background: #eff6ff !important;
    border: 1.5px dashed var(--primary-color, #0176D3) !important;
}
.sortable-ghost > * {
    visibility: hidden;
}
.sortable-chosen {
    cursor: grabbing;
}
.sortable-drag {
    opacity: 0.95 !important;
    transform: rotate(1.5deg);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22) !important;
    cursor: grabbing;
}
body.kanban-dragging * {
    cursor: grabbing !important;
}
body.kanban-dragging .kanban-column {
    box-shadow: 0 0 0 2px rgba(1, 118, 211, 0.12);
    transition: box-shadow 0.15s;
}

/* --- Task card elements --- */
.task-title-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}
.task-id {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 400;
    color: #94a3b8;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 3px;
}
/* Заголовок печатается ЦЕЛИКОМ: обрезка «…» прячет от человека ровно то, по
   чему он ищет задачу глазами (правило web/CLAUDE.md). Длинное — переносим. */
.task-title {
    flex: 1;
    min-width: 0;
    font-weight: 400;
    font-size: 0.98rem;
    line-height: 1.32;
    color: #0f172a;
    overflow-wrap: break-word;
    letter-spacing: -0.005em;
}
/* People row — full names with small role icons, wrapped when they don't fit */
.task-people {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    margin-top: 0.25rem;
    font-size: 0.73rem;
    color: #475569;
    min-width: 0;
}
.task-people .person {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.task-people .person > span {
    overflow-wrap: break-word;
}
.task-people .person i {
    font-size: 0.78rem;
    flex-shrink: 0;
}
.task-people .person-assignee i { color: var(--primary-color, #0176D3); }
.task-people .person-creator {
    color: #94a3b8;
    padding-left: 0.35rem;
    border-left: 1px solid #e2e8f0;
}
.task-people .person-creator i { color: #cbd5e1; }
.task-people .person.muted {
    color: #94a3b8;
    font-style: italic;
}
.task-people .person.muted i { color: #cbd5e1; }
.task-priority-badge {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 0.08rem 0.3rem;
    border-radius: 3px;
    background: #e0f2fe;
    color: #0369a1;
    white-space: nowrap;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
/* Top 3 priorities get stronger color */
.task-priority-badge.priority-1 {
    background: var(--primary-color, #0176D3);
    color: white;
}
.task-priority-badge.priority-2 {
    background: #bae6fd;
    color: #0c4a6e;
}
.task-priority-badge.priority-3 {
    background: #e0f2fe;
    color: #075985;
}


.task-meta {
    display: flex;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: #64748b;
    align-items: center;
    /* Ряд вырос до 5 возможных элементов (комменты, файлы, наблюдатели,
       тип, деньги) — переносим, а не режем overflow'ом. */
    flex-wrap: wrap;
    margin-top: 0.1rem;
    min-height: 18px;
}
.task-meta .meta-icon { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.task-meta .task-type-badge { flex-shrink: 0; }

/* Quick-comment action link — full-width ghost button below meta row */
.task-qc-action {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.35rem 0 0.1rem;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s;
    text-align: left;
    border-top: 1px dashed transparent;
}
.task-qc-action:hover {
    color: var(--primary-color, #0176D3);
    border-top-color: #cbd5e1;
}
.task-qc-action i { font-size: 0.82rem; }

/* Quick-move action bar on the card itself — mobile only.
   Touch users can't drag tasks across stacked columns, so the card
   carries one-tap "В работу" / "Выполнено" buttons matching the column
   color language (amber for in_progress, green for done).
   Hidden on desktop where drag-and-drop is the primary path. */
.task-quick-move {
    display: none;
    gap: 6px;
    margin: 0.35rem -0.55rem -0.55rem;
    padding: 0.4rem 0.55rem 0.5rem;
    border-top: 1px solid #f1f5f9;
}
.qm-btn {
    flex: 1;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.5rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
    -webkit-tap-highlight-color: transparent;
}
.qm-btn:active { transform: scale(0.98); }
.qm-btn .bi { font-size: 0.95rem; line-height: 1; }
.qm-btn-progress {
    color: #b45309;
    border-color: #fde68a;
    background: #fffbeb;
}
.qm-btn-progress:hover {
    border-color: #fbbf24;
    background: #fef3c7;
}
.qm-btn-done {
    color: #15803d;
    border-color: #bbf7d0;
    background: #f0fdf4;
}
.qm-btn-done:hover {
    border-color: #4ade80;
    background: #dcfce7;
}
@media (max-width: 768px) {
    .task-quick-move { display: flex; }
}

/* Last-comment preview (shown only when not actively commenting).
   Переносится, а не режется: последняя реплика — половина смысла карточки. */
.task-last-comment {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 0.25rem;
    padding: 0.15rem 0.4rem;
    background: #f8fafc;
    border-radius: 4px;
    overflow-wrap: break-word;
    line-height: 1.35;
    border-left: 2px solid #e2e8f0;
}
.comment-author-mini {
    color: #64748b;
}

/* Inline quick-comment input — only appears when user clicks meta button */
.quick-comment-inline {
    margin-top: 0.3rem;
}
.qc-comment-input {
    width: 100%;
    border: 1.5px solid var(--primary-color, #0176D3);
    border-radius: 5px;
    background: white;
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
    color: #0f172a;
    outline: none;
    box-shadow: 0 0 0 3px rgba(1, 118, 211, 0.1);
}
.qc-comment-input::placeholder { color: #94a3b8; }
.task-type-badge {
    font-size: 0.62rem;
    font-weight: 500;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.task-type-badge.type-business {
    background: #dbeafe;
    color: #1e40af;
}
.task-type-badge.type-it {
    background: #f1f5f9;
    color: #475569;
}
.assignee-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0176D3, #032D60);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.03em;
    box-shadow: 0 1px 3px rgba(3, 45, 96, 0.3);
}

/* --- Comments & Modal --- */
.task-modal-comments {
}
.comment-item {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.4rem;
}
.comment-author { font-weight: 500; font-size: 0.8rem; color: #334155; }
.comment-date { font-size: 0.7rem; color: #94a3b8; }

/* --- Attachment thumbnails --- */
.attachment-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.attachment-thumb:hover {
    border-color: var(--primary-color, #0176D3);
    box-shadow: 0 2px 8px rgba(1, 118, 211, 0.15);
}

/* --- Empty states --- */
.empty-column-state {
    color: #cbd5e1;
    font-size: 0.75rem;
    padding: 0.75rem 0;
    text-align: center;
}
.empty-board-state {
    padding: 3rem 1rem;
    text-align: center;
    color: #94a3b8;
}
.empty-board-state i {
    font-size: 3.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

/* --- Dashboard My Tasks widget --- */
.my-tasks-widget {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.my-tasks-widget .card-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    padding: 0.6rem 1rem;
}
.my-tasks-widget .card-header .widget-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
}
.my-tasks-column-header {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 0.4rem;
}
.my-tasks-column-header.col-new { border-color: #94a3b8; }
.my-tasks-column-header.col-in_progress { border-color: #f59e0b; }
.my-tasks-column-header.col-done { border-color: #22c55e; }

.my-tasks-item {
    display: block;
    text-decoration: none;
    color: #334155;
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.25rem;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1.3;
}
.my-tasks-item:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}
.my-tasks-item .task-deadline-mini {
    font-size: 0.65rem;
    color: #94a3b8;
}

/* --- Archive page --- */
.archive-day-header {
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 0.6rem;
    color: #334155;
}
.archive-day-header .badge {
    font-size: 0.65rem;
    background: #cbd5e1 !important;
    color: #475569;
}
.archive-task-card {
    background: white;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.3rem;
    border: 1px solid #e2e8f0;
    transition: box-shadow 0.2s, border-color 0.15s;
    cursor: pointer;
}
.archive-task-card:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}
.archive-type-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.archive-type-dot.business { background: #3b82f6; }
.archive-type-dot.it { background: #94a3b8; }

.archive-filters {
    padding: 0.5rem 0.75rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.archive-stats {
    font-size: 0.82rem;
    color: #22c55e;
    display: flex;
    align-items: center;
    gap: 6px;
}
.archive-pagination .progress {
    border-radius: 2px;
    background: #f1f5f9;
}
.archive-pagination .progress-bar {
    background: var(--primary-color, #0176D3);
    transition: width 0.3s;
}

/* --- Time tracking badges --- */
.time-badge {
    font-size: 0.7rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

/* --- Source badge --- */
.source-badge {
    font-size: 0.6rem;
    padding: 0.1rem 0.35rem;
}

/* --- Mobile responsive --- */
@media (max-width: 768px) {
    .swimlane-body {
        flex-direction: column;
    }
    .kanban-column {
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
    .kanban-column:last-child {
        border-bottom: none;
    }
    .kanban-task {
        min-height: 60px;
    }
    .task-meta {
        font-size: 0.7rem;
    }
    .swimlane-header {
        padding: 0.55rem 0.75rem;
    }
    /* iOS Safari zooms on focus for any input with font-size < 16px.
       Force 16px on all kanban inline inputs so the viewport stays put. */
    .qc-input,
    .quick-comment .form-control,
    .td-title-input,
    .td-description,
    .td-comment-input .form-control,
    .td-prop-value,
    select.td-prop-value,
    input[type="date"].td-prop-value,
    .tb-search-input,
    .td-watcher-add,
    .create-other-select,
    .task-create-dialog .form-control {
        font-size: 16px !important;
    }
}


/* --- Money impact: card badge, modal presets, toolbar sort toggle --- */
.money-badge {
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
    /* Ряд meta режет по overflow — сумма не должна ужиматься в «+1 мл…» */
    flex-shrink: 0;
}
.money-badge.money-pos {
    color: #92600a;
    background: #fef3c7;
    border: 1px solid #fcd34d;
}
.money-badge.money-neg {
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fca5a5;
}
.td-money-btn.active.money-pos { color: #92600a; }
.td-money-btn.active.money-neg { color: #b91c1c; }
.td-money-toggle { flex-wrap: wrap; }
@media (max-width: 575.98px) {
    /* Зеркало статус-тоггла: пять пресетов на всю ширину, крупные тапы */
    .td-money-toggle { width: 100%; }
    .td-money-btn {
        flex: 1;
        justify-content: center;
        padding: 0.5rem 0.3rem;
        font-size: 0.78rem;
    }
}
.kanban-toolbar .tb-sort-money.active {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92600a;
}

/* --- Toolbar search --- */
.kanban-toolbar .tb-search {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.35rem 0.7rem;
    color: #64748b;
    flex: 1 1 200px;
    max-width: 320px;
}
.kanban-toolbar .tb-search:focus-within {
    border-color: #0176D3;
}
.kanban-toolbar .tb-search-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.8rem;
    color: #0f172a;
    width: 100%;
    min-width: 0;
}
.kanban-toolbar .tb-search-clear {
    border: none;
    background: transparent;
    color: #94a3b8;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}
.kanban-toolbar .tb-search-clear:hover { color: #0f172a; }

/* --- Assignee filter pills (refined, live inside the toolbar) --- */
.assignee-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    width: 100%;
}
.assignee-filter-pill {
    font-size: 0.75rem;
    font-weight: 400;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    color: #64748b;
    background: white;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    line-height: 1;
}
.assignee-filter-pill i { font-size: 0.78rem; color: #94a3b8; }
.assignee-filter-pill:hover:not(.active) {
    border-color: #cbd5e1;
    color: #0f172a;
    background: #f8fafc;
}
.assignee-filter-pill:hover:not(.active) i { color: #64748b; }
.assignee-filter-pill.active {
    background: linear-gradient(135deg, #0176D3 0%, #029bef 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 6px rgba(1, 118, 211, 0.22);
}
.assignee-filter-pill.active i { color: rgba(255, 255, 255, 0.92); }
.assignee-filter-pill.active .assignee-circle-sm {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: none;
    color: white;
}
.assignee-circle-sm {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0176D3, #032D60);
    color: white;
    font-size: 0.52rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(3, 45, 96, 0.2);
}
.filter-divider {
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, transparent, #e2e8f0 30%, #e2e8f0 70%, transparent);
    margin: 0 0.3rem;
}

/* Per-person pill: one capsule with two click zones —
   [avatar + name] toggles the filter, [+] creates a task on that person.
   The outer span owns the border, background, and active state so the
   plus reads visually as part of the same pill. */
.assignee-pill-group {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: white;
    overflow: hidden;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.assignee-pill-group:hover:not(.active) {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.assignee-pill-group.active {
    background: linear-gradient(135deg, #0176D3 0%, #029bef 100%);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(1, 118, 211, 0.22);
}

/* Left zone — name + avatar, toggles the filter */
.assignee-pill-filter {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 400;
    padding: 0.35rem 0.55rem 0.35rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s;
}
.assignee-pill-filter:hover { color: #0f172a; }
.assignee-pill-group.active .assignee-pill-filter { color: white; }
.assignee-pill-group.active .assignee-pill-filter:hover { color: white; }
.assignee-pill-group.active .assignee-pill-filter .assignee-circle-sm {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: none;
    color: white;
}

/* Right zone — "+" quick-create on this person.
   Use a fixed width + flex centering + display:block on the icon so the
   glyph sits dead-center regardless of Bootstrap Icons' baseline offset. */
.assignee-pill-add {
    background: transparent;
    border: none;
    border-left: 1px solid #e2e8f0;
    color: #94a3b8;
    width: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.assignee-pill-add i {
    font-size: 0.85rem;
    line-height: 1;
    display: block;
}
.assignee-pill-add:hover {
    background: var(--primary-color, #0176D3);
    color: white;
}
.assignee-pill-group.active .assignee-pill-add {
    border-left-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.85);
}
.assignee-pill-group.active .assignee-pill-add:hover {
    background: rgba(255, 255, 255, 0.18);
    color: white;
}

@media (max-width: 575.98px) {
    .assignee-pill-add { width: 32px; }
    .assignee-pill-add i { font-size: 0.95rem; }
}


/* ==========================================================================
   Task Detail Modal (Notion-style)
   ========================================================================== */
.task-detail {
    border-radius: 12px;
    overflow: hidden;
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* Header bar */
.task-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    background: #fafbfc;
    border-bottom: 1px solid #eef0f2;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot.new { background: #94a3b8; }
.status-dot.in_progress { background: #f59e0b; }
.status-dot.done { background: #22c55e; }
.status-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
}
.header-sep {
    width: 1px;
    height: 14px;
    background: #e2e8f0;
}
.header-date {
    font-size: 0.72rem;
    color: #94a3b8;
}
.time-pill {
    font-size: 0.68rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
}
.btn-icon {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    font-size: 0.85rem;
    border-radius: 4px;
    line-height: 1;
    transition: background 0.15s;
    opacity: 0.5;
}
.btn-icon:hover { opacity: 1; background: #f1f5f9; }

/* Title */
.task-detail-title {
    padding: 1rem 1.25rem 0;
}
.td-title-input {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    font-size: 1.25rem;
    font-weight: 500;
    color: #0f172a;
    padding: 0.2rem 0;
    outline: none;
    line-height: 1.35;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s;
    resize: none;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.td-title-input:focus:not(:disabled) {
    border-bottom-color: var(--primary-color, #0176D3);
}
.td-title-input:disabled {
    cursor: default;
    opacity: 1;
}

/* Property rows */
.td-properties {
    padding: 0.75rem 1.25rem 0;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0;
}
.td-prop-row {
    display: flex;
    align-items: center;
    /* Единая высота и стартовая колонка значений — ряды не «пляшут»
       между select/тогглами/чипами. */
    min-height: 42px;
    padding: 0.35rem 0;
    border-radius: 4px;
    transition: background 0.1s;
}
.td-prop-row .td-type-toggle,
.td-prop-row .td-watchers {
    margin-left: 0.35rem;
}
.td-prop-row:hover { background: #fafbfc; }
.td-prop-label {
    width: 140px;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}
.td-prop-label i { font-size: 0.85rem; }
.td-prop-value {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    color: #334155;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.15s;
    outline: none;
}
.td-prop-value:hover:not(:disabled) { background: #f1f5f9; }
.td-prop-value:focus:not(:disabled) {
    background: #eff6ff;
    box-shadow: 0 0 0 1px rgba(1,118,211,0.2);
}
.td-prop-value:disabled {
    cursor: default;
    opacity: 1;
}
select.td-prop-value {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 10px;
    padding-right: 1.3rem;
}
select.td-prop-value:disabled {
    background-image: none;
    padding-right: 0.35rem;
}
.td-prop-value-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Watchers: chips + inline add-select in one wrapping row */
.td-watchers {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.td-watcher-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: #0f172a;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.15rem 0.3rem 0.15rem 0.6rem;
}
.td-watcher-remove {
    border: none;
    background: transparent;
    color: #94a3b8;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
}
.td-watcher-remove:hover { color: #dc2626; }
.td-watcher-add {
    border: 1px dashed #cbd5e1;
    border-radius: 999px;
    background: transparent;
    font-size: 0.78rem;
    color: #64748b;
    cursor: pointer;
    outline: none;
    max-width: 140px;
    padding: 0.2rem 0.7rem;
    appearance: none;
    -webkit-appearance: none;
}
.td-watcher-add:hover { color: #0f172a; }
.td-prop-value-wrap .td-prop-value { flex: 0 1 auto; }
.deadline-hint {
    font-size: 0.72rem;
    color: #64748b;
    white-space: nowrap;
}
.deadline-hint.overdue { color: #dc2626; font-weight: 600; }
.deadline-hint.soon { color: #d97706; }

/* Sections */
.td-section {
    padding: 0.75rem 1.25rem;
}

/* Description */
.td-description {
    font-size: 0.9rem;
    color: #475569;
    padding: 0.35rem 0.5rem;
    outline: none;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    border-left: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.15s, background 0.15s;
}
.td-description[contenteditable="true"]:focus {
    border-left-color: var(--primary-color, #0176D3);
    background: #fafbfc;
}
.td-description:empty::before {
    content: attr(data-placeholder);
    color: #cbd5e1;
}

/* Source link */
.td-source-link {
    font-size: 0.8rem;
    color: #0176D3;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0.5rem;
    background: #f0f7ff;
    border-radius: 4px;
    max-width: 100%;
    overflow: hidden;
}
.td-source-link span {
    overflow-wrap: anywhere;
}
.td-source-link:hover { background: #e0f0ff; }

/* Attachment card (file) */
.attachment-file-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    /* Не `height`: имя файла переносится целиком, и плитка растёт под него —
       обрезка «…» запрещена, а `overflow: hidden` резал бы то же самое молча. */
    min-height: 64px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    text-decoration: none;
    color: #475569;
    font-size: 0.6rem;
    padding: 0.25rem;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
}
.attachment-file-card:hover {
    border-color: var(--primary-color, #0176D3);
    background: #eff6ff;
    color: var(--primary-color, #0176D3);
}
.attachment-file-card i { font-size: 1.1rem; margin-bottom: 2px; }
.attachment-file-name {
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

/* Attachment delete + add buttons */
.att-delete-btn {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: white;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0;
    line-height: 1;
}
.position-relative:hover .att-delete-btn { opacity: 1; }
.att-download-btn {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: var(--primary-color, #0176D3);
    color: white;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0;
    line-height: 1;
}
.position-relative:hover .att-download-btn { opacity: 1; }
/* Планшеты и телефоны: hover нет — кнопки видимы сразу */
@media (hover: none) {
    .att-download-btn, .att-delete-btn { opacity: 1; }
}
.att-add-btn {
    width: 64px;
    height: 64px;
    border: 2px dashed #e2e8f0;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    font-size: 1.2rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.att-add-btn:hover {
    border-color: var(--primary-color, #0176D3);
    color: var(--primary-color, #0176D3);
    background: #f0f7ff;
}

/* Divider */
.td-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 0 1.25rem;
}

/* History */
.td-history-toggle {
    font-size: 0.78rem;
    color: #94a3b8;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.td-history-toggle:hover { color: #64748b; }
.td-history-list { margin-top: 0.4rem; }
.td-history-item {
    font-size: 0.75rem;
    color: #94a3b8;
    padding: 0.15rem 0;
    line-height: 1.4;
}

/* Comments */
.td-comments { padding-bottom: 1rem; }
.td-comments-header {
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.5rem;
}
.td-comments-count {
    font-size: 0.65rem;
    font-weight: 500;
    background: #e2e8f0;
    color: #64748b;
    padding: 0.05rem 0.4rem;
    border-radius: 8px;
}
.td-comments-list {
}
.td-comment {
    padding: 0.5rem 0.65rem;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 0.3rem;
    border: 1px solid #f1f5f9;
}
.td-comment-author { font-weight: 500; font-size: 0.78rem; color: #334155; }
.td-comment-date { font-size: 0.68rem; color: #b0b8c4; margin-left: 0.4rem; }
.td-comment-text { font-size: 0.85rem; color: #475569; margin-top: 0.15rem; line-height: 1.4; }
.td-comment-input {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    margin-top: 0.5rem;
}
.td-comment-input .form-control {
    font-size: 0.82rem;
    border-radius: 8px;
    resize: none;
    overflow: hidden;
}
.td-comment-input .btn {
    border-radius: 8px;
    padding: 0.25rem 0.6rem;
}


/* Create-task dialog: title first, frequent-assignee chips */
.task-create-dialog .modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
}
.create-label {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin: 0.9rem 0 0.35rem;
}
.create-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.create-chip {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 999px;
    font-size: 0.78rem;
    color: #334155;
    padding: 0.25rem 0.7rem;
    cursor: pointer;
    transition: all 0.12s;
}
.create-chip:hover { border-color: #cbd5e1; }
.create-chip.active {
    background: #0176D3;
    border-color: #0176D3;
    color: #fff;
}
.create-other-select {
    margin-top: 0.5rem;
    max-width: 100%;
    font-size: 0.78rem;
}
.td-quick-assign {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.create-two-col {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.create-hint {
    margin-top: 0.9rem;
    font-size: 0.72rem;
    color: #94a3b8;
}
/* Скрин или файл в окне создания: кнопка, подсказка про вставку и чипы
   выбранных файлов — в один ряд, с переносом. Имена файлов не режем. */
.create-files {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.create-files-hint {
    font-size: 0.72rem;
    color: var(--bp-muted);
}
.create-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    border: 1px solid var(--bp-line);
    border-radius: 999px;
    padding: 0.15rem 0.3rem 0.15rem 0.6rem;
    font-size: 0.75rem;
    color: var(--bp-ink-soft);
    overflow-wrap: anywhere;
}
.create-file-remove {
    border: 0;
    background: transparent;
    color: var(--bp-muted);
    padding: 0 0.15rem;
    line-height: 1;
    cursor: pointer;
}
.create-file-remove:hover { color: var(--bp-stamp-red); }
/* Карточка задачи: подсказка у «+», пока вложений нет, и список файлов,
   не прикрепившихся при создании. */
.att-add-hint {
    font-size: 0.75rem;
    color: var(--bp-muted);
}
.att-warning {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--bp-warning-deep);
    background: var(--bp-warning-tint);
    border: 1px solid var(--bp-warning);
    border-radius: var(--bp-radius-sm);
    padding: 0.4rem 0.6rem;
}
.task-create-dialog textarea.form-control {
    resize: none;
    overflow: hidden;
}

/* --- Subtle animations --- */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.swimlane {
    animation: fadeSlideIn 0.25s ease-out;
}

/* --- Mobile task detail --- */
@media (max-width: 768px) {
    .td-title-input { font-size: 16px; }
    .td-prop-label { width: 110px; font-size: 0.75rem; }
    .td-prop-value,
    select.td-prop-value,
    input[type="date"].td-prop-value {
        font-size: 16px;
        min-height: 38px;
    }
    .td-description { font-size: 16px; }
    .td-comment-input .form-control { font-size: 16px; }
    .task-detail-header { flex-wrap: wrap; gap: 0.3rem; }
}

/* ==========================================================================
   Quick create header (per-column inline task entry, top of column)
   ========================================================================== */
.kanban-quick-create {
    margin-bottom: 0.4rem;
}
.qc-toggle {
    width: 100%;
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.qc-toggle:hover {
    background: #eff6ff;
    border-color: var(--primary-color, #0176D3);
    color: var(--primary-color, #0176D3);
}
.qc-toggle .bi-plus-lg {
    font-size: 0.85rem;
}
.qc-input-wrap {
    padding: 0.1rem 0;
}
.qc-input {
    width: 100%;
    background: white;
    border: 1.5px solid var(--primary-color, #0176D3);
    color: #0f172a;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    outline: none;
    box-shadow: 0 0 0 3px rgba(1, 118, 211, 0.12);
}
.qc-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* ==========================================================================
   Task detail header — safe delete button (keep in header, no mis-tap)
   ========================================================================== */
.td-delete-btn {
    font-size: 0.72rem;
    font-weight: 400;
    padding: 0.25rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.2s;
}
.td-delete-btn.armed {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
    animation: pulseArm 0.8s ease-in-out infinite alternate;
}
@keyframes pulseArm {
    from { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    to   { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12); }
}
.td-header-spacer {
    width: 1.25rem;
    flex-shrink: 0;
}
.task-detail-header .btn-close {
    margin-left: 0;
}

/* ==========================================================================
   Task detail — Business/IT type segmented toggle
   ========================================================================== */
.td-type-toggle {
    display: inline-flex;
    gap: 0;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 3px;
    border: 1px solid #e2e8f0;
}
.td-type-btn {
    background: transparent;
    border: none;
    font-size: 0.78rem;
    font-weight: 400;
    color: #64748b;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.td-type-btn:hover:not(:disabled):not(.active) {
    color: #334155;
    background: rgba(255, 255, 255, 0.5);
}
.td-type-btn.active {
    background: white;
    color: var(--primary-color, #0176D3);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
    font-weight: 500;
}
.td-type-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.td-type-btn .bi {
    font-size: 0.82rem;
}

/* Status toggle in the detail modal — same shell as td-type-toggle but
   each active state carries its own column color so it reads at a glance.
   Doubles as the mobile column-change path since touch can't drag. */
.td-status-toggle { flex-wrap: wrap; }
.td-status-btn.active.td-status-new {
    color: #dc2626;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.15);
}
.td-status-btn.active.td-status-progress {
    color: #d97706;
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.15);
}
.td-status-btn.active.td-status-done {
    color: #16a34a;
    box-shadow: 0 1px 3px rgba(22, 163, 74, 0.15);
}
@media (max-width: 575.98px) {
    /* Bigger tap targets on phones — this is the primary mobile control
       for moving a task between columns. */
    .td-status-toggle { width: 100%; }
    .td-status-btn {
        flex: 1;
        justify-content: center;
        padding: 0.5rem 0.4rem;
        font-size: 0.78rem;
    }
}

/* Save-action footer for the non-draft editing flow. People kept asking
   for an explicit close-with-save affordance; the row PATCHes inline so
   this is purely a "I'm done editing" button. */
.td-save-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.65rem 1rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.td-save-actions .btn {
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.45rem 1.1rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
@media (max-width: 575.98px) {
    .td-save-actions {
        padding: 0.6rem 0.75rem;
    }
    .td-save-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 0.55rem 0.9rem;
    }
}

/* ==========================================================================
   Телефон (≤767.98px): на первом экране — ДОСКА, а не панель управления
   ==========================================================================
   На 390×844 панель занимала 750px из 844, из них ~550px — список
   исполнителей по чипу в строке; первая дорожка начиналась ниже сгиба, а вся
   страница тянулась на десятки тысяч пикселей.

   Решение: панель складывается в три ряда по 40px, люди и редкое управление
   уезжают в шторки мобильного кита (К1, `bp-sheet`), дорожки открываются
   свёрнутыми (kanban.js), внутри дорожки видна ОДНА колонка — её выбирает
   сегмент над ней.

   Десктоп не трогаем: обёртки шторок там прозрачны (`display: contents`), то
   есть ряды панели собираются ровно как раньше, а телефонные строки шторки
   помечены `d-md-none`.
   ========================================================================== */

@media (min-width: 768px) {
    /* Обёртка есть только для телефона — на десктопе её как будто нет */
    .tb-more,
    .assignee-people { display: contents; }
    /* Счётчик задач у человека и сегмент колонок — телефонные */
    .assignee-pill-count,
    .lane-cols { display: none; }
}

@media (max-width: 767.98px) {
    /* --- Панель: три ряда по 40px вместо семисот пикселей --- */
    .kanban-toolbar {
        padding: 8px 10px;
        gap: 6px;
        margin-bottom: 8px;
    }
    .kanban-toolbar .tb-row,
    .kanban-toolbar .tb-row-head { gap: 6px; }
    /* Заголовок делит строку с кнопками (правило 640px отдавало ему всю
       строку целиком) и называет активный фильтр — чип уезжает за сгиб */
    .kanban-toolbar .tb-title {
        flex: 1 1 auto;
        font-size: 1rem;
        min-width: 0;
        overflow-wrap: break-word;
    }
    .kanban-toolbar .tb-actions { gap: 6px; }
    .kanban-toolbar .tb-btn { min-height: 40px; font-size: 0.82rem; }
    /* «Новая задача» на телефоне — один «+», вход в шторку — одно «⋯»: с
       подписями строка заголовка переносилась на второй ряд и стоила доске
       44px первого экрана (а с длинным фильтром в заголовке — все 70) */
    .kanban-toolbar .tb-btn-primary { min-width: 44px; justify-content: center; }
    .kanban-toolbar .tb-btn-primary span { display: none; }
    .kanban-toolbar .tb-actions .bp-sheet-trigger {
        position: relative;
        min-width: 44px;
        justify-content: center;
    }
    /* Подпись «Ещё» убрана с экрана, но НЕ из разметки: кнопке нужно имя,
       которое прочитает скринридер */
    .kanban-toolbar .tb-actions .bp-sheet-trigger__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    /* Поиск — своя строка во всю ширину: когда дорожки свёрнуты, это
       единственный способ найти задачу, не открывая их одну за другой */
    .kanban-toolbar .tb-search {
        flex: 1 1 100%;
        max-width: none;
        min-height: 40px;
    }

    /* --- Шторка «Ещё»: вкладки типа, деньги, архив, обновление --- */
    #kanban-more > * { margin: 8px 12px; }
    #kanban-more .tb-tabs {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 0;
        border: 0;
        background: transparent;
    }
    #kanban-more .tb-tab,
    #kanban-more .tb-btn {
        justify-content: flex-start;
        gap: 10px;
        min-height: 44px;
        padding: 0 0.9rem;
        font-size: 0.9rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: white;
    }
    #kanban-more .tb-tab.active { background: #f1f5f9; font-weight: 500; }
    #kanban-more .tb-tab i, #kanban-more .tb-btn i { font-size: 1rem; }

    /* --- Лента чипов: Все · Мои · Я постановщик · Исполнитель ▾ --- */
    .assignee-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        scrollbar-width: none;
    }
    .assignee-filter-bar::-webkit-scrollbar { display: none; }
    .assignee-filter-bar > .assignee-filter-pill,
    .assignee-filter-bar > .bp-sheet-trigger { flex: 0 0 auto; }
    .assignee-filter-pill { min-height: 40px; font-size: 0.82rem; }

    /* --- Шторка «Исполнитель»: строка на человека, поиск по имени --- */
    .assignee-search {
        /* 16px — иначе iOS Safari зумит страницу на фокусе */
        font-size: 16px;
        min-height: 44px;
        margin: 8px 12px;
        width: calc(100% - 24px);
    }
    #kanban-assignee .assignee-pill-group {
        display: flex;
        align-items: center;
        width: 100%;
        border: 0;
        border-bottom: 1px solid #e2e8f0;
        border-radius: 0;
        background: transparent;
    }
    #kanban-assignee .assignee-pill-group.active {
        background: #eff6ff;
        box-shadow: none;
    }
    #kanban-assignee .assignee-pill-filter {
        flex: 1;
        min-height: 44px;
        padding: 0 12px;
        font-size: 0.9rem;
        text-align: left;
    }
    #kanban-assignee .assignee-pill-group.active .assignee-pill-filter { color: #0f172a; }
    #kanban-assignee .assignee-pill-group.active .assignee-pill-filter .assignee-circle-sm {
        background: linear-gradient(135deg, #0176D3, #032D60);
        color: white;
    }
    .assignee-pill-count {
        min-width: 30px;
        text-align: right;
        font-size: 0.8rem;
        color: #64748b;
    }
    #kanban-assignee .assignee-pill-add {
        width: 48px;
        align-self: stretch;
        border-left: 1px solid #e2e8f0;
    }

    /* --- Дорожка: сегмент колонок, одна колонка за раз --- */
    .swimlane-header { min-height: 44px; }
    .lane-cols {
        display: flex;
        gap: 6px;
        padding: 6px;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }
    .lane-col-btn {
        flex: 1;
        min-height: 44px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 2px 4px;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 0.75rem;
        line-height: 1.15;
        color: #64748b;
        cursor: pointer;
    }
    .lane-col-btn .lane-col-count { font-size: 0.8rem; font-weight: 600; }
    .lane-col-btn.active { border-color: #94a3b8; background: #f1f5f9; color: #0f172a; }
    .lane-col-btn.seg-new.active { border-color: #fecaca; background: #fff5f5; color: #b91c1c; }
    .lane-col-btn.seg-in_progress.active { border-color: #fcd34d; background: #fffbeb; color: #b45309; }
    .lane-col-btn.seg-done.active { border-color: #86efac; background: #f0fdf4; color: #15803d; }
    /* Невыбранные колонки не рисуем — сегмент уже сказал, что в них лежит */
    .kanban-column.lane-col-off { display: none; }
    /* Заголовок колонки дублировал бы активную кнопку сегмента */
    .kanban-column-header { display: none; }
    .qc-toggle { min-height: 40px; }

    /* --- Карточка: полосы становятся чипами, шрифты — читаемыми --- */
    /* Слева 48px под номер приоритета и справа 46px под дедлайн съедали 26%
       ширины карточки, и заголовок рвался посреди слова. На телефоне обе
       полосы встают чипами над заголовком, в обычном потоке. */
    .kanban-task { padding: 0.55rem 0.6rem; }
    .kanban-task.has-deadline-strip { padding-right: 0.6rem; }
    .task-priority-strip,
    .task-deadline-strip {
        position: static;
        width: auto;
        min-height: 24px;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
        margin: 0 5px 4px 0;
        padding: 2px 9px;
        border: 0;
        border-radius: 999px;
    }
    .task-priority-strip .strip-date { flex-direction: row; gap: 4px; }
    .task-priority-strip .strip-num { font-size: 0.82rem; }
    .task-priority-strip .strip-num::before { content: '#'; opacity: 0.75; }
    .task-priority-strip .strip-day,
    .task-deadline-strip .strip-day { font-size: 0.8rem; }
    .task-priority-strip .strip-month,
    .task-deadline-strip .strip-month { font-size: 0.75rem; opacity: 1; }
    .task-deadline-strip .strip-divider { display: none; }
    .task-deadline-strip .strip-countdown { font-size: 0.75rem; opacity: 1; }
    .task-title { font-size: 0.95rem; }
    .task-people,
    .task-meta,
    .task-last-comment { font-size: 0.78rem; }
    .task-type-badge,
    .task-priority-badge { font-size: 0.72rem; }
    .money-badge { font-size: 0.75rem; }
    .qm-btn { min-height: 44px; font-size: 0.8rem; }
    /* «Добавить комментарий» (22px по высоте) на телефоне не рисуем: тап по
       карточке открывает её же с полем комментария, промахнуться негде */
    .task-qc-action { display: none; }
}