/* Task attachments preview modal */
.ow-attachment-preview-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 16px;
        z-index: 5000;
    }

    .ow-attachment-preview-overlay.is-open {
        display: flex;
    }

    .ow-attachment-preview-modal {
        width: min(1100px, 100%);
        background: var(--surface);
        border: 1px solid var(--ow-border);
        border-radius: 12px;
        box-shadow: var(--shadow-lg);
        overflow: hidden;
    }

    .ow-attachment-preview-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--ow-border);
    }

    .ow-attachment-preview-title {
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 820px;
    }

    .ow-attachment-preview-body {
        padding: 12px;
    }

    .ow-attachment-preview-image {
        display: block;
        max-width: 100%;
        max-height: 70vh;
        border-radius: 10px;
        margin: 0 auto;
    }

    .ow-attachment-preview-frame {
        width: 100%;
        height: 70vh;
        border: 0;
        display: block;
    }

    .ow-attachment-preview-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 10px 12px;
        border-top: 1px solid var(--ow-border);
    }

	/* File picker (comment attachments) */
	.ow-filePicker {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		flex-wrap: wrap;
	}

	.ow-filePickerInput {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.ow-filePickerText {
		font-size: 13px;
		color: var(--ow-muted);
		max-width: 520px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ow-filePickerText.has-files {
		color: var(--ow-text);
	}

	/* Task list: highlight rows with new comments */
	.ow-table-tasks tbody tr.ow-taskRow--newComments td:first-child {
		box-shadow: inset 3px 0 0 var(--ow-accent);
	}

	.ow-table-tasks tbody tr.ow-taskRow--newTask td:first-child {
		box-shadow: inset 3px 0 0 var(--ow-accent2);
	}

	/* If a task is both new for the user and has new comments, show a double stripe. */
	.ow-table-tasks tbody tr.ow-taskRow--newComments.ow-taskRow--newTask td:first-child {
		box-shadow: inset 3px 0 0 var(--ow-accent2), inset 6px 0 0 var(--ow-accent);
	}

	/* Task card: participants block */
	.ow-participants-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.ow-participants-section {
		min-width: 240px;
		flex: 1 1 340px;
	}

	.ow-participants-list {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.ow-participant-item {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 6px;
		padding: 6px 8px;
		border: 1px solid var(--ow-border);
		border-radius: 12px;
		background: linear-gradient(180deg, rgba(var(--text-rgb), .035), rgba(var(--text-rgb), .012));
		box-shadow: 0 1px 0 rgba(var(--text-rgb), .03) inset;
	}

	.ow-participant-left {
		min-width: 0;
		max-width: 620px;
		flex: 1;
	}

	.ow-participant-name {
		font-weight: 650;
		font-size: 13px;
		line-height: 1.25;
		margin-bottom: 2px;
		overflow-wrap: anywhere;
	}

	.ow-participant-sub {
		font-size: 11px;
		color: var(--ow-muted);
		line-height: 1.2;
		max-width: 520px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ow-participant-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		font-size: 11px;
		color: var(--ow-muted);
		line-height: 1.25;
	}

	.ow-participant-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		justify-content: flex-end;
	}

	.ow-participant-actions .ow-btn {
		padding: 3px 7px !important;
		font-size: 11px;
		line-height: 1.1;
	}

	.ow-participant-action-danger {
		border-color: rgba(220, 38, 38, 0.35);
	}

	.ow-participants-addRow {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		align-items: flex-end;
	}

	.ow-participants-suggestWrap {
		position: relative;
	}

	.ow-participants-suggest {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-top: 6px;
		max-height: 260px;
		overflow: auto;
		border: 1px solid var(--ow-border);
		background: var(--ow-surface, var(--ow-card));
		border-radius: 12px;
		box-shadow: 0 12px 30px rgba(0,0,0,.35);
		z-index: 1000;
	}

	.ow-participants-suggestItem {
		padding: 10px 12px;
		cursor: pointer;
	}

	.ow-participants-suggestItem:hover {
		background: var(--soft-bg-2);
	}

	.ow-participants-suggestTitle {
		font-weight: 650;
		margin-bottom: 2px;
		color: var(--ow-text);
	}

	.ow-participants-suggestSub {
		font-size: 11px;
		color: var(--ow-muted);
	}

/* ============================================================
   Task list: filters offcanvas (/it/tasks)
   Notes:
   - Inline <style> is blocked by CSP in prod; keep these rules in wwwroot.
   ============================================================ */
.ow-offcanvas.ow-offcanvas-tasks {
	--bs-offcanvas-width: min(440px, 96vw);
}

.ow-offcanvas.ow-offcanvas-tasks .offcanvas-body {
	overflow-y: auto;
	padding: 16px 14px 18px;
}

.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersForm {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	align-items: end;
}

.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersForm .ow-u-minw-280px,
.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersForm .ow-u-w-160px,
.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersForm .ow-u-w-170px,
.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersForm .ow-u-w-140px,
.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersForm .ow-u-w-200px {
	width: 100% !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
}

.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersForm .form-label {
	font-weight: 850;
	letter-spacing: .15px;
	margin-bottom: 6px;
	opacity: .95;
}

.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersForm .form-control {
	border-radius: 14px;
	min-height: 42px;
}

.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersForm .form-control::placeholder {
	opacity: .8;
}

.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersFlags {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	align-items: start !important;
}

.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersFlags .ow-inlineRow {
	width: 100%;
	align-items: flex-start;
	border: 1px solid var(--ow-border);
	background: linear-gradient(180deg, rgba(var(--text-rgb), .035), rgba(var(--text-rgb), .012));
	box-shadow: 0 1px 0 rgba(var(--text-rgb), .03) inset;
	border-radius: 14px;
	padding: 10px 12px;
	gap: 10px;
}

.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersFlags input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex: 0 0 auto;
	accent-color: var(--ow-accent);
}

.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersFlags .ow-inlineRow span {
	white-space: normal;
	line-height: 1.25;
}

.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersFooter {
	display: flex;
	gap: 10px;
	justify-content: flex-start;
	align-items: center;
}

@media (max-width: 380px) {
	.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersForm {
		grid-template-columns: 1fr;
	}

	.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersFlags {
		grid-template-columns: 1fr;
	}

	.ow-offcanvas.ow-offcanvas-tasks .ow-taskFiltersFooter {
		flex-direction: column;
		align-items: stretch;
	}
}


/* ITTASKS-TYPES-02.UI-01: long task type labels can be wider than typical badges.
   Allow wrapping inside badges where we explicitly opt-in (e.g. type badges). */
.ow-badge.ow-badge-wrap {
	white-space: normal;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ===== IT Tasks list: tree view ===== */

.ow-taskTreeTitle {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.ow-taskTreeSpacer {
    display: inline-block;
    flex: 0 0 auto;
}

.ow-taskTreeToggle {
    border: 0;
    background: transparent;
    padding: 0 2px;
    line-height: 1;
    font-size: 14px;
    cursor: pointer;
}

.ow-taskTreeToggle--empty {
    width: 14px;
}

.ow-taskRow--hidden {
    display: none;
}

/* Optional helper: active state for view toggle buttons (if base styles do not provide it). */
.ow-btn--active {
    box-shadow: inset 0 0 0 1px currentColor;
}

/* ===== IT Tasks SLA matrix admin ===== */

.ow-slaMatrixTable th,
.ow-slaMatrixTable td {
    vertical-align: top;
}

.ow-slaMatrixCell {
    min-width: 180px;
}

.ow-slaMatrixInputs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.ow-slaInputRow {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ow-slaInputRow label {
    width: 16px;
    font-size: 12px;
    color: var(--ow-muted);
    flex: 0 0 auto;
}

.ow-slaHint {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--ow-muted);
}

/* ===== Task card: SLA badges (readability) ===== */

.ow-slaBadge {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border-radius: 14px;
    padding: 7px 10px;
    white-space: normal;
    line-height: 1.15;
    max-width: 320px;
}

.ow-slaBadge__title {
    font-size: 11px;
    font-weight: 650;
    color: var(--ow-muted);
}

.ow-slaBadge__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.ow-slaBadge__status {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.ow-slaBadge__due {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    color: var(--ow-muted);
}

.ow-slaBadge__dueValue {
    color: var(--ow-text);
    font-weight: 650;
    overflow-wrap: anywhere;
}