/*
 * Tasks (V1.43, Time and tasks step 3): the employees' board (Client\Apps\Tasks\TasksPage.razor), the issue dialog
 * (TaskIssueDialog), a new issue (TaskNewDialog), Tasks > Categories (TasksCategoriesPage) and the kind of a project on
 * Management's PO page (tk-kind-chip); step 4: Tasks > Matrix (tk-mx-) and the clients' Work tracking app (Client\Apps\Work:
 * the read-only board, the issue's hours and cost, the PO summary tk-po-). V1.44 (the owner's review): denser board and
 * matrix, the board's filters, Log time (tk-logtime), the calendar's mouse (tasks.js: tk-cal-drag, tk-cal-ghost), the line
 * of the current time (tk-cal-now), the new worklog's modal (tk-wl-), the planning typed like a spreadsheet (tk-plan-state,
 * tk-plan-cat, tk-plan-person). Class prefix tk-. Linked by Server\Components\App.razor after app.css. Colours
 * only through the tokens of app.css (:root): light and dark themes.
 * Copyright (c) 2026 Toupin Technologies Inc. All rights reserved.
 */

.tk-toolbar { margin-bottom: 10px; }
.tk-client { min-width: 200px; max-width: 100%; }
.tk-po-filter, .tk-person { min-width: 150px; max-width: 100%; }
.tk-link { padding: 0; border: 0; background: none; color: var(--accent-strong); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.tk-link:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.tk-sync { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 0.82rem; }
.tk-sync-error { padding: 1px 8px; border-radius: 999px; background: var(--bad-soft); color: var(--bad); font-weight: 700; }
.tk-sync-off { color: var(--warn); font-weight: 600; }
.tk-count { margin-left: 4px; color: var(--muted); font-weight: 600; font-size: 0.78rem; }
.tk-legend { margin: 8px 2px 0; }
.tk-warn { margin: 6px 0; padding: 8px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-weight: 600; font-size: 0.85rem; }
.tk-h { margin: 16px 0 6px; color: var(--muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.tk-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.tk-kind-chip { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
a.tk-kind-chip { text-decoration: none; }
a.tk-kind-chip:hover { text-decoration: underline; }
.tk-closed-tag { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--chip); color: var(--chip-text); font-size: 0.68rem; font-weight: 700; }

/* ---- The board: a table, its header and its first column stay put while it scrolls ---- */
.tk-board-wrap { max-width: 100%; max-height: calc(100vh - 210px); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.tk-board { width: 100%; min-width: 940px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.tk-board th, .tk-board td { border-bottom: 1px solid var(--rule); }
.tk-board thead th { position: sticky; top: 0; z-index: 3; padding: 5px 6px; background: var(--panel-2); color: var(--text); font-size: 0.76rem; font-weight: 800; text-align: left; border-bottom: 1px solid var(--border); }
.tk-board .tk-rowhead { position: sticky; left: 0; z-index: 2; width: 200px; padding: 4px 8px; background: var(--panel); text-align: left; vertical-align: top; font-weight: 400; border-right: 1px solid var(--border); }
.tk-board thead .tk-rowhead { z-index: 4; background: var(--panel-2); }
.tk-board th.tk-cont { width: 58px; padding: 0; }
.tk-board.tk-cont-open th.tk-cont { width: auto; }
.tk-cont-toggle { display: flex; width: 100%; height: 100%; min-height: 30px; align-items: center; justify-content: center; gap: 2px; padding: 4px; border: 0; background: var(--gold-soft); color: var(--gold-text); font: inherit; font-weight: 800; cursor: pointer; }
.tk-cont-toggle:hover, .tk-cont-toggle:focus-visible { background: var(--note-soft); }
.tk-board:not(.tk-cont-open) .tk-cont-name { overflow: hidden; max-width: 0; }
.tk-board:not(.tk-cont-open) .tk-cont-toggle { flex-direction: column; }

.tk-group th { padding: 6px 8px 3px; background: var(--head-bg); color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-align: left; text-transform: uppercase; }
.tk-group-place th { background: var(--warn-soft); color: var(--warn); }
.tk-group-internal th { background: var(--chip); color: var(--chip-text); }
.tk-group-hint { display: block; margin-top: 2px; font-weight: 600; letter-spacing: 0; text-transform: none; }

.tk-rowname { font-weight: 700; font-size: 0.8rem; line-height: 1.25; overflow-wrap: anywhere; }
.tk-rowsub { margin-top: 1px; color: var(--muted); font-size: 0.7rem; overflow-wrap: anywhere; }
.tk-rowsub a { color: var(--muted); }
/* V1.44: a row's name in two lines at most on the board (its whole name in its tip) */
.tk-board .tk-rowname { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-cell { min-width: 0; padding: 3px 4px; vertical-align: top; border-left: 1px solid var(--rule); transition: background 0.1s; }
.tk-cell.tk-cont { text-align: center; background: color-mix(in srgb, var(--gold-soft) 35%, transparent); }
.tk-cont-open .tk-cell.tk-cont { text-align: left; }
.tk-cell.tk-over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.tk-place .tk-rowhead, .tk-place .tk-cell { background: var(--warn-soft); }
.tk-place .tk-rowname { color: var(--warn); }
.tk-closed .tk-rowhead, .tk-closed .tk-cell { opacity: 0.62; }
.tk-hl .tk-rowhead { box-shadow: inset 4px 0 0 var(--accent); background: var(--accent-soft); }
/* V1.44, a phone: the board takes most of the screen, a narrower first column */
@media (max-width: 700px) {
    .tk-board-wrap { max-height: 78vh; }
    .tk-board .tk-rowhead { width: 132px; }
    .tk-board { min-width: 860px; }
}
.tk-hl .tk-cell { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }

/* A card */
.tk-card { position: relative; margin-bottom: 3px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); font-size: 0.78rem; cursor: grab; }
.tk-card:hover { border-color: var(--accent); }
.tk-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tk-card:active { cursor: grabbing; }
.tk-card.tk-sub { border-left: 3px solid var(--chip-hover); }
.tk-place .tk-card { border-left: 3px solid var(--warn); }
.tk-card.tk-busy { opacity: 0.5; pointer-events: none; }
.tk-card.tk-dragging { opacity: 0.4; }
.tk-card-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tk-card-top .spacer { flex: 1; }
.tk-key { color: var(--accent-strong); font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.tk-sum { margin: 1px 0 0; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-card-foot { display: flex; align-items: center; gap: 6px; }
.tk-card-foot .spacer { flex: 1; }
/* V1.52: when a card last changed, and the ones in progress or stuck without a change for 14 days (Work tracking) */
.tk-age { font-size: 0.66rem; color: var(--muted); white-space: nowrap; }
.tk-age.tk-stale { padding: 0 5px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.tk-stale-count { display: block; margin-top: 4px; color: var(--warn); font-weight: 600; }
.tk-subof { overflow: hidden; color: var(--muted); font-size: 0.68rem; white-space: nowrap; text-overflow: ellipsis; }
.tk-who { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.62rem; font-weight: 800; }
.tk-who.nobody { background: var(--chip); color: var(--faint); }
.tk-prio { color: var(--muted); font-size: 0.7rem; }
.tk-prio.high { color: var(--warn); }
.tk-prio.highest { color: var(--bad); }
.tk-type { padding: 0 6px; border-radius: 999px; background: var(--bad-soft); color: var(--bad); font-size: 0.66rem; font-weight: 800; }
.tk-add { display: block; width: 100%; padding: 0; line-height: 1.1; border: 1px dashed var(--border); border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-weight: 800; cursor: pointer; opacity: 0; transition: opacity 0.1s; }
.tk-cell:hover .tk-add, .tk-add:focus-visible { opacity: 1; }
.tk-add:hover { border-color: var(--accent); color: var(--accent-strong); }
@media (hover: none) { .tk-add { opacity: 0.6; } }
.tk-cont-count { min-width: 28px; padding: 2px 8px; border: 0; border-radius: 999px; background: var(--gold-soft); color: var(--gold-text); font: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer; }

/* A status */
.tk-st { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--chip); color: var(--chip-text); font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.tk-st.todo { background: var(--info-soft); color: var(--info); }
.tk-st.inprogress { background: var(--accent-soft); color: var(--accent-strong); }
.tk-st.stuck { background: var(--bad-soft); color: var(--bad); }
.tk-st.done { background: var(--good-soft); color: var(--good-text); }
.tk-st.continuous { background: var(--gold-soft); color: var(--gold-text); }

/* ---- The issue dialog ---- */
.tk-dlg-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tk-dlg-title .tk-key { font-size: 1rem; }
.tk-jira { font-size: 0.82rem; font-weight: 700; }
.tk-issue { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
@media (max-width: 860px) { .tk-issue { grid-template-columns: minmax(0, 1fr); } }
.tk-issue .sup-input { width: 100%; box-sizing: border-box; }
.tk-issue .tk-inline .sup-input { width: auto; }
.tk-summary { font-size: 1rem; font-weight: 700; }
.tk-issue-side { padding: 10px 12px; border-radius: var(--radius); background: var(--panel-2); }
.tk-issue-side .tk-h { margin-top: 12px; }
.tk-hours dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 0; font-size: 0.86rem; }
.tk-hours dd { margin: 0; text-align: right; }
.tk-worklogs { margin-top: 8px; font-size: 0.82rem; }
.tk-worklogs summary { cursor: pointer; font-weight: 700; }
.tk-worklogs ul { margin: 6px 0 0; padding: 0; list-style: none; max-height: 240px; overflow: auto; }
.tk-worklogs li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 3px 0; border-bottom: 1px solid var(--rule); }
.tk-wl-who { flex: 1; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-lock { color: var(--gold-text); }
.tk-dates { margin-top: 12px; }
.tk-subtasks { margin: 0; padding: 0; list-style: none; }
.tk-subtasks li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--rule); font-size: 0.86rem; }
.tk-subsum { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tk-comments { display: flex; flex-direction: column; gap: 8px; }
.tk-comment { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.tk-comment header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tk-comment header .spacer { flex: 1; }
.tk-comment.internal { border-left: 4px solid var(--brand-gold); background: var(--note-soft); }
.tk-internal { padding: 0 7px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-text); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.tk-internal-switch { flex-wrap: wrap; }
.tk-internal-switch.on { color: var(--gold-text); font-weight: 700; }
.tk-new-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .tk-new-row { grid-template-columns: minmax(0, 1fr); } }
.tk-new-row .sup-input { width: 100%; box-sizing: border-box; }

/* ---- Tasks > Categories ---- */
.tk-cat-table td { vertical-align: middle; }
.tk-cat-table tr.tk-closed td { opacity: 0.62; }
.tk-epic-input { width: 120px; }
.tk-input-warn { border-color: var(--warn); background: var(--warn-soft); }
.tk-add-internal { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }

/* ---- Hours and dollars (V1.43 step 4): Tasks > Matrix (TasksMatrixPage), the clients' Work tracking app (Client\Apps\Work:
   the read-only board, the issue's hours and cost, the PO summary). Invoiced: the accent; not yet invoiced: gold. ---- */
.tk-dot { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 3px; vertical-align: baseline; background: var(--chip-hover); }
.tk-dot.inv { background: var(--accent); }
.tk-dot.todo { background: var(--brand-gold); }
.tk-mx-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.tk-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tk-seg button { padding: 5px 12px; border: 0; background: var(--panel); color: var(--text); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.tk-seg button + button { border-left: 1px solid var(--border); }
.tk-seg button.on { background: var(--accent-soft); color: var(--accent-strong); font-weight: 800; }
.tk-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tk-mx-period { margin: 0 2px 8px; }

/* The matrix: a table like the board's (its header and first column stay put) */
.tk-matrix { min-width: 100%; border-collapse: separate; border-spacing: 0; }
.tk-matrix th, .tk-matrix td { border-bottom: 1px solid var(--rule); }
.tk-matrix thead th { position: sticky; top: 0; z-index: 3; padding: 5px 8px; background: var(--panel-2); color: var(--text); font-size: 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.tk-matrix .tk-rowhead { position: sticky; left: 0; z-index: 2; min-width: 150px; max-width: 220px; padding: 4px 8px; background: var(--panel); text-align: left; vertical-align: top; font-weight: 400; border-right: 1px solid var(--border); }
.tk-matrix thead .tk-rowhead { z-index: 4; background: var(--panel-2); }
.tk-mx-po { min-width: 128px; }
.tk-mx-badge { display: inline-block; margin-top: 1px; padding: 0 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.tk-mx-badge.active { background: var(--good-soft); color: var(--good-text); }
.tk-mx-badge.closed { background: var(--chip); color: var(--chip-text); }
.tk-mx-cell { padding: 0; vertical-align: top; border-left: 1px solid var(--rule); }
.tk-mx-cell.tk-closed, .tk-matrix thead th.tk-closed, .tk-mx-foot.tk-closed { opacity: 0.55; }
.tk-mx-cell.off .tk-mx-link { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--rule) 6px 7px); }
.tk-mx-link { display: block; min-height: 100%; padding: 4px 7px; color: inherit; text-decoration: none; }
a.tk-mx-link:hover, a.tk-mx-link:focus-visible { background: var(--accent-soft); outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.tk-mx-none { display: block; padding: 4px 7px; color: var(--faint); text-align: center; }
.tk-mx-hours { font-size: 0.9rem; font-weight: 800; }
.tk-mx-line { margin-top: 1px; font-size: 0.72rem; white-space: nowrap; }
.tk-mx-line.inv { color: var(--accent-strong); }
.tk-mx-line.todo { color: var(--gold-text); }
.tk-mx-meta { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.tk-mx-open { padding: 0 7px; border-radius: 999px; background: var(--info-soft); color: var(--info); font-size: 0.7rem; font-weight: 800; }
.tk-norate { padding: 0 7px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 0.7rem; font-weight: 800; }
.tk-norate-note { margin-top: 6px; color: var(--warn); }
.tk-matrix tfoot th, .tk-matrix tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--panel-2); border-top: 1px solid var(--border); }
.tk-matrix tfoot .tk-rowhead { z-index: 4; background: var(--panel-2); }
.tk-mx-foot { padding: 4px 7px; vertical-align: top; font-size: 0.76rem; border-left: 1px solid var(--rule); }
.tk-mx-used { white-space: nowrap; }
.tk-mx-left { color: var(--good-text); font-weight: 700; }
.tk-mx-over { color: var(--bad); font-weight: 800; }

/* A PO's bar: invoiced then not yet invoiced, of its amount */
.tk-bar { display: flex; height: 6px; margin: 3px 0; border-radius: 999px; background: var(--chip); overflow: hidden; }
.tk-bar .inv { background: var(--accent); }
.tk-bar .todo { background: var(--brand-gold); }

/* The clients' board: read only (a card opens, nothing moves) */
.tk-readonly .tk-card { cursor: pointer; }
.tk-work-intro { margin: 0 2px 8px; }
.tk-work-desc { white-space: pre-wrap; }
.tk-work-money { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tk-work-money th, .tk-work-money td { padding: 3px 4px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.tk-work-money th:first-child { text-align: left; font-weight: 600; }
.tk-work-money thead th { color: var(--muted); font-size: 0.74rem; font-weight: 800; }
.tk-work-money tr.strong th, .tk-work-money tr.strong td { font-weight: 800; border-bottom: 0; }

/* The PO summary */
.tk-po { margin-bottom: 14px; }
.tk-po.tk-closed { opacity: 0.7; }
.tk-po-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tk-po-head h2 { margin: 0; }
.tk-po-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 8px 0 4px; font-size: 0.92rem; }
.tk-po-part { white-space: nowrap; }
.tk-po-part.inv strong { color: var(--accent-strong); }
.tk-po-part.todo strong { color: var(--gold-text); }
.tk-po-op { color: var(--muted); font-weight: 800; }
.tk-po-bar { height: 12px; }
.tk-po-left { margin-bottom: 4px; }
.tk-po-table-wrap { max-width: 100%; margin-top: 10px; overflow-x: auto; }
.tk-po-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.86rem; }
.tk-po-table th, .tk-po-table td { padding: 5px 8px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.tk-po-table thead th { color: var(--muted); font-size: 0.74rem; font-weight: 800; text-align: center; }
.tk-po-table th[scope="row"], .tk-po-table thead th:first-child { text-align: left; }
.tk-po-table tbody th[scope="row"] { font-weight: 600; white-space: normal; }
.tk-po-table tfoot th, .tk-po-table tfoot td { border-top: 1px solid var(--border); border-bottom: 0; font-weight: 800; }
.tk-share { min-width: 110px; }
.tk-share-bar { display: inline-block; width: 60px; height: 6px; margin-right: 6px; border-radius: 999px; background: var(--chip); overflow: hidden; vertical-align: middle; }
.tk-share-bar span { display: block; height: 100%; background: var(--accent); }

/* ---- My calendar (V1.43 step 5, TasksCalendarPage): a week grid, 15-minute slots of 12 px, blocks coloured per client ---- */
.tk-cal-title { margin-left: 6px; }
.tk-cal-jira { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.tk-cal-weekbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
.tk-cal-bar { display: inline-block; width: 220px; max-width: 100%; height: 10px; border-radius: 999px; background: var(--chip); overflow: hidden; vertical-align: middle; }
.tk-cal-bar i { display: block; height: 100%; background: var(--accent); }
.tk-cal-bar.small { width: 90px; height: 7px; margin-left: 6px; }
.tk-cal-bar.over i { background: var(--good); }
.tk-cal-nb { margin: 0; }
.tk-cal { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; align-items: start; }
/* V1.44: the hours scroll inside the calendar (the day heads and the hours column stay put); the layers, bottom to top: the
   blocks 1, the ghost 2, a block being dragged 3, the line of the current time 4, the hours 5, the day heads 6, the corner 7 */
.tk-cal-grid { position: relative; display: grid; grid-template-columns: 54px repeat(7, minmax(90px, 1fr)); max-height: max(360px, calc(100vh - 300px)); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); user-select: none; -webkit-user-select: none; }
.tk-cal-corner, .tk-cal-dayhead { position: sticky; top: 0; z-index: 6; background: var(--head-bg); border-bottom: 1px solid var(--rule); }
.tk-cal-corner { left: 0; z-index: 7; }
.tk-cal-dayhead { display: flex; flex-direction: column; align-items: center; padding: 4px 0; font-size: 0.8rem; border-left: 1px solid var(--rule); }
.tk-cal-dayhead.today strong { color: var(--accent-strong); }
.tk-cal-hours { grid-column: 1; position: sticky; left: 0; z-index: 5; background: var(--panel); }
.tk-cal-hour { height: 48px; padding: 0 6px; color: var(--muted); font-size: 0.72rem; text-align: right; border-top: 1px solid var(--rule); box-sizing: border-box; }
/* A day: its hour lines every 48 px (4 slots of 12 px: TasksCalendarPage SlotPx); drag in it to draw a range */
.tk-cal-day { position: relative; border-left: 1px solid var(--rule); background-image: repeating-linear-gradient(to bottom, var(--rule) 0, var(--rule) 1px, transparent 1px, transparent 48px); cursor: crosshair; }
.tk-cal-day.today { background-color: var(--accent-soft); }
.tk-cal-block { position: absolute; z-index: 1; overflow: hidden; padding: 2px 5px; border-radius: 6px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--text); font-size: 0.72rem; line-height: 1.2; cursor: grab; box-sizing: border-box; touch-action: auto; }
.tk-cal-block.locked { cursor: pointer; border-left-style: dashed; }
.tk-cal-block.selected { outline: 2px solid var(--accent-strong); }
.tk-cal-block:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tk-cal-block.tk-busy { opacity: 0.6; }
/* Dragged (tasks.js): it follows the mouse over the others, its new start or duration in a label */
.tk-cal-block.tk-cal-drag { z-index: 3; opacity: 0.88; cursor: grabbing; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); will-change: transform; overflow: visible; }
.tk-cal-block.tk-cal-drag[data-tip]::after { content: attr(data-tip); position: absolute; top: -18px; left: 0; padding: 0 6px; border-radius: 6px; background: var(--text); color: var(--panel); font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.tk-cal-moving, .tk-cal-moving * { cursor: grabbing !important; }
.tk-cal-block-head { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tk-cal-dur { color: var(--muted); }
.tk-cal-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-cal-lock { font-size: 0.85rem !important; }
.tk-cal-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
.tk-cal-resize:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }
/* The range being drawn, or the slot an issue is dragged over (tasks.js places it) */
.tk-cal-ghost { position: absolute; z-index: 2; box-sizing: border-box; border: 2px dashed var(--accent); border-radius: 6px; background: color-mix(in srgb, var(--accent-soft) 80%, transparent); pointer-events: none; }
.tk-cal-ghost span { position: absolute; top: 2px; left: 4px; color: var(--accent-strong); font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
/* The line of the current time (the owner: like Clockwork Pro): today's column, above the blocks, never in the mouse's way */
.tk-cal-grid { --tk-now: #e0362c; --tk-now-text: #ffffff; }
:root[data-theme="dark"] .tk-cal-grid { --tk-now: #ff6b62; --tk-now-text: #1b1b1b; }
.tk-cal-now { position: absolute; z-index: 4; height: 0; border-top: 2px solid var(--tk-now); pointer-events: none; }
.tk-cal-now i { position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--tk-now); }
.tk-cal-now span { position: absolute; left: 8px; top: -17px; padding: 0 4px; border-radius: 4px; background: var(--tk-now); color: var(--tk-now-text); font-size: 0.66rem; font-weight: 800; line-height: 14px; }
/* The new worklog's modal (TaskWorklogDialog): the person's issues, searchable */
.tk-wl-pick { max-height: 240px; margin: 4px 0 10px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.tk-wl-option { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; width: 100%; padding: 5px 8px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--text); font: inherit; font-size: 0.84rem; text-align: left; cursor: pointer; }
.tk-wl-option:hover, .tk-wl-option:focus-visible { background: var(--panel-2); outline: none; }
.tk-wl-option.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.tk-wl-sum { flex: 1; min-width: 120px; overflow-wrap: anywhere; }
.tk-wl-where { flex-basis: 100%; margin: 0; }
.tk-wl-none { padding: 8px; }
.tk-wl-when label { display: inline-flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 0.8rem; }
/* Log time in the issue dialog (TaskIssueDialog) */
.tk-logtime { margin-top: 10px; }
.tk-logtime summary { cursor: pointer; font-weight: 800; color: var(--accent-strong); }
.tk-logtime-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; margin-top: 6px; }
.tk-logtime-form label { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 0.78rem; }
.tk-logtime-form .wide { grid-column: 1 / -1; }
.tk-logtime-done { margin-top: 6px; color: var(--good-text); font-weight: 700; font-size: 0.82rem; }
.tk-recent { padding: 0 6px; border-radius: 999px; background: var(--good-soft); color: var(--good-text); font-size: 0.66rem; font-weight: 800; }
.tk-cal-c0 { background: var(--accent-soft); border-left-color: var(--accent); }
.tk-cal-c1 { background: var(--good-soft); border-left-color: var(--good); }
.tk-cal-c2 { background: var(--info-soft); border-left-color: var(--info); }
.tk-cal-c3 { background: var(--gold-soft); border-left-color: var(--brand-gold); }
.tk-cal-c4 { background: var(--note-soft); border-left-color: var(--warn); }
.tk-cal-c5 { background: var(--bad-soft); border-left-color: var(--bad); }
.tk-cal-internal { background: var(--panel-2); border-left-color: var(--muted); }
.tk-cal-none { background: var(--chip); border-left-color: var(--faint); }
.tk-cal-side { max-height: 780px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.tk-cal-group { margin: 10px 0 4px; font-weight: 700; font-size: 0.82rem; }
.tk-cal-issue { margin: 4px 0; padding: 4px 6px; border-radius: 6px; border-left: 3px solid var(--accent); font-size: 0.78rem; cursor: grab; }
.tk-cal-issue[draggable="false"] { cursor: default; }
.tk-cal-edit { margin-top: 12px; }
.tk-cal-edit label { display: inline-flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: var(--muted); }
.tk-cal-desc-field { display: flex !important; margin-top: 8px; }
.tk-cal-desc-field textarea { width: 100%; }
.tk-cal-min { width: 90px; }
.tk-cal-desc { white-space: pre-wrap; }
.tk-cal-plan { margin-top: 12px; }
.tk-plan-mine { border-collapse: collapse; }
.tk-plan-mine th, .tk-plan-mine td { padding: 4px 10px; border-bottom: 1px solid var(--rule); text-align: left; font-size: 0.85rem; }
@media (max-width: 900px) { .tk-cal { grid-template-columns: 1fr; } }

/* ---- The planning (V1.43 step 5, TasksPlanningPage): weeks in columns, PO groups of category x person rows ---- */
.tk-plan { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; }
.tk-plan th, .tk-plan td { padding: 3px 6px; border-bottom: 1px solid var(--rule); font-size: 0.82rem; text-align: center; }
.tk-plan thead th { position: sticky; top: 0; z-index: 2; background: var(--head-bg); }
.tk-plan .tk-rowhead { position: sticky; left: 0; z-index: 1; min-width: 210px; background: var(--panel); text-align: left; }
.tk-plan thead .tk-rowhead { z-index: 3; background: var(--head-bg); }
.tk-plan th.now, .tk-plan td.now { background: var(--accent-soft); }
.tk-plan th.past { color: var(--muted); }
.tk-plan-group th { padding-top: 10px; background: var(--panel-2) !important; }
.tk-plan-money { display: inline-flex; flex-wrap: wrap; gap: 10px; margin-left: 12px; font-weight: 400; font-size: 0.8rem; }
.tk-plan-amber { padding: 0 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.tk-plan-input { width: 54px; padding: 1px 4px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; background: var(--field); color: var(--text); text-align: right; }
.tk-plan-sum td, .tk-plan-sum th { font-weight: 700; }
.tk-plan-add td { text-align: left; }
.tk-plan-add select { margin-right: 6px; }
.tk-plan-over { background: var(--warn-soft); color: var(--warn); }
.tk-plan-max { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--muted); font-size: 0.75rem; }
/* V1.44: every PO > its categories > every employee, typed like a spreadsheet and saved as you go */
.tk-plan-help { margin: 0 2px 6px; }
.tk-plan-state { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.tk-plan-state.ok { background: var(--good-soft); color: var(--good-text); }
.tk-plan-state.busy { background: var(--info-soft); color: var(--info); }
.tk-plan-state.bad { background: var(--bad-soft); color: var(--bad); }
.tk-plan-state.warn { background: var(--warn-soft); color: var(--warn); }
.tk-plan-fold { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; }
.tk-plan-cat th, .tk-plan-cat td { padding-top: 5px; background: color-mix(in srgb, var(--panel-2) 55%, var(--panel)); color: var(--muted); font-weight: 800; }
.tk-plan-cat .tk-rowhead { background: color-mix(in srgb, var(--panel-2) 55%, var(--panel)); padding-left: 12px; }
.tk-plan-person .tk-rowhead { padding-left: 24px; font-weight: 400; }
.tk-plan-person td { padding: 1px 3px; }
.tk-plan-input.edited { border-color: var(--accent); background: var(--accent-soft); }
.tk-plan-input.bad { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.tk-plan-input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
@media (max-width: 700px) {
    .tk-plan .tk-rowhead { min-width: 128px; max-width: 150px; }
    .tk-plan-person .tk-rowhead { padding-left: 12px; }
    .tk-plan-group .tk-rowhead { max-width: none; }
    .tk-plan-money { display: flex; margin: 2px 0 0; }
}

/* ---- V1.44 step 6: My tasks (Client\Apps\Tasks\MyTasksPage.razor): my week, the requests the assistant found, my issues, the
   Inbox sorting tab, the assistant's state ---- */
.tk-my-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.tk-my-head .tk-h { margin-top: 4px; }
.tk-my-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tk-my-week .tk-cal-weekbar { margin-top: 2px; }
.tk-my-plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 0.84rem; }
.tk-my-plan li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tk-my-plan-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tk-my-plan-hours { color: var(--muted); white-space: nowrap; }
.tk-my-plan .tk-cal-bar.over i { background: var(--warn); }

/* A request */
.tk-my-req { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--panel); }
.tk-my-req.tk-busy { opacity: 0.55; pointer-events: none; }
.tk-my-req-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 0.84rem; }
.tk-my-req-top .spacer { flex: 1; }
.tk-my-req-sum { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; font-weight: 700; }
.tk-my-req-more { margin-top: 4px; font-size: 0.84rem; }
.tk-my-req-more summary { color: var(--muted); font-weight: 700; cursor: pointer; }
.tk-my-desc { margin: 4px 0; white-space: pre-wrap; }
.tk-my-preview { margin: 4px 0 0; padding: 6px 10px; border-left: 3px solid var(--rule); background: var(--panel-2); color: var(--muted); white-space: pre-wrap; max-height: 220px; overflow: auto; }
.tk-my-cat { min-width: 220px; max-width: 100%; }
.tk-my-reply { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--info-soft); }
.tk-my-reply pre { margin: 6px 0 0; white-space: pre-wrap; font: inherit; font-size: 0.85rem; }
.tk-my-src { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--chip); color: var(--chip-text); font-size: 0.68rem; font-weight: 800; white-space: nowrap; }
.tk-my-src.email { background: var(--info-soft); color: var(--info); }
.tk-my-src.teams { background: var(--accent-soft); color: var(--accent-strong); }
.tk-my-src.meeting { background: var(--gold-soft); color: var(--gold-text); }
.tk-my-due { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--chip); color: var(--chip-text); font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.tk-my-due.soon { background: var(--warn-soft); color: var(--warn); }
.tk-my-due.late { background: var(--bad-soft); color: var(--bad); }

/* An issue */
.tk-my-status { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; font-size: 0.8rem; }
.tk-my-issue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 4px 6px; border-bottom: 1px solid var(--rule); font-size: 0.85rem; }
.tk-my-issue:hover { background: var(--panel-2); }
.tk-my-issue.tk-busy { opacity: 0.5; pointer-events: none; }
.tk-my-issue .spacer { flex: 1; }
.tk-my-issue .tk-key { font-size: 0.78rem; }
.tk-my-issue-sum { min-width: 0; max-width: 520px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tk-my-done { width: 16px; height: 16px; accent-color: var(--good-text); cursor: pointer; }

/* Inbox sorting */
.tk-my-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.tk-my-table th, .tk-my-table td { padding: 5px 8px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.tk-my-table thead th { color: var(--muted); font-size: 0.74rem; font-weight: 800; }
.tk-my-table tr.tk-busy { opacity: 0.5; }
.tk-my-table tr.tk-closed td { color: var(--muted); }
.tk-my-actions { white-space: nowrap; text-align: right !important; }
.tk-my-actions .btn + .btn { margin-left: 4px; }
.tk-my-pct { font-weight: 700; color: var(--muted); }
.tk-my-pct.ok { color: var(--good-text); }

/* The assistant's state */
.tk-my-parts { margin: 4px 0; padding: 0; list-style: none; font-size: 0.85rem; }
.tk-my-parts li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px 0; }
.tk-my-onoff { min-width: 34px; padding: 0 8px; border-radius: 999px; background: var(--chip); color: var(--chip-text); font-size: 0.7rem; font-weight: 800; text-align: center; }
.tk-my-onoff.on { background: var(--good-soft); color: var(--good-text); }
@media (max-width: 700px) {
    .tk-my-issue-sum { max-width: 100%; white-space: normal; }
    .tk-my-cat { min-width: 0; width: 100%; }
    .tk-my-actions { white-space: normal; }
}

/* ---- V1.63: team planning and skills (Apps\Tasks\TeamSuggestionPage.razor, TeamSkillsPage.razor, MyTeamPlanPage.razor). Full page
   width: the grid and the main column grow, the side panel keeps 340px and goes under them on a phone. PO colours: eight
   tints made from the theme's own colours (tk-team-c0 to c7), the internal projects grey (tk-team-int). ---- */
.tk-team-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; margin-top: 12px; align-items: start; }
.tk-team-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tk-team-side { position: sticky; top: 8px; max-height: calc(100vh - 120px); overflow: auto; }
@media (max-width: 1100px) { .tk-team-layout { grid-template-columns: minmax(0, 1fr); } .tk-team-side { position: static; max-height: none; } }
.tk-team-grid td.tk-team-cell { vertical-align: top; text-align: left; min-width: 110px; }
.tk-team-left { text-align: left !important; }
.tk-team-sub { display: block; color: var(--os-text-2); font-size: 0.72rem; font-weight: 400; }
.tk-team-chip { display: block; margin: 0 0 3px; padding: 1px 6px; border-radius: 6px; font-size: 0.72rem; line-height: 1.35; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; cursor: help; }
.tk-team-cap { display: block; color: var(--os-text-2); font-size: 0.7rem; }
.tk-team-cap.free { color: var(--os-good-text); font-weight: 600; }
.tk-team-c0 { background: var(--os-accent-soft); color: var(--os-accent-text); }
.tk-team-c1 { background: var(--os-info-soft); color: var(--os-info); }
.tk-team-c2 { background: var(--os-good-soft); color: var(--os-good-text); }
.tk-team-c3 { background: var(--os-warn-soft); color: var(--os-warn); }
.tk-team-c4 { background: var(--os-bad-soft); color: var(--os-bad); }
.tk-team-c5 { background: color-mix(in srgb, var(--os-accent) 22%, var(--os-surface)); color: var(--os-text); }
.tk-team-c6 { background: color-mix(in srgb, var(--os-info) 22%, var(--os-surface)); color: var(--os-text); }
.tk-team-c7 { background: color-mix(in srgb, var(--os-good) 22%, var(--os-surface)); color: var(--os-text); }
.tk-team-int { background: var(--os-neutral-soft); color: var(--os-neutral-text); }
.tk-team-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: middle; }
.tk-team-status { padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.tk-team-status.ok { background: var(--os-good-soft); color: var(--os-good-text); }
.tk-team-status.draft { background: var(--os-info-soft); color: var(--os-info); }
.tk-team-from { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.tk-team-po { padding: 8px 0; border-bottom: 1px solid var(--os-border-subtle); }
.tk-team-po.short .tk-team-po-title { color: var(--os-warn); }
.tk-team-po-title { font-weight: 600; font-size: 0.85rem; }
.tk-team-po-figures { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; font-size: 0.78rem; }
.tk-team-conflicts { margin: 0; padding-left: 18px; font-size: 0.82rem; }
.tk-team-conflicts li { margin-bottom: 4px; }
.tk-team-free { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--os-border-subtle); font-size: 0.82rem; }
.tk-team-sentence { display: flex; gap: 8px; align-items: flex-start; }
.tk-team-sentence textarea { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--os-border); border-radius: 8px; background: var(--os-field); color: var(--os-text); font: inherit; }
.tk-team-reading { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--os-border); border-radius: 8px; background: var(--os-surface-sunken); }
.tk-team-actions { display: flex; gap: 8px; margin-top: 8px; }
.tk-team-rulelist { margin: 0; padding: 0; list-style: none; }
.tk-team-rulelist li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--os-border-subtle); font-size: 0.85rem; }
.tk-team-rulelist li.off { color: var(--os-text-2); }
.tk-team-off { display: inline-flex; align-items: center; gap: 4px; margin: 0 6px 4px 0; padding: 1px 8px; border-radius: 999px; background: var(--os-neutral-soft); color: var(--os-neutral-text); font-size: 0.75rem; }
.tk-team-addoff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.tk-skill-matrix td.tk-skill-cell { padding: 2px; }
.tk-skill-cell select { padding: 1px 2px; border: 1px solid var(--os-border); border-radius: 6px; background: var(--os-field); color: var(--os-text); }
.tk-skill-cell.l1, span.tk-skill-cell.l1 { background: var(--os-info-soft); }
.tk-skill-cell.l2, span.tk-skill-cell.l2 { background: var(--os-good-soft); }
.tk-skill-cell.l3, span.tk-skill-cell.l3 { background: color-mix(in srgb, var(--os-good) 35%, var(--os-surface)); }
.tk-skill-cell.changed { outline: 2px solid var(--os-accent); outline-offset: -2px; }
span.tk-skill-cell { padding: 0 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.tk-skill-work { padding: 8px 0; border-bottom: 1px solid var(--os-border-subtle); }
.tk-skill-work:not(.po) { padding-left: 18px; }
.tk-skill-work-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.85rem; }
.tk-skill-needs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.tk-skill-need { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; }
.tk-skill-need.ok { background: var(--os-good-soft); color: var(--os-good-text); }
.tk-skill-need.proposed { border: 1px dashed var(--os-border); background: var(--os-surface-sunken); color: var(--os-text); }
.tk-skill-need select { padding: 0 2px; border: 1px solid var(--os-border); border-radius: 6px; background: var(--os-field); color: var(--os-text); font-size: 0.75rem; }
.tk-skill-add select { font-size: 0.78rem; }

/* V1.65: the board's search (any task: key, number, summary, person, status, category, PO, client) */
.tk-search { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 260px; min-width: 200px; max-width: 420px; }
.tk-search input { flex: 1; min-width: 0; }
.tk-search-count { font-size: 0.75rem; color: var(--os-text-3); white-space: nowrap; }