/* ============================================================
   GesTask — Dettaglio di una task
   Intestazione, discussione, menzioni, assegnatari ed editor.
   ============================================================

   Queste regole vivevano in due blocchi `registerCss` dentro la vista, per
   circa settecentocinquanta righe incorporate nell'HTML a ogni richiesta.
   Un foglio in linea non viene messo in cache dal browser e non si può
   condividere: la stessa discussione compare anche nel frammento caricato
   dal ricaricamento periodico dei commenti, che senza queste regole
   arriverebbe senza stile.

   I riferimenti a `--bs-*` sono stati riportati ai token Prime, che è la
   sorgente vera: passavano comunque per il ponte verso Bootstrap, ma con
   un salto in più e senza dire da dove veniva il colore. */

/* Il guscio del titolo e la freccia che gli galleggia accanto sono in
   pages.css, condivisi con l'intestazione della bacheca. */
.task-title-shell h1 {
    overflow-wrap: anywhere;
}
.task-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}
/* .task-action-button, le sue varianti e .task-action-count vivono ora in
frontend/web/css/buttons.css: sono lo stile di riferimento di ogni pulsante
dell'applicazione, non più una regola locale di questa vista. */
@media (max-width: 767.98px) {
    .task-quick-actions {
        justify-content: flex-start;
        width: 100%;
    }
}
.chat-panel { overflow: hidden; }
.chat-thread { display: flex; flex-direction: column; gap: 16px; }
.task-panel-count-badge {
    background: var(--p-content-alt-background);
    border: 1px solid var(--p-content-border-color);
    color: var(--p-text-color);
}

/*
 * I due pulsanti che aprono tempo di lavoro e cronologia.
 *
 * Stanno nella fila delle azioni rapide della testata, accanto a preferito e
 * sottoscrizione, e ne condividono la forma. Il numero che portano — ore
 * registrate, modifiche — evita di doverli aprire per sapere se contengono
 * qualcosa; è lo stesso posto in cui il pulsante del «mi piace» tiene il
 * proprio conteggio.
 */
.task-action-button--panel:hover,
.task-action-button--panel:focus-visible {
    background: var(--p-content-alt-background);
    border-color: var(--p-primary-color);
    color: var(--p-text-color);
}

/* Il totale delle ore è un valore, non un'etichetta: si stacca dal nome del
   pulsante come il conteggio dei «mi piace». */
.task-action-button--panel .task-action-count {
    background: var(--p-content-alt-background);
    border-radius: var(--p-border-radius-full);
    font-size: var(--p-font-size-xs);
    padding: .05rem .4rem;
    text-align: center;
}
.history-list { display: flex; flex-direction: column; gap: .65rem; list-style: none; margin: 0; padding: 0; }
.history-entry {
    border-left: 2px solid var(--p-content-border-color);
    padding: .1rem 0 .1rem .75rem;
}
.history-meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .78rem; }
.history-author { color: var(--p-text-emphasis-color); font-weight: 600; }
.history-time { color: var(--p-text-muted-color); }
.history-change { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; font-size: .88rem; }
.history-field { font-weight: 600; }
.history-old { color: var(--p-text-muted-color); text-decoration: line-through; }
.history-arrow { color: var(--p-text-muted-color); }
.history-new { color: var(--p-text-color); font-weight: 500; }
.chat-message { align-items: flex-start; display: flex; gap: 12px; }
.chat-message.chat-reply { margin-left: 42px; margin-top: 12px; }
.chat-avatar {
    align-items: center;
    background: var(--p-primary-subtle-color);
    border: 1px solid var(--p-primary-border-color);
    border-radius: 50%;
    color: var(--p-primary-emphasis-color);
    display: flex;
    flex: 0 0 34px;
    font-size: 0.82rem;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    width: 34px;
}
.chat-content { flex: 1; min-width: 0; }
.chat-bubble {
    background: var(--p-content-deep-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-xl);
    padding: 12px 14px;
    transition: background-color .15s ease, border-color .15s ease;
}
.chat-bubble:hover { background: var(--p-content-alt-background); }
.chat-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.chat-author { color: var(--p-text-emphasis-color); font-weight: 700; }
.chat-time { color: var(--p-text-muted-color); font-size: 0.82rem; }
.chat-text { color: var(--p-text-color); line-height: 1.45; overflow-wrap: anywhere; }
/* Il commento è Markdown: blocchi più stretti che in una pagina, niente margine in fondo alla nuvoletta. */
.chat-text :is(p, ul, ol, pre, blockquote, table) { margin-bottom: .5rem; }
.chat-text :is(h1, h2, h3, h4, h5, h6) { font-size: 1rem; font-weight: 700; margin: .75rem 0 .35rem; }
.chat-text > :first-child { margin-top: 0; }
.chat-text > :last-child { margin-bottom: 0; }
.chat-text ul, .chat-text ol { padding-left: 1.25rem; }
.chat-mentions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chat-mention {
    background: var(--p-info-subtle-color);
    border: 1px solid var(--p-info-border-color);
    border-radius: var(--p-border-radius-full);
    color: var(--p-info-emphasis-color);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 3px 8px;
}

/* I riferimenti a bacheche e task stanno dentro il testo, non nella fila di
   pillole sotto: li si cita mentre si scrive una frase, e staccarli dal punto
   in cui sono nominati farebbe perdere a che cosa si riferiscono. */
a.chat-mention {
    display: inline;
    text-decoration: none;
    white-space: nowrap;
}

a.chat-mention:hover,
a.chat-mention:focus-visible {
    background: var(--p-info-color);
    color: var(--p-info-contrast-color, #fff);
}

.chat-mention--board {
    background: var(--p-primary-subtle-color);
    border-color: var(--p-primary-border-color);
    color: var(--p-primary-emphasis-color);
}

a.chat-mention--board:hover,
a.chat-mention--board:focus-visible {
    background: var(--p-primary-color);
    color: var(--p-primary-contrast-color, #fff);
}

/* Il riferimento che non si risolve piu — task cancellata, bacheca di un team
   lasciato — resta leggibile ma spento: dice cosa si citava senza promettere
   una pagina che non si aprirebbe. */
.chat-mention.is-missing {
    background: var(--p-content-alt-background);
    border-color: var(--p-content-border-color);
    color: var(--p-text-muted-color);
    font-weight: 500;
}
.chat-actions {
    align-items: center;
    border-top: 1px solid var(--p-content-border-color);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 10px;
    padding-top: 8px;
}
.comment-like-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--p-border-radius-full);
    color: var(--p-text-muted-color);
    display: inline-flex;
    font-size: .85rem;
    font-weight: 700;
    gap: .32rem;
    line-height: 1;
    min-height: 1.8rem;
    padding: .25rem .55rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.comment-like-button:hover,
.comment-like-button:focus-visible,
.comment-like-button.is-liked {
    background: var(--p-primary-subtle-color);
    color: var(--p-primary-emphasis-color);
    outline: none;
}
.comment-like-button.is-pending { opacity: .65; pointer-events: none; }
.comment-like-button i { line-height: 0; }
.comment-like-count { min-width: 1ch; text-align: left; }
.comment-reply-button {
    align-items: center;
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-full);
    color: var(--p-text-muted-color);
    display: inline-flex;
    font-size: .85rem;
    font-weight: 700;
    gap: .35rem;
    line-height: 1;
    min-height: 1.8rem;
    padding: .25rem .65rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.comment-reply-button:hover,
.comment-reply-button:focus-visible {
    background: var(--p-content-alt-background);
    border-color: var(--p-primary-border-color);
    color: var(--p-primary-emphasis-color);
    outline: none;
}
.comment-reply-button i { line-height: 0; }
.chat-reply-form {
    flex: 1 0 100%;
    margin-top: 8px;
}
.chat-reply-form form {
    max-width: 100%;
}
.chat-composer {
    background: var(--p-content-background);
    border-top: 1px solid var(--p-content-border-color);
    margin: 18px -24px -24px;
    padding: 18px 24px 24px;
}
.chat-input { border-radius: var(--p-border-radius-lg); resize: vertical; }
.chat-input:focus { border-color: var(--p-primary-color); box-shadow: var(--p-focus-ring-shadow); }
.chat-empty {
    background: var(--p-content-deep-background);
    border: 1px dashed var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    padding: 18px;
    text-align: center;
}
/* Mention autocomplete */
.mention-dropdown {
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    box-shadow: var(--p-shadow-lg);
    margin: 0 0 12px;
    max-height: 220px;
    min-width: 220px;
    overflow-y: auto;
    padding: 6px;
    width: 100%;
}
.mention-option {
    align-items: center;
    border-radius: var(--p-border-radius-md);
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 7px 10px;
    transition: background-color .12s;
}
.mention-option:hover,
.mention-option.mention-option--active {
    background: var(--p-primary-subtle-color);
    color: var(--p-primary-emphasis-color);
}
.mention-option__avatar {
    align-items: center;
    background: var(--p-primary-subtle-color);
    border: 1px solid var(--p-primary-border-color);
    border-radius: 50%;
    color: var(--p-primary-emphasis-color);
    display: flex;
    flex: 0 0 28px;
    font-size: 0.75rem;
    font-weight: 700;
    height: 28px;
    justify-content: center;
    width: 28px;
}
.mention-option__avatar--team {
    background: var(--p-info-subtle-color);
    border-color: var(--p-info-border-color);
    color: var(--p-info-emphasis-color);
    font-size: 0.9rem;
}

/* Nell'elenco dei suggerimenti bacheche e task portano un'icona al posto
   delle iniziali: non hanno un volto, e un cerchio con due lettere le farebbe
   leggere come persone. */
.mention-option__avatar--board,
.mention-option__avatar--task {
    background: var(--p-content-alt-background);
    border-color: var(--p-content-border-color);
    color: var(--p-text-color);
    font-size: 0.85rem;
}

.mention-option__avatar--board i,
.mention-option__avatar--task i { line-height: 0; }
.mention-option__info { min-width: 0; }
.mention-option__label { font-weight: 600; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-option__type { color: var(--p-text-muted-color); font-size: 0.75rem; }
/* Inline @mention chip in comment text */
.chat-text .mention-chip {
    background: var(--p-info-subtle-color);
    border-radius: var(--p-border-radius-xs);
    color: var(--p-info-emphasis-color);
    font-weight: 600;
    padding: 1px 4px;
}
.btn-replies-toggle {
    align-items: center;
    background: none;
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-full);
    color: var(--p-text-muted-color);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 600;
    gap: 5px;
    margin: 8px 0 2px 46px;
    padding: 4px 12px;
    transition: background-color .15s ease, color .15s ease;
}
.btn-replies-toggle:hover {
    background: var(--p-primary-subtle-color);
    border-color: var(--p-primary-border-color);
    color: var(--p-primary-emphasis-color);
}
.btn-replies-toggle svg { flex-shrink: 0; }
.chat-replies-container { margin-top: 6px; }
.chat-panel-header { user-select: none; }
.chat-panel-header:hover .chat-panel-chevron { opacity: 0.6; }
.relation-autocomplete { position: relative; }
.relation-autocomplete-menu {
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    box-shadow: var(--p-shadow-lg);
    left: 0;
    max-height: 220px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1060;
}
.relation-autocomplete-option {
    background: transparent;
    border: 0;
    color: var(--p-text-color);
    display: block;
    padding: .55rem .75rem;
    text-align: left;
    width: 100%;
}
.relation-autocomplete-option:focus,
.relation-autocomplete-option:hover {
    background: var(--p-content-deep-background);
}
.relation-autocomplete-empty {
    color: var(--p-text-muted-color);
    padding: .55rem .75rem;
}
.task-assignee-readonly-list,
.task-assignee-selected {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.task-assignee-selected {
    margin-bottom: .4rem;
}
.task-assignee-chip {
    align-items: center;
    background: var(--p-primary-subtle-color);
    border: 1px solid var(--p-primary-border-color);
    border-radius: var(--p-border-radius-full);
    color: var(--p-primary-emphasis-color);
    display: inline-flex;
    font-size: .82rem;
    gap: .35rem;
    padding: .25rem .55rem;
}
.task-assignee-chip button {
    background: transparent;
    border: 0;
    color: inherit;
    line-height: 1;
    padding: 0;
}
.task-assignee-autocomplete {
    position: relative;
}
.task-assignee-menu {
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    box-shadow: var(--p-shadow-lg);
    left: 0;
    max-height: 220px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: calc(100% + .25rem);
    z-index: 1065;
}
.task-assignee-option {
    background: transparent;
    border: 0;
    color: var(--p-text-color);
    display: block;
    padding: .55rem .75rem;
    text-align: left;
    width: 100%;
}
.task-assignee-option:hover,
.task-assignee-option:focus {
    background: var(--p-content-deep-background);
}
.task-assignee-empty {
    color: var(--p-text-muted-color);
    padding: .55rem .75rem;
}

.task-description-editor-shell {
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    overflow: hidden;
}

.task-description-source.is-enhanced {
    display: none;
}

/* Toast UI ricava l'altezza dallo stile inline del contenitore: la
   maniglia nativa di resize la modifica allo stesso modo di setHeight(). */
.task-description-visual-editor {
    background: var(--p-content-background);
    resize: vertical;
    overflow: hidden;
    min-height: 200px;
    position: relative;
}

/* La maniglia nativa non si può stilizzare ovunque (Firefox la ignora):
   sopra ci va un segno a righe diagonali che lascia passare i clic. */
.task-description-visual-editor::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        transparent 0 45%,
        var(--p-text-muted-color) 45% 52%,
        transparent 52% 65%,
        var(--p-text-muted-color) 65% 72%,
        transparent 72% 85%,
        var(--p-text-muted-color) 85% 92%,
        transparent 92%
    );
    transition: opacity .15s;
    opacity: .7;
}

.task-description-visual-editor:hover::after {
    opacity: 1;
    background-color: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
    border-radius: 2px;
}

/* Le schede Markdown/WYSIWYG stanno nello stesso angolo della maniglia. */
.task-description-visual-editor .toastui-editor-mode-switch {
    padding-right: 20px;
}

.task-description-editor-shell .form-text {
    background: var(--p-content-deep-background);
    border-top: 1px solid var(--p-content-border-color);
    color: var(--p-text-muted-color);
    margin: 0;
    padding: 0.65rem 0.85rem;
}

.toastui-editor-defaultUI {
    border: 0 !important;
    font-family: inherit !important;
}

.toastui-editor-defaultUI-toolbar {
    background: var(--p-content-deep-background) !important;
    border-bottom-color: var(--p-content-border-color) !important;
}

.toastui-editor-toolbar-icons {
    border-color: transparent !important;
}

.toastui-editor-defaultUI button {
    border-radius: var(--p-border-radius-sm) !important;
}

.toastui-editor-contents,
.toastui-editor-md-container .toastui-editor-md-preview,
.toastui-editor-ww-container {
    background: var(--p-content-background) !important;
    color: var(--p-text-color) !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

.toastui-editor-contents h1,
.toastui-editor-contents h2,
.toastui-editor-contents h3 {
    color: var(--p-text-emphasis-color) !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
}

.toastui-editor-contents p,
.toastui-editor-contents li {
    color: var(--p-text-color) !important;
}

.toastui-editor-contents blockquote {
    border-left-color: var(--p-primary-color) !important;
    color: var(--p-text-muted-color) !important;
}

/* Il segnaposto dell'editor usa la classe `.placeholder`, che Bootstrap
   riserva agli scheletri di caricamento: senza questo reset il testo
   diventa un rettangolo pieno del colore del testo. */
.toastui-editor-defaultUI .placeholder {
    display: inline;
    min-height: 0;
    vertical-align: baseline;
    cursor: text;
    background-color: transparent !important;
    opacity: 1;
    color: var(--p-form-field-placeholder-color) !important;
}

.toastui-editor-mode-switch {
    background: var(--p-content-deep-background) !important;
    border-top-color: var(--p-content-border-color) !important;
}

.toastui-editor-mode-switch .tab-item {
    color: var(--p-text-muted-color) !important;
}

.toastui-editor-mode-switch .tab-item.active {
    color: var(--p-text-color) !important;
}

.task-description-editor-shell {
    --gt-editor-code-bg: #f6f8fa;
    --gt-editor-code-color: #1f2937;
    --gt-editor-inline-code-bg: #fff1f2;
    --gt-editor-inline-code-color: #be123c;
    --gt-editor-table-head-bg: #e5e7eb;
    --gt-editor-table-border: #d1d5db;
    --gt-editor-toolbar-icon-filter: brightness(0) saturate(100%) opacity(0.78);
    --gt-editor-toolbar-icon-hover-filter: brightness(0) saturate(100%);
    --gt-editor-mode-tab-bg: #f8fafc;
    --gt-editor-mode-tab-active-bg: #ffffff;
    --gt-editor-popup-bg: var(--p-content-background);
    --gt-editor-popup-border: var(--p-content-border-color);
}

[data-bs-theme="dark"] .task-description-editor-shell,
.task-description-editor-shell .toastui-editor-dark {
    --gt-editor-code-bg: #111827;
    --gt-editor-code-color: #e5e7eb;
    --gt-editor-inline-code-bg: #3f1d2c;
    --gt-editor-inline-code-color: #f9a8d4;
    --gt-editor-table-head-bg: #1f2937;
    --gt-editor-table-border: #334155;
    --gt-editor-toolbar-icon-filter: invert(1) opacity(0.72);
    --gt-editor-toolbar-icon-hover-filter: invert(1);
    --gt-editor-mode-tab-bg: #0f172a;
    --gt-editor-mode-tab-active-bg: #1e293b;
    --gt-editor-popup-bg: #111827;
    --gt-editor-popup-border: #334155;
}

.task-description-visual-editor .toastui-editor-toolbar-icons,
.task-description-visual-editor .toastui-editor-defaultUI button,
.task-description-visual-editor .toastui-editor-defaultUI-toolbar button,
.task-description-visual-editor .toastui-editor-defaultUI-toolbar button i {
    color: var(--p-text-color) !important;
    filter: var(--gt-editor-toolbar-icon-filter) !important;
}

.task-description-visual-editor .toastui-editor-defaultUI button:hover,
.task-description-visual-editor .toastui-editor-defaultUI button:focus,
.task-description-visual-editor .toastui-editor-defaultUI button.active,
.task-description-visual-editor .toastui-editor-defaultUI-toolbar button:hover,
.task-description-visual-editor .toastui-editor-defaultUI-toolbar button:focus,
.task-description-visual-editor .toastui-editor-defaultUI-toolbar button.active {
    background-color: var(--p-content-alt-background) !important;
    color: var(--p-text-emphasis-color) !important;
    filter: var(--gt-editor-toolbar-icon-hover-filter) !important;
}

.toastui-editor-mode-switch .tab-item,
.toastui-editor-mode-switch button {
    background: var(--gt-editor-mode-tab-bg) !important;
    border-color: var(--p-content-border-color) !important;
    color: var(--p-text-muted-color) !important;
}

.toastui-editor-mode-switch .tab-item.active,
.toastui-editor-mode-switch button.active {
    background: var(--gt-editor-mode-tab-active-bg) !important;
    color: var(--p-text-color) !important;
}

.task-description-visual-editor .toastui-editor-contents h1,
.task-description-visual-editor .toastui-editor-contents h2,
.task-description-visual-editor .toastui-editor-contents h3,
.task-description-visual-editor .toastui-editor-contents h4,
.task-description-visual-editor .toastui-editor-contents h5,
.task-description-visual-editor .toastui-editor-contents h6,
.task-description-visual-editor .ProseMirror h1,
.task-description-visual-editor .ProseMirror h2,
.task-description-visual-editor .ProseMirror h3,
.task-description-visual-editor .ProseMirror h4,
.task-description-visual-editor .ProseMirror h5,
.task-description-visual-editor .ProseMirror h6 {
    color: var(--p-text-emphasis-color) !important;
}

.task-description-visual-editor .toastui-editor-contents table,
.task-description-visual-editor .ProseMirror table {
    background: var(--p-content-background) !important;
    border-color: var(--gt-editor-table-border) !important;
    color: var(--p-text-color) !important;
}

.task-description-visual-editor .toastui-editor-contents th,
.task-description-visual-editor .ProseMirror th {
    background: var(--gt-editor-table-head-bg) !important;
    border-color: var(--gt-editor-table-border) !important;
    color: var(--p-text-emphasis-color) !important;
}

.task-description-visual-editor .toastui-editor-contents td,
.task-description-visual-editor .ProseMirror td {
    background: var(--p-content-background) !important;
    border-color: var(--gt-editor-table-border) !important;
    color: var(--p-text-color) !important;
}

.task-description-visual-editor .toastui-editor-contents pre,
.task-description-visual-editor .toastui-editor-contents pre code,
.task-description-visual-editor .toastui-editor-contents .toastui-editor-ww-code-block,
.task-description-visual-editor .toastui-editor-contents .toastui-editor-ww-code-block pre,
.task-description-visual-editor .toastui-editor-contents .toastui-editor-ww-code-block code,
.task-description-visual-editor .toastui-editor-ww-code-block,
.task-description-visual-editor .toastui-editor-ww-code-block pre,
.task-description-visual-editor .toastui-editor-ww-code-block code,
.task-description-visual-editor .toastui-editor-md-code,
.task-description-visual-editor .toastui-editor-md-code-block,
.task-description-visual-editor .toastui-editor-md-code-block-line-background,
.task-description-visual-editor .ProseMirror pre,
.task-description-visual-editor .ProseMirror pre code {
    background: var(--gt-editor-code-bg) !important;
    color: var(--gt-editor-code-color) !important;
}

.task-description-visual-editor .toastui-editor-contents code:not(pre code),
.task-description-visual-editor .toastui-editor-contents :not(pre) > code,
.task-description-visual-editor .toastui-editor-md-code,
.task-description-visual-editor .toastui-editor-md-delimiter,
.task-description-visual-editor .ProseMirror :not(pre) > code {
    background: var(--gt-editor-inline-code-bg) !important;
    color: var(--gt-editor-inline-code-color) !important;
    border-radius: var(--p-border-radius-xs);
    padding: 0.1rem 0.3rem;
}

.task-description-visual-editor .toastui-editor-ww-code-block-language,
.task-description-visual-editor .toastui-editor-ww-code-block-language-input {
    background: color-mix(in srgb, var(--gt-editor-code-bg) 88%, #ffffff 12%) !important;
    color: var(--gt-editor-code-color) !important;
}

.toastui-editor-ww-code-block-language {
    position: absolute !important;
    left: 900px !important;
    top: 0px !important;
    bottom: 50px !important;
}

.toastui-editor-popup {
    --gt-editor-popup-bg: var(--p-content-background);
    --gt-editor-popup-border: var(--p-content-border-color);
    background: var(--gt-editor-popup-bg, var(--p-content-background)) !important;
    border-color: var(--gt-editor-popup-border, var(--p-content-border-color)) !important;
    color: var(--p-text-color) !important;
    max-width: min(320px, calc(100vw - 24px));
    z-index: 1070 !important;
}

[data-bs-theme="dark"] .toastui-editor-popup {
    --gt-editor-popup-bg: #111827;
    --gt-editor-popup-border: #334155;
    background: var(--gt-editor-popup-bg) !important;
    border-color: var(--gt-editor-popup-border) !important;
    color: #e5e7eb !important;
}

.toastui-editor-popup input,
.toastui-editor-popup select,
.toastui-editor-popup textarea {
    background: var(--p-content-background) !important;
    border-color: var(--p-content-border-color) !important;
    color: var(--p-text-color) !important;
}

[data-bs-theme="dark"] .toastui-editor-popup input,
[data-bs-theme="dark"] .toastui-editor-popup select,
[data-bs-theme="dark"] .toastui-editor-popup textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

.task-description-visual-editor {
    --gt-toolbar-active-bg: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
    --gt-toolbar-active-border: color-mix(in srgb, var(--p-primary-color) 22%, transparent);
}

[data-bs-theme="dark"] .task-description-visual-editor {
    --gt-toolbar-active-bg: rgba(96, 165, 250, 0.16);
    --gt-toolbar-active-border: rgba(96, 165, 250, 0.28);
}

.task-description-visual-editor .toastui-editor-defaultUI-toolbar button,
.task-description-visual-editor .toastui-editor-toolbar-icons {
    background-color: transparent !important;
}

.task-description-visual-editor .toastui-editor-defaultUI-toolbar button:hover,
.task-description-visual-editor .toastui-editor-defaultUI-toolbar button:focus,
.task-description-visual-editor .toastui-editor-defaultUI-toolbar button.active,
.task-description-visual-editor .toastui-editor-defaultUI-toolbar button.open,
.task-description-visual-editor .toastui-editor-defaultUI-toolbar button[aria-expanded="true"] {
    background-color: var(--gt-toolbar-active-bg) !important;
    border-color: var(--gt-toolbar-active-border) !important;
    box-shadow: inset 0 0 0 1px var(--gt-toolbar-active-border) !important;
}

.task-description-visual-editor .toastui-editor-defaultUI-toolbar button:hover .toastui-editor-toolbar-icons,
.task-description-visual-editor .toastui-editor-defaultUI-toolbar button:focus .toastui-editor-toolbar-icons,
.task-description-visual-editor .toastui-editor-defaultUI-toolbar button.active .toastui-editor-toolbar-icons,
.task-description-visual-editor .toastui-editor-defaultUI-toolbar button.open .toastui-editor-toolbar-icons,
.task-description-visual-editor .toastui-editor-defaultUI-toolbar button[aria-expanded="true"] .toastui-editor-toolbar-icons {
    background-color: transparent !important;
}

.task-description-visual-editor button.toastui-editor-toolbar-icons:hover,
.task-description-visual-editor button.toastui-editor-toolbar-icons:focus,
.task-description-visual-editor button.toastui-editor-toolbar-icons.active,
.task-description-visual-editor button.toastui-editor-toolbar-icons.open,
.task-description-visual-editor button.toastui-editor-toolbar-icons[aria-expanded="true"] {
    background-color: transparent !important;
    box-shadow: inset 0 0 0 1px var(--gt-toolbar-active-border) !important;
}

.task-description-visual-editor .toastui-editor-toolbar-icons,
.task-description-visual-editor button.toastui-editor-toolbar-icons,
.task-description-visual-editor .toastui-editor-defaultUI-toolbar button i {
    filter: none !important;
}

.task-description-visual-editor button.toastui-editor-toolbar-icons.task-list:hover,
.task-description-visual-editor button.toastui-editor-toolbar-icons.task-list:focus,
.task-description-visual-editor button.toastui-editor-toolbar-icons.table:hover,
.task-description-visual-editor button.toastui-editor-toolbar-icons.table:focus,
.task-description-visual-editor button[aria-label="Task"]:hover,
.task-description-visual-editor button[aria-label="Task"]:focus,
.task-description-visual-editor button[aria-label="Insert Table"]:hover,
.task-description-visual-editor button[aria-label="Insert Table"]:focus,
.task-description-visual-editor button[title="Task"]:hover,
.task-description-visual-editor button[title="Task"]:focus,
.task-description-visual-editor button[title="Insert Table"]:hover,
.task-description-visual-editor button[title="Insert Table"]:focus {
    background-color: var(--gt-toolbar-active-bg) !important;
    background-image: none !important;
    color: var(--p-text-color) !important;
    position: relative;
}

.task-description-visual-editor button.toastui-editor-toolbar-icons.task-list:hover::before,
.task-description-visual-editor button.toastui-editor-toolbar-icons.task-list:focus::before,
.task-description-visual-editor button[aria-label="Task"]:hover::before,
.task-description-visual-editor button[aria-label="Task"]:focus::before,
.task-description-visual-editor button[title="Task"]:hover::before,
.task-description-visual-editor button[title="Task"]:focus::before {
    border: 2px solid var(--p-text-color);
    border-radius: var(--p-border-radius-xs);
    color: var(--p-text-color);
    content: "";
    height: 13px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 13px;
}

.task-description-visual-editor button.toastui-editor-toolbar-icons.task-list:hover::after,
.task-description-visual-editor button.toastui-editor-toolbar-icons.task-list:focus::after,
.task-description-visual-editor button[aria-label="Task"]:hover::after,
.task-description-visual-editor button[aria-label="Task"]:focus::after,
.task-description-visual-editor button[title="Task"]:hover::after,
.task-description-visual-editor button[title="Task"]:focus::after {
    border-bottom: 2px solid var(--p-text-color);
    border-left: 2px solid var(--p-text-color);
    content: "";
    height: 5px;
    left: 50%;
    position: absolute;
    top: 48%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 8px;
}

.task-description-visual-editor button.toastui-editor-toolbar-icons.table:hover::before,
.task-description-visual-editor button.toastui-editor-toolbar-icons.table:focus::before,
.task-description-visual-editor button[aria-label="Insert Table"]:hover::before,
.task-description-visual-editor button[aria-label="Insert Table"]:focus::before,
.task-description-visual-editor button[title="Insert Table"]:hover::before,
.task-description-visual-editor button[title="Insert Table"]:focus::before {
    background:
        linear-gradient(var(--p-text-color), var(--p-text-color)) 33% 0 / 1px 100% no-repeat,
        linear-gradient(var(--p-text-color), var(--p-text-color)) 66% 0 / 1px 100% no-repeat,
        linear-gradient(var(--p-text-color), var(--p-text-color)) 0 50% / 100% 1px no-repeat;
    border: 2px solid var(--p-text-color);
    content: "";
    height: 15px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
}

/* ============================================================
   Chiave leggibile, checklist, sotto-task e tempo di lavoro
   ============================================================

   I quattro blocchi condividono la stessa griglia — un simbolo a sinistra,
   il testo che si allarga, i comandi a destra — perche sono elenchi della
   stessa scheda: tre disposizioni diverse avrebbero fatto sembrare tre
   pannelli presi da tre applicazioni. */

/* La chiave e un'etichetta tecnica, non un titolo: carattere monospaziato
   perche si legge a lettere, non a parola, e si copia spesso. */
.task-key-chip {
    background: var(--p-content-alt-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-sm);
    color: var(--p-text-muted-color);
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .05rem .35rem;
}

.task-key-chip--lg {
    font-size: .85rem;
    vertical-align: middle;
}

.task-parent-chip {
    align-items: center;
    display: inline-flex;
    gap: .3rem;
}

/* Checklist e sotto-task: un elenco senza pallini, perche il simbolo di
   stato che apre ogni riga fa gia quel lavoro. */
.task-checklist-items,
.task-subtask-list,
.task-worklog-list,
.task-reminder-list,
.task-relation-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.task-checklist-item,
.task-subtask,
.task-worklog-entry,
.task-reminder-entry,
.task-relation-entry {
    align-items: flex-start;
    border-bottom: 1px solid var(--p-content-border-color);
    display: flex;
    gap: .6rem;
    padding: .4rem 0;
}

.task-checklist-item:last-child,
.task-subtask:last-child,
.task-worklog-entry:last-child,
.task-reminder-entry:last-child,
.task-relation-entry:last-child { border-bottom: 0; }

/* La data a sinistra, il comando di rimozione all'estremità opposta: sono
   righe di due soli elementi e il legame fra i due si legge dalla distanza. */
.task-reminder-entry,
.task-relation-entry {
    align-items: center;
    justify-content: space-between;
}

/* Il tipo di legame sopra il titolo della task collegata: «Bloccata da» e il
   nome sulla stessa riga si leggerebbero come una frase sola. */
.task-relation-main {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.task-relation-kind {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
}

.task-checklist-toggle-form { display: inline; }

.task-checklist-toggle {
    background: none;
    border: 0;
    color: var(--p-text-muted-color);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.task-checklist-toggle:hover { color: var(--gt-accent); }

.task-checklist-item.is-done .task-checklist-toggle,
.task-subtask.is-done .task-subtask-state { color: var(--gt-success, var(--gt-accent)); }

.task-checklist-text,
.task-subtask-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Il barrato dice "fatto" senza togliere la riga dall'elenco: quello che e
   stato fatto fa parte del racconto del lavoro. */
.task-checklist-item.is-done .task-checklist-text,
.task-subtask.is-done .task-subtask-link {
    color: var(--p-text-muted-color);
    text-decoration: line-through;
}

.task-checklist-actions {
    display: inline-flex;
    gap: .25rem;
}

.task-checklist-action {
    color: var(--p-text-muted-color);
    line-height: 1;
    text-decoration: none;
}

.task-checklist-action:hover { color: var(--gt-accent); }
.task-checklist-action--danger:hover { color: var(--gt-danger, #ef4444); }

.task-subtask-main { display: flex; flex-direction: column; gap: .15rem; }
.task-subtask-link { font-weight: 500; text-decoration: none; }

.task-subtask-meta,
.task-worklog-meta {
    color: var(--p-text-muted-color);
    font-size: .78rem;
}

.task-worklog-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: .75rem;
}

.task-worklog-facts dt {
    color: var(--p-text-muted-color);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
}

.task-worklog-facts dd {
    font-weight: 600;
    margin: 0;
}

/* Il totale della registrazione e il dato che si cerca per primo: larghezza
   fissa perche le righe restino incolonnate e confrontabili a colpo d'occhio. */
.task-worklog-duration {
    flex: 0 0 4.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
}

.task-worklog-main { display: flex; flex: 1 1 auto; flex-direction: column; gap: .1rem; min-width: 0; }
.task-worklog-note { overflow-wrap: anywhere; }

/* Stima superata: la barra cambia tinta invece di fermarsi al pieno, perche
   "al limite" e "oltre" non devono avere lo stesso aspetto. */
.task-progress.is-over .task-progress-bar {
    background: linear-gradient(90deg, var(--gt-warning, #f59e0b), var(--gt-danger, #ef4444));
}