/* =============================================================
   Tasks page styles
   Light/dark mode handled via CSS custom properties (gleap.css).
   No hard-coded colors except priority/status accents.
   ============================================================= */

/* `#app` is a CSS grid sized for the chat layout (4 cols: sidebar / inbox /
   chat-list / chat-main). Pages other than chat must explicitly span from
   the column AFTER the sidebar to the end (mirrors customers.css). */
.tasks-page {
    grid-column: 2 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    background: var(--page-bg-gradient);
    overflow-y: auto;
    height: calc(100vh - var(--header-height));
}
.tasks-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 24px;
    gap: 16px;
}

/* ── Page header ─────────────────────────────────────────────── */
.tasks-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.tasks-page .page-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.tasks-page .page-title {
    display: flex;
    align-items: center;
    gap: 16px;
}
.tasks-page .page-title > i {
    font-size: 32px;
    color: var(--primary-color);
    background: var(--color-amethyst-soft);
    padding: 12px;
    border-radius: 12px;
}
.tasks-page .page-title h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
}
.tasks-page .page-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 4px 0 0 0;
}
.tasks-page .page-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── View switcher tabs ──────────────────────────────────────── */
.view-switcher {
    display: inline-flex;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.view-switcher .view-tab {
    background: transparent;
    border: 0;
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .15s;
}
.view-switcher .view-tab.active {
    background: var(--white, #ffffff);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.view-switcher .view-tab:hover:not(.active) { color: var(--text-primary); }

/* ── Filter bar (sticky) ─────────────────────────────────────── */
.tasks-filter-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--white, #ffffff);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    /* Grid auto-fit gives a bullet-proof horizontal row that wraps cleanly on
       narrow viewports — no chance of an unintended column stack. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 12px;
    align-items: end;
}
.tasks-filter-bar .filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.tasks-filter-bar .filter-field.filter-grow { grid-column: span 2; }
.tasks-filter-bar .filter-field.filter-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    grid-column: -2 / -1;
}
.tasks-filter-bar .filter-field label {
    font-size: 10.5px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.tasks-filter-bar .filter-field .form-select,
.tasks-filter-bar .filter-field .form-control,
.tasks-filter-bar .filter-field .select2-container {
    width: 100% !important;
    font-size: 13px;
}
.tasks-filter-bar .filter-due-custom {
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
}
.tasks-filter-bar .filter-due-custom input { flex: 1; min-width: 0; }
.tasks-filter-bar .filter-due-custom span { color: var(--text-secondary); }

/* Select2 dropdowns inside the filter bar should match Bootstrap heights */
.tasks-filter-bar .select2-container--bootstrap-5 .select2-selection {
    min-height: 36px;
}

/* Multi-select: let chips wrap to multiple lines instead of truncating.
   Default Select2 keeps chips on one row which causes overflow/clipping
   when several values are selected in a narrow filter cell. */
.tasks-filter-bar .select2-container--bootstrap-5 .select2-selection--multiple {
    height: auto;
    min-height: 36px;
    padding: 2px 28px 2px 4px;
    align-items: center;
}
.tasks-filter-bar .select2-container--bootstrap-5 .select2-selection--multiple
    .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}
.tasks-filter-bar .select2-container--bootstrap-5 .select2-selection--multiple
    .select2-selection__choice {
    margin: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1.3;
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    white-space: normal;
    overflow-wrap: anywhere;
}
.tasks-filter-bar .select2-container--bootstrap-5 .select2-selection--multiple
    .select2-selection__choice__display {
    padding: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}
.tasks-filter-bar .select2-container--bootstrap-5 .select2-selection--multiple
    .select2-search--inline {
    flex: 1 0 auto;
}
.tasks-filter-bar .select2-container--bootstrap-5 .select2-selection--multiple
    .select2-search--inline .select2-search__field {
    margin: 0;
    height: 22px;
}

/* Belt-and-braces: ensure Select2 dropdown wins z-index over modal overlay
   (10000). The Select2 init also sets dropdownParent on modal selects, but
   keep this in case any select escapes that helper. */
.select2-container--open .select2-dropdown {
    z-index: 10100;
}

/* ── Bulk action bar ─────────────────────────────────────────── */
.tasks-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--brand-livechat-bg, rgba(49,167,147,.12));
    border: 1px solid var(--brand-livechat, #31a793);
    border-radius: 10px;
}
.tasks-bulk-bar .bulk-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--text-primary);
    margin-right: 8px;
}

/* ── View containers ─────────────────────────────────────────── */
.task-view { display: none; }
.task-view.active { display: block; }
.task-view-list .soft-table-wrapper { background: var(--white); border-radius: 12px; }

/* ── List view cell styles ───────────────────────────────────── */
.task-cell-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot.dot-ontime    { background: #10B981; }
.status-dot.dot-today     { background: #F59E0B; }
.status-dot.dot-overdue   { background: #EF4444; }
.status-dot.dot-done      { background: #9CA3AF; }
.status-dot.dot-cancelled { background: #6B7280; }

.task-cell-assignee {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.task-avatar-initials {
    display: inline-flex;
    width: 24px; height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border-color);
}

.task-priority-badge,
.task-status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
}
.task-priority-badge.prio-low      { background: rgba(107,114,128,.14); color: #4B5563; }
.task-priority-badge.prio-medium   { background: rgba(59,130,246,.14);  color: #2563EB; }
.task-priority-badge.prio-high     { background: rgba(245,158,11,.18);  color: #B45309; }
.task-priority-badge.prio-urgent   { background: rgba(239,68,68,.18);   color: #B91C1C; }

.task-status-pill.st-pending       { background: rgba(107,114,128,.14); color: #374151; }
.task-status-pill.st-in_progress   { background: rgba(59,130,246,.14);  color: #2563EB; }
.task-status-pill.st-overdue       { background: rgba(239,68,68,.18);   color: #B91C1C; }
.task-status-pill.st-completed     { background: rgba(16,185,129,.18);  color: #047857; }
.task-status-pill.st-cancelled     { background: rgba(156,163,175,.20); color: #4B5563; }

.task-row-actions {
    display: inline-flex;
    gap: 4px;
}
.task-row-actions .icon-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}
.task-row-actions .icon-btn:hover {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary);
}

.text-danger { color: #DC2626; }
.muted       { color: var(--text-secondary); }
.link-muted  { color: var(--text-primary); text-decoration: none; }
.link-muted:hover { text-decoration: underline; }

/* ── Kanban view ─────────────────────────────────────────────── */
.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: stretch;
    min-height: 500px;
}
.kanban-column {
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}
.kanban-column[data-status="overdue"]   { background: rgba(239,68,68,.06); }
.kanban-column[data-status="completed"] { background: rgba(16,185,129,.06); }
.kanban-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px 10px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.kanban-count {
    background: var(--white);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}
.kanban-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 60px;
    transition: background .15s;
    border-radius: 8px;
    padding: 4px;
}
.kanban-list.drop-active {
    background: rgba(59,130,246,.08);
    outline: 2px dashed rgba(59,130,246,.4);
    outline-offset: -4px;
}
.kanban-empty {
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 14px 0;
}
.kanban-card {
    display: flex;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    cursor: grab;
    overflow: hidden;
    user-select: none;
}
.kanban-card.dragging { opacity: .55; cursor: grabbing; }
.kanban-card-priority {
    width: 4px;
    flex-shrink: 0;
}
.kanban-card-body {
    padding: 8px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kanban-card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.35;
}
.kanban-card-customer {
    font-size: 11px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.kanban-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--text-secondary);
}
.kanban-card-meta .ti { vertical-align: -2px; margin-right: 2px; }
.kanban-card-assignee .task-avatar-initials {
    width: 20px; height: 20px;
    font-size: 9px;
}

/* ── Calendar view ───────────────────────────────────────────── */
.task-view-calendar {
    background: var(--white);
    border-radius: 14px;
    padding: 18px 20px 20px;
    border: 1px solid var(--border-color);
}
.task-view-calendar .fc {
    font-family: inherit;
    --fc-border-color: var(--border-color);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: transparent;
    --fc-today-bg-color: rgba(49,167,147,.06);
    --fc-event-bg-color: var(--brand-livechat, #31a793);
    --fc-event-border-color: var(--brand-livechat, #31a793);
    --fc-event-text-color: #fff;
}

/* Toolbar */
.task-view-calendar .fc-header-toolbar {
    margin-bottom: 14px !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.task-view-calendar .fc-toolbar-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -.01em;
}
.task-view-calendar .fc .fc-button {
    background: var(--white);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    text-transform: none;
    box-shadow: none;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 8px;
    transition: background .15s, color .15s, border-color .15s;
}
.task-view-calendar .fc .fc-button:focus,
.task-view-calendar .fc .fc-button:focus-visible { box-shadow: none; outline: none; }
.task-view-calendar .fc .fc-button-primary:not(:disabled):hover {
    background: var(--bg-secondary, #f3f4f6);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.task-view-calendar .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--text-primary);
    color: var(--white);
    border-color: var(--text-primary);
}
.task-view-calendar .fc .fc-button-group { gap: 0; }
.task-view-calendar .fc .fc-button-group > .fc-button {
    border-radius: 0;
}
.task-view-calendar .fc .fc-button-group > .fc-button:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.task-view-calendar .fc .fc-button-group > .fc-button:last-child  { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.task-view-calendar .fc .fc-button-group > .fc-button:not(:first-child) { margin-left: -1px; }
.task-view-calendar .fc .fc-icon { font-size: 14px; vertical-align: middle; }

/* Grid frame */
.task-view-calendar .fc-scrollgrid {
    border-radius: 10px;
    overflow: hidden;
    border-color: var(--border-color);
}
.task-view-calendar .fc-scrollgrid,
.task-view-calendar .fc-scrollgrid td,
.task-view-calendar .fc-scrollgrid th {
    border-color: var(--border-color);
}

/* Weekday header row */
.task-view-calendar .fc-col-header { background: var(--bg-secondary, #f8f9fb); }
.task-view-calendar .fc-col-header-cell {
    padding: 10px 0;
    border-color: var(--border-color);
}
.task-view-calendar .fc-col-header-cell-cushion {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-decoration: none !important;
    padding: 0;
}

/* Day cells */
.task-view-calendar .fc-daygrid-day { transition: background .12s; }
.task-view-calendar .fc-daygrid-day:hover { background: var(--bg-secondary, #f5f5f7); }
.task-view-calendar .fc-daygrid-day-frame { padding: 4px 6px; min-height: 96px; }
.task-view-calendar .fc-daygrid-day-top { justify-content: flex-end; }
.task-view-calendar .fc-daygrid-day-number {
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none !important;
    padding: 4px 6px;
    line-height: 1;
    border-radius: 6px;
}
.task-view-calendar .fc-day-other .fc-daygrid-day-number { color: var(--text-secondary); opacity: .55; }
.task-view-calendar .fc-day-today .fc-daygrid-day-number {
    background: var(--brand-livechat, #31a793);
    color: #fff;
    font-weight: 600;
}

/* Events as soft pill chips */
.task-view-calendar .fc-daygrid-event {
    margin: 2px 4px 0;
    padding: 3px 7px;
    border-radius: 6px;
    border: 0;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    background: rgba(49,167,147,.12);
    color: var(--brand-livechat, #31a793);
    cursor: pointer;
    transition: background .12s, transform .12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-view-calendar .fc-daygrid-event:hover { background: rgba(49,167,147,.22); }
.task-view-calendar .fc-daygrid-event .fc-event-time { font-weight: 600; margin-right: 4px; opacity: .85; }
.task-view-calendar .fc-daygrid-event .fc-event-title { font-weight: 500; }
.task-view-calendar .fc-daygrid-event .fc-daygrid-event-dot { display: none; }

/* Status / priority colored events (added by event classNames) */
.task-view-calendar .fc-event.task-event-overdue   { background: rgba(239,68,68,.12);  color: #DC2626; }
.task-view-calendar .fc-event.task-event-overdue:hover  { background: rgba(239,68,68,.22); }
.task-view-calendar .fc-event.task-event-today     { background: rgba(245,158,11,.14); color: #B45309; }
.task-view-calendar .fc-event.task-event-today:hover    { background: rgba(245,158,11,.24); }
.task-view-calendar .fc-event.task-event-done      { background: var(--bg-secondary, #f3f4f6); color: var(--text-secondary); opacity: .75; text-decoration: line-through; }
.task-view-calendar .fc-event.task-event-cancelled { background: var(--bg-secondary, #f3f4f6); color: var(--text-secondary); opacity: .55; text-decoration: line-through; }

/* "+N more" link */
.task-view-calendar .fc-daygrid-more-link {
    margin: 2px 4px 0;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: 6px;
    background: transparent;
}
.task-view-calendar .fc-daygrid-more-link:hover { background: var(--bg-secondary, #f3f4f6); color: var(--text-primary); text-decoration: none; }

/* Time-grid (week / day views) */
.task-view-calendar .fc-timegrid-axis,
.task-view-calendar .fc-timegrid-slot-label {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
}
.task-view-calendar .fc-timegrid-now-indicator-line { border-color: var(--brand-livechat, #31a793); }
.task-view-calendar .fc-timegrid-now-indicator-arrow {
    border-color: var(--brand-livechat, #31a793);
    border-left-color: var(--brand-livechat, #31a793);
}

/* Time-grid events: same soft-pill aesthetic, but the title needs to read
   against the pastel background — inherit the class color instead of the
   default white --fc-event-text-color. Min-height keeps the title legible
   even on short (≤30 min) blocks. */
.task-view-calendar .fc-timegrid-event,
.task-view-calendar .fc-timegrid-event-harness > .fc-timegrid-event {
    border: 0;
    border-left: 3px solid currentColor;
    border-radius: 6px;
    padding: 2px 6px;
    background: rgba(49,167,147,.14);
    color: var(--brand-livechat, #31a793);
    box-shadow: none;
    min-height: 22px;
    overflow: hidden;
}
.task-view-calendar .fc-timegrid-event:hover { background: rgba(49,167,147,.24); }
.task-view-calendar .fc-timegrid-event .fc-event-main,
.task-view-calendar .fc-timegrid-event .fc-event-main-frame {
    color: inherit;
    height: 100%;
}
.task-view-calendar .fc-timegrid-event .fc-event-time {
    font-size: 11px;
    font-weight: 600;
    opacity: .85;
    color: inherit;
    padding: 0;
}
.task-view-calendar .fc-timegrid-event .fc-event-title,
.task-view-calendar .fc-timegrid-event .fc-event-title-container {
    font-size: 12px;
    font-weight: 500;
    color: inherit;
    line-height: 1.3;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status modifiers for time-grid */
.task-view-calendar .fc-timegrid-event.task-event-overdue   { background: rgba(239,68,68,.14);  color: #DC2626; }
.task-view-calendar .fc-timegrid-event.task-event-overdue:hover  { background: rgba(239,68,68,.24); }
.task-view-calendar .fc-timegrid-event.task-event-today     { background: rgba(245,158,11,.16); color: #B45309; }
.task-view-calendar .fc-timegrid-event.task-event-today:hover    { background: rgba(245,158,11,.26); }
.task-view-calendar .fc-timegrid-event.task-event-done      { background: var(--bg-secondary, #f3f4f6); color: var(--text-secondary); opacity: .8; text-decoration: line-through; }
.task-view-calendar .fc-timegrid-event.task-event-cancelled { background: var(--bg-secondary, #f3f4f6); color: var(--text-secondary); opacity: .55; text-decoration: line-through; }

.calendar-fallback {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

/* Dark mode tuning for calendar */
[data-theme="dark"] .task-view-calendar .fc {
    --fc-today-bg-color: rgba(49,167,147,.10);
    --fc-border-color: var(--border-color);
}
[data-theme="dark"] .task-view-calendar .fc-col-header { background: rgba(255,255,255,.03); }
[data-theme="dark"] .task-view-calendar .fc-daygrid-day:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .task-view-calendar .fc .fc-button { background: rgba(255,255,255,.04); }
[data-theme="dark"] .task-view-calendar .fc-event.task-event-done,
[data-theme="dark"] .task-view-calendar .fc-event.task-event-cancelled { background: rgba(255,255,255,.06); }

/* ── Modal: create/edit task — sticky footer ────────────────── */
/* Pin the action buttons to the bottom of the modal so they stay visible
   while the form scrolls. Negative margins span the full body width to
   line up flush with the modal edges (modal-body has 24px padding). */
#taskFormModal .form-actions {
    position: sticky;
    bottom: 0;
    margin: 16px -24px -24px;
    padding: 12px 20px;
    background: var(--white, #ffffff);
    border-top: 1px solid var(--border-color);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    z-index: 2;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
[data-theme="dark"] #taskFormModal .form-actions {
    background: var(--surface-elevated, #1f1d24);
}

/* ── Modal: detail layout ────────────────────────────────────── */
/* Scoped to #taskDetailModal so we don't change other modals' geometry. */
#taskDetailModal .modal-content.modal-lg {
    max-width: 880px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
/* modal-body is the bounding box; the two columns inside scroll independently
   so a long activity log can scroll on its own without dragging the form. */
#taskDetailModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
}
.task-detail-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}
#taskDetailModal .task-detail-main {
    overflow-y: auto;
    min-height: 0;
    padding-right: 4px;
}
#taskDetailModal .task-detail-side {
    overflow-y: auto;
    min-height: 0;
}
/* Keep the "Activity" header visible while the timeline scrolls beneath it */
#taskDetailModal .task-detail-side-header {
    position: sticky;
    top: 0;
    background: var(--white, #ffffff);
    padding-bottom: 8px;
    z-index: 1;
    margin-bottom: 6px;
}
/* Subtle scrollbars for the inner panes */
#taskDetailModal .task-detail-main::-webkit-scrollbar,
#taskDetailModal .task-detail-side::-webkit-scrollbar { width: 6px; }
#taskDetailModal .task-detail-main::-webkit-scrollbar-thumb,
#taskDetailModal .task-detail-side::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
.task-detail-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.task-detail-fields .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ── Reassign modal ──────────────────────────────────────────── */
#taskReassignModal .modal-content { max-width: 420px; }
#taskReassignModal .task-reassign-hint {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 6px;
    padding: 6px 10px;
}
#taskReassignModal .task-reassign-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--white, #ffffff);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* "?" help icon next to a form label. Subtle by default, accent on hover. */
.label-with-help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.label-with-help .help-icon {
    font-size: 14px;
    color: var(--text-secondary);
    cursor: help;
    opacity: .7;
    transition: opacity .15s, color .15s;
}
.label-with-help .help-icon:hover {
    opacity: 1;
    color: var(--brand-livechat, #31a793);
}

/* Bootstrap tooltips inside modals must beat .modal-overlay (z-index 10000).
   The default Bootstrap tooltip z-index is 1080 — way too low here. */
.tooltip {
    z-index: 10110 !important;
}
.tooltip .tooltip-inner {
    max-width: 280px;
    text-align: left;
    font-size: 12px;
    line-height: 1.45;
    padding: 8px 10px;
}

/* Static, non-interactive replacement for assignee select shown to operators.
   Mimics a disabled input but is plainly read-only — no chevron, no focus ring. */
.task-assignee-static {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary);
    cursor: not-allowed;
    user-select: none;
    pointer-events: none;
    line-height: 1.5;
    border-color: var(--border-color);
}
[data-theme="dark"] .task-assignee-static {
    background: rgba(255, 255, 255, 0.05);
}

/* Outline button variants used by the detail modal footer.
   Defined here (page-scoped) because the project doesn't have generic
   .btn-warning-outline / .btn-success-outline. */
.btn.btn-warning-outline {
    background: transparent;
    border: 1px solid #F59E0B;   /* amber-500 */
    color: #B45309;              /* amber-700, AA contrast on transparent */
}
.btn.btn-warning-outline:hover,
.btn.btn-warning-outline:focus {
    background: rgba(245, 158, 11, 0.10);
    color: #92400E;
    border-color: #D97706;
}

.btn.btn-success-outline {
    background: transparent;
    border: 1px solid #10B981;   /* emerald-500 */
    color: #047857;              /* emerald-700 */
}
.btn.btn-success-outline:hover,
.btn.btn-success-outline:focus {
    background: rgba(16, 185, 129, 0.10);
    color: #065F46;
    border-color: #059669;
}

[data-theme="dark"] .btn.btn-warning-outline { color: #FCD34D; }
[data-theme="dark"] .btn.btn-success-outline { color: #6EE7B7; }

/* Sticky single-row footer with the action buttons */
#taskDetailModal .task-detail-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--white, #ffffff);
    flex-shrink: 0;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
#taskDetailModal .task-detail-actions .btn {
    flex-shrink: 0;
    white-space: nowrap;
}
/* Scrollbar polish for narrow modals when buttons overflow */
#taskDetailModal .task-detail-actions::-webkit-scrollbar { height: 6px; }
#taskDetailModal .task-detail-actions::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
.task-detail-side {
    border-left: 1px solid var(--border-color);
    padding-left: 16px;
}
.task-detail-side-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}
.task-activity-timeline {
    font-size: 12px;
    color: var(--text-secondary);
    position: relative;
}
.task-activity-timeline .empty-line {
    text-align: center;
    padding: 20px 0;
    opacity: .6;
}
.task-activity-row {
    position: relative;
    padding: 6px 0 12px 18px;
}
.task-activity-row:not(:last-child)::before {
    /* Vertical thread connecting bullets */
    content: '';
    position: absolute;
    left: 4.5px;
    top: 14px;
    bottom: -2px;
    width: 1px;
    background: var(--border-color);
}
.task-activity-bullet {
    position: absolute;
    left: 0;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--white, #fff);
    border: 2px solid var(--brand-livechat, #31a793);
}
/* System (cron) events — amber bullet to distinguish from user actions */
.task-activity-row-system .task-activity-bullet {
    border-color: #F59E0B;
    background: #FEF3C7;
}
.task-activity-system-tag {
    display: inline-block;
    background: rgba(245, 158, 11, .15);
    color: #B45309;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 4px;
    line-height: 1.5;
}
[data-theme="dark"] .task-activity-system-tag { color: #FCD34D; }
.task-activity-body { display: flex; flex-direction: column; gap: 2px; }
.task-activity-line strong {
    color: var(--text-primary);
    font-weight: 600;
    margin-right: 4px;
}
.task-activity-detail {
    font-size: 11.5px;
    color: var(--text-secondary);
}
.task-activity-detail em {
    font-style: italic;
    color: var(--text-primary);
}

/* "Field: old → new" change rows shown under updated/reassigned actions */
.task-activity-change {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    line-height: 1.5;
    padding: 1px 0;
}
.task-activity-change-label {
    color: var(--text-secondary);
    font-weight: 500;
    margin-right: 2px;
}
.task-activity-change-from {
    color: var(--text-secondary);
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, .25);
    opacity: .85;
    word-break: break-word;
}
.task-activity-change-to {
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-word;
}
.task-activity-change-arrow {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: .7;
}
.task-activity-time {
    font-size: 10.5px;
    color: var(--text-secondary);
    opacity: .75;
}

/* Form rows (used by create modal too) */
.tasks-page .form-row,
#taskForm .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ── Embedded section (chat panel / customer profile) ────────── */
.tasks-section {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
}
.tasks-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.tasks-section-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tasks-section-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tasks-section-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
}
.tasks-section-item:hover { background: var(--bg-secondary, #f3f4f6); }
.tasks-section-item .status-dot { margin-top: 6px; }
.tasks-section-item-body { flex: 1; min-width: 0; }
.tasks-section-item-title {
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tasks-section-item-due {
    font-size: 11px;
    color: var(--text-secondary);
}
.tasks-section-empty {
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 12px 0;
}
.tasks-section-view-all {
    display: block;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    color: var(--brand-livechat, #31a793);
    text-decoration: none;
}
.tasks-section-view-all:hover { text-decoration: underline; }

/* ── Quick add inline ────────────────────────────────────────── */
.task-quick-add {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.task-quick-add input[type="text"] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--white);
    color: var(--text-primary);
    font-size: 13px;
}
.task-quick-add input[type="datetime-local"] {
    width: 170px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--white);
    color: var(--text-primary);
    font-size: 12px;
}
.task-quick-add button {
    padding: 0 10px;
    border: 1px solid var(--brand-livechat, #31a793);
    background: var(--brand-livechat, #31a793);
    color: var(--white);
    border-radius: 6px;
    cursor: pointer;
}
.task-quick-add button:hover { opacity: .9; }

/* ── Sidebar overdue badge ───────────────────────────────────── */
#tasksOverdueBadge {
    background: #EF4444 !important;
    color: #fff !important;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .kanban-board { grid-template-columns: repeat(2, 1fr); }
    .task-detail-grid { grid-template-columns: 1fr; }
    .task-detail-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-color); padding-top: 12px; }
    /* On narrow screens the two-pane independent scroll is awkward — revert
       to a single scroll container for the whole modal body. */
    #taskDetailModal .modal-body { overflow-y: auto; display: block; }
    #taskDetailModal .task-detail-main,
    #taskDetailModal .task-detail-side { overflow: visible; }
    #taskDetailModal .task-detail-side-header { position: static; }
}
@media (max-width: 700px) {
    .kanban-board { grid-template-columns: 1fr; }
    .tasks-filter-bar { padding: 8px; }
    .tasks-filter-bar .filter-field { min-width: 100%; }
    #taskForm .form-row, .task-detail-fields .form-row { grid-template-columns: 1fr; }
}

/* ── Dark-mode polish ────────────────────────────────────────── */
[data-theme="dark"] .kanban-card,
[data-theme="dark"] .tasks-section,
[data-theme="dark"] .task-view-calendar { background: var(--surface-elevated, #1f1d24); }
[data-theme="dark"] .kanban-column { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .view-switcher .view-tab.active { background: var(--surface-elevated, #2a2730); }