@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============ paleta: claro (padrao) e escuro ============ */
:root {
  --p-bg:#f5f6fa; --p-nav:#ffffff; --p-surface:#ffffff; --p-surface2:#f0f1f7; --p-border:#e3e5ee;
  --p-row:#eceef5; --p-text:#232637; --p-strong:#0f1220; --p-muted:#6b7086; --p-hover:#f0f1f8;
  --p-input:#ffffff; --p-check:#b4b9cc; --p-accent:#6c5ce7; --p-accent2:#5a49d9; --p-accent-soft:rgba(108,92,231,.12);
  --p-accent-text:#5443d6; --p-danger:#d93636; --p-danger-bg:rgba(230,60,60,.12); --p-shadow:0 1px 2px rgba(20,24,40,.06);
}
html.dark {
  --p-bg:#0f1014; --p-nav:#12131a; --p-surface:#171920; --p-surface2:#1d1f27; --p-border:#23252e;
  --p-row:#1f2129; --p-text:#d9dbe3; --p-strong:#f2f3f7; --p-muted:#8b90a0; --p-hover:#1c1e26;
  --p-input:#12131a; --p-check:#50546a; --p-accent:#7c6cf0; --p-accent2:#8d7ff5; --p-accent-soft:rgba(124,108,240,.16);
  --p-accent-text:#b3a9ff; --p-danger:#ff7a7a; --p-danger-bg:rgba(255,90,90,.14); --p-shadow:0 1px 2px rgba(0,0,0,.25);
  /* remapeia a escala de cinza azulada do Vikunja */
  --grey-900:#12131a; --grey-800:#1b1d25; --grey-700:#272a34; --grey-600:#3a3e4d;
  --grey-100:#1d1f27; --grey-200:#272a34;
}
html, html.dark {
  --site-background: var(--p-bg);
  --card-background: var(--p-surface);
  --scheme-main: var(--p-surface);
  --background: var(--p-surface2);
  --border: var(--p-border);
  --card-border-color: var(--p-border);
  --text: var(--p-text);
  --text-strong: var(--p-strong);
  --text-light: var(--p-muted);
  --primary-h: 250deg; --primary-s: 75%; --primary-l: 62%;
  --link-h: 250deg; --link-s: 75%; --link-l: 62%;
  --radius: 10px; --menu-item-radius: 8px;
}

html, body, button, input, textarea, select { font-family:'Inter','Segoe UI',system-ui,sans-serif !important; }
body { font-size:14px; letter-spacing:-0.005em; -webkit-font-smoothing:antialiased; background:var(--p-bg); }
a { transition: color .12s; }

/* ============ topo ============ */
.navbar { background:var(--p-nav) !important; border-bottom:1px solid var(--p-border) !important; box-shadow:none !important; }
.navbar .logo-link .logo { height:26px !important; }
.project-title { font-size:15px !important; font-weight:600 !important; letter-spacing:-0.01em; color:var(--p-strong) !important; }
.navbar .trigger-button, .navbar .username-dropdown-trigger { border-radius:8px !important; }
.navbar .trigger-button:hover { background:var(--p-hover) !important; }

/* ============ menu lateral ============ */
.menu-container { background:var(--p-nav) !important; border-right:1px solid var(--p-border) !important; box-shadow:none !important; padding-top:8px !important; }
.menu-container .menu-list li > a, .menu-container .menu-list .list-menu-link {
  border-radius:8px !important; padding:8px 12px !important; margin:1px 8px !important;
  font-size:13.5px !important; font-weight:500 !important; color:var(--p-muted) !important; transition:background .12s,color .12s;
}
.menu-container .menu-list li > a:hover, .menu-container .menu-list .list-menu-link:hover { background:var(--p-hover) !important; color:var(--p-strong) !important; }
.menu-container .menu-list li > a.router-link-active, .menu-container .menu-list .list-menu-link.router-link-active {
  background:var(--p-accent-soft) !important; color:var(--p-accent-text) !important;
}
.menu-container .menu-item-icon { color:var(--p-muted) !important; }
.menu-container .menu-list li > a.router-link-active .menu-item-icon { color:var(--p-accent-text) !important; }
.menu-container .made-with-love, .menu-container .menu-bottom-link { opacity:.4; font-size:11px; }

/* ============ area principal ============ */
.app-container, .app-content, .content-auth { background:var(--p-bg) !important; }

/* abas Lista / Gantt / Tabela / Kanban */
.switch-view-container, .switch-view { background:transparent !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; }
.switch-view-container { border-bottom:1px solid var(--p-border) !important; }
.switch-view { display:inline-flex !important; gap:4px; }
.switch-view .switch-view-button, .switch-view a {
  background:transparent !important; border:0 !important; border-bottom:2px solid transparent !important; border-radius:0 !important;
  padding:10px 14px !important; font-size:13px !important; font-weight:500 !important; color:var(--p-muted) !important; box-shadow:none !important;
}
.switch-view .is-active, .switch-view .router-link-active, .switch-view [aria-current] {
  color:var(--p-strong) !important; border-bottom-color:var(--p-accent) !important; background:transparent !important;
}

/* ============ cards e lista ============ */
.list-view.is-max-width-desktop { max-width:none !important; }
.card, .list-view .card, .project-card, .noauth-container {
  background:var(--p-surface) !important; border:1px solid var(--p-border) !important; border-radius:12px !important; box-shadow:var(--p-shadow) !important;
}
.project-card { transition:border-color .12s, transform .12s; }
.project-card:hover { border-color:var(--p-accent) !important; transform:translateY(-1px); }
.project-card .title { color:var(--p-strong) !important; font-weight:600 !important; }
.task-add { padding:12px !important; border-bottom:1px solid var(--p-border); }
.add-task-textarea, .task-add .input {
  background:var(--p-input) !important; border:1px solid var(--p-border) !important; border-radius:10px !important; color:var(--p-strong) !important; min-height:42px;
}
.add-task-textarea:focus { border-color:var(--p-accent) !important; box-shadow:0 0 0 3px var(--p-accent-soft) !important; }
.button.is-primary, .add-task-button { background:var(--p-accent) !important; color:#fff !important; border-radius:10px !important; font-weight:600 !important; box-shadow:none !important; border:0 !important; }
.button.is-primary:hover, .add-task-button:hover { background:var(--p-accent2) !important; }
.button:not(.is-primary):not(.is-text) { background:var(--p-surface) !important; color:var(--p-text) !important; border:1px solid var(--p-border) !important; border-radius:8px !important; box-shadow:none !important; }
.button:not(.is-primary):not(.is-text):hover { background:var(--p-hover) !important; }

ul.tasks { padding:4px 0 !important; }
.single-task { padding:10px 16px !important; border-bottom:1px solid var(--p-row) !important; border-radius:0 !important; font-size:14px; transition:background .1s; }
.single-task:last-child { border-bottom:0 !important; }
.single-task:hover { background:var(--p-hover) !important; }
.tasktext, .task-link { color:var(--p-strong) !important; font-weight:450; }
.single-task .done, .single-task.is-done .tasktext { color:var(--p-muted) !important; }
.priority-label.high-priority { background:var(--p-danger-bg) !important; color:var(--p-danger) !important; border-radius:6px !important; padding:1px 8px !important; font-size:11px !important; font-weight:600 !important; }
.tag { border-radius:6px !important; font-size:11px !important; font-weight:600 !important; }

/* checkbox */
.fancy-checkbox__icon path { stroke:var(--p-check) !important; stroke-width:1.6 !important; }
.fancy-checkbox__icon polyline { stroke:var(--p-accent) !important; }
.fancy-checkbox:hover .fancy-checkbox__icon path { stroke:var(--p-accent) !important; }
.fancy-checkbox input:checked ~ .fancy-checkbox__icon path { stroke:var(--p-accent) !important; fill:var(--p-accent-soft) !important; }

/* detalhe da tarefa */
.task-view .heading .title { font-size:22px !important; font-weight:650 !important; }
.task-view .button.is-fullwidth, .task-view .details .button { text-align:left; }
.modal-content .card, .task-view .card { border-radius:14px !important; }

/* kanban */
.kanban .bucket { background:var(--p-surface2) !important; border:1px solid var(--p-border) !important; border-radius:12px !important; box-shadow:none !important; }
.kanban .bucket .bucket-header, .kanban .bucket .bucket-footer, .kanban .bucket-footer, .kanban .bucket-header { background:transparent !important; border:0 !important; box-shadow:none !important; }
.kanban .bucket .bucket-header .title { font-size:13px !important; font-weight:600 !important; }
.kanban .bucket .tasks, .kanban .bucket .draggable { background:transparent !important; }
.kanban .bucket .task, .kanban .task.card, .task-item { background:var(--p-surface) !important; border:1px solid var(--p-border) !important; border-radius:10px !important; box-shadow:none !important; color:var(--p-text) !important; }
.kanban .bucket .task:hover { border-color:var(--p-accent) !important; }
.kanban .bucket-footer .button, .kanban .bucket-footer button { background:transparent !important; border:0 !important; color:var(--p-muted) !important; font-size:12px !important; }
.kanban .bucket-footer .button:hover { color:var(--p-strong) !important; background:var(--p-hover) !important; }

/* tabela */
table.table { background:transparent !important; }
table.table a { color:var(--p-strong) !important; font-weight:500; }
table.table a:hover { color:var(--p-accent-text) !important; }
table.table th { color:var(--p-muted) !important; font-size:12px !important; font-weight:600 !important; }
table.table td, table.table th { border-color:var(--p-border) !important; }
table.table tr:hover td { background:var(--p-hover) !important; }

/* login */
.noauth-container .title, .noauth-container label { color:var(--p-strong) !important; }
.noauth-container a:not(.button), .content-auth a.reset-password-link, .api-config__change-button { color:var(--p-accent-text) !important; }
.noauth-container .input { background:var(--p-input) !important; border-color:var(--p-border) !important; border-radius:10px !important; }
.noauth-container .input:focus { border-color:var(--p-accent) !important; box-shadow:0 0 0 3px var(--p-accent-soft) !important; }

/* links soltos no conteudo */
.content a:not(.button):not(.task-link):not(.menu-list-link) { color:var(--p-accent-text); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--p-border); border-radius:10px; border:2px solid var(--p-bg); }

/* ============ celular ============ */
@media (max-width: 768px) {
  body { font-size:15px; }
  .navbar { height:56px !important; }
  .app-content { padding-left:12px !important; padding-right:12px !important; }
  .switch-view-container { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .switch-view .switch-view-button, .switch-view a { padding:12px 14px !important; }
  .single-task { padding:12px 14px !important; min-height:52px; }
  .task-add { padding:10px !important; }
  .add-task-textarea, .task-add .input { min-height:46px; font-size:16px !important; }
  .button, .add-task-button { min-height:44px; }
  .menu-container .menu-list li > a, .menu-container .menu-list .list-menu-link { padding:12px 14px !important; font-size:15px !important; }
  .project-grid, .project-grid .project-card { min-height:96px; }
  .noauth-container { border-radius:14px !important; }
  input, textarea, select { font-size:16px !important; }
}

/* ============ lista em colunas (estilo ClickUp) ============ */
@media (min-width: 769px) {
  .single-task .tasktext {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 170px 96px 150px;
    align-items: center; column-gap: 14px; flex: 1 1 auto; min-width: 0;
  }
  .single-task .tasktext > * { grid-row: 1; min-width: 0; }
  .single-task .tasktext > span:first-child { grid-column: 1; }
  .single-task .tasktext > .label-wrapper { grid-column: 2; display: flex !important; flex-wrap: wrap; gap: 4px; margin: 0 !important; }
  .single-task .tasktext > .assignees-list { grid-column: 3; display: flex !important; margin: 0 !important; }
  .single-task .tasktext > .dueDate { grid-column: 4; text-align: left; }
  .single-task .tasktext > .popup, .single-task .tasktext > span:last-child:empty { display: none !important; }
}
.single-task .dueDate time { font-style: normal !important; font-size: 13px; color: var(--p-muted); }
.single-task .dueDate time.is-danger, .single-task .dueDate .is-danger { color: var(--p-danger) !important; }
.single-task .assignees-list .avatar-wrapper { margin-right: -6px; border: 2px solid var(--p-surface); border-radius: 999px; }
.single-task progress.progress-bar {
  appearance: none; -webkit-appearance: none; flex: 0 0 120px; width: 120px !important; height: 6px !important;
  border: 0; border-radius: 999px; overflow: hidden; margin: 0 14px !important; background: var(--p-surface2);
}
.single-task progress.progress-bar::-webkit-progress-bar { background: var(--p-surface2); border-radius: 999px; }
.single-task progress.progress-bar::-webkit-progress-value { background: var(--p-accent); border-radius: 999px; }
.single-task progress.progress-bar::-moz-progress-bar { background: var(--p-accent); border-radius: 999px; }

/* tabela: barra de progresso e prioridade */
table.table progress { appearance: none; -webkit-appearance: none; height: 6px; width: 110px; border: 0; border-radius: 999px; overflow: hidden; background: var(--p-surface2); }
table.table progress::-webkit-progress-bar { background: var(--p-surface2); }
table.table progress::-webkit-progress-value { background: var(--p-accent); border-radius: 999px; }
table.table time { font-size: 13px; }

@media (max-width: 768px) {
  .single-task .tasktext { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .single-task .tasktext > span:first-child { flex: 1 1 100%; }
  .single-task progress.progress-bar { flex: 0 0 64px; width: 64px !important; margin: 0 8px !important; }
}

/* alinhamento fixo das colunas da lista */
@media (min-width: 769px) {
  .single-task { position: relative; }
  .single-task .tasktext { flex: 1 1 0 !important; width: 100%; min-width: 0; padding-right: 190px; }
  .single-task progress.progress-bar { position: absolute; right: 56px; top: 50%; transform: translateY(-50%); margin: 0 !important; flex: none; width: 110px !important; }
}

.single-task .assignees-list .username { display: none !important; }
@media (max-width: 768px) {
  .single-task { flex-wrap: wrap; align-items: flex-start; }
  .single-task .tasktext { flex: 1 1 calc(100% - 96px) !important; min-width: 0; padding-right: 0 !important; }
  .single-task progress.progress-bar { order: 10; flex: 1 1 100% !important; width: calc(100% - 46px) !important; margin: 8px 0 0 38px !important; height: 5px !important; }
  .single-task .tasktext > .assignees-list, .single-task .tasktext > .label-wrapper { margin: 0 !important; }
}

/* ============ colunas sempre visiveis (mesmo sem dado) ============ */
.pei-head { display: none; }
@media (min-width: 769px) {
  .pei-head {
    display: flex; align-items: center; position: relative; padding: 9px 16px;
    border-bottom: 1px solid var(--p-row); font-size: 11px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--p-muted); user-select: none;
  }
  .pei-h-check { width: 28px; flex: none; }
  .pei-h-grid { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 170px 96px 150px; column-gap: 14px; padding-right: 190px; }
  .pei-h-prog { position: absolute; right: 56px; width: 110px; }

  .single-task .tasktext:not(:has(.assignees-list))::before {
    content: ""; grid-column: 3; grid-row: 1; width: 22px; height: 22px; border: 1.5px dashed var(--p-check);
    border-radius: 999px; justify-self: start; opacity: .7;
  }
  .single-task .tasktext:not(:has(.dueDate))::after {
    content: "Sem prazo"; grid-column: 4; grid-row: 1; color: var(--p-muted); opacity: .5; font-size: 13px;
  }
  .single-task:not(:has(progress.progress-bar))::after {
    content: ""; position: absolute; right: 56px; top: 50%; width: 110px; height: 6px; border-radius: 999px;
    background: var(--p-surface2); transform: translateY(-50%);
  }
}

@media (min-width: 769px) {
  .list-view ul.tasks, .list-view ul.tasks > li, .list-view .single-task { max-width: none !important; width: 100% !important; }
  .pei-h-grid { padding-right: 217px !important; }
}

/* ============ edicao rapida (prazo / progresso) ============ */
@media (min-width: 769px) {
  .single-task[data-pei-hot="due"] .tasktext { cursor: pointer; }
  .single-task[data-pei-hot="due"] .tasktext:not(:has(.dueDate))::after { color: var(--p-accent-text); opacity: 1; }
  .single-task[data-pei-hot="due"] .dueDate time { color: var(--p-accent-text); }
  .single-task[data-pei-hot="prog"] { cursor: pointer; }
  .single-task[data-pei-hot="prog"] progress.progress-bar { outline: 2px solid var(--p-accent-soft); outline-offset: 3px; }
}
.pei-pop { position: fixed; z-index: 99999; width: 280px; background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45); padding: 12px; }
.pei-pop-t { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--p-muted); margin-bottom: 8px; }
.pei-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pei-chips button { border: 1px solid var(--p-border); background: var(--p-surface2); color: var(--p-text); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.pei-chips button:hover { border-color: var(--p-accent); color: var(--p-accent-text); }
.pei-chips .pei-clear { color: var(--p-danger); }
.pei-date { width: 100%; background: var(--p-input); color: var(--p-strong); border: 1px solid var(--p-border); border-radius: 8px; padding: 7px 10px; font-family: inherit; }
html.dark .pei-date { color-scheme: dark; }
.pei-toast { position: fixed; right: 20px; bottom: 20px; z-index: 100000; background: var(--p-accent); color: #fff; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.35); }

/* ================================================================
   v12 "amigavel": visual inspirado no tududi (cartoes, azul, cinza suave)
   ================================================================ */
:root {
  --p-bg:#f3f4f6; --p-nav:#ffffff; --p-surface:#ffffff; --p-surface2:#f3f4f6; --p-border:#e5e7eb;
  --p-row:#eef0f3; --p-text:#374151; --p-strong:#111827; --p-muted:#6b7280; --p-hover:#f3f4f6;
  --p-input:#ffffff; --p-check:#9ca3af; --p-accent:#3b82f6; --p-accent2:#2563eb; --p-accent-soft:rgba(59,130,246,.12);
  --p-accent-text:#2563eb; --p-danger:#dc2626; --p-danger-bg:rgba(239,68,68,.12); --p-shadow:0 1px 3px rgba(17,24,39,.06);
  --p-card-hover:0 6px 18px rgba(17,24,39,.09);
}
html.dark {
  --p-bg:#111827; --p-nav:#1f2937; --p-surface:#1f2937; --p-surface2:#273244; --p-border:#374151;
  --p-row:#2b3648; --p-text:#d1d5db; --p-strong:#f9fafb; --p-muted:#9ca3af; --p-hover:#273244;
  --p-input:#111827; --p-check:#6b7280; --p-accent:#60a5fa; --p-accent2:#93c5fd; --p-accent-soft:rgba(96,165,250,.16);
  --p-accent-text:#93c5fd; --p-danger:#f87171; --p-danger-bg:rgba(248,113,113,.16); --p-shadow:0 1px 3px rgba(0,0,0,.35);
  --p-card-hover:0 6px 18px rgba(0,0,0,.4);
  --grey-900:#111827; --grey-800:#1f2937; --grey-700:#374151; --grey-600:#4b5563; --grey-100:#273244; --grey-200:#374151;
}
html, html.dark { --primary-h:217deg; --primary-s:91%; --primary-l:60%; --link-h:217deg; --link-s:91%; --link-l:60%; }
body { font-size:15px; }

.navbar { box-shadow:0 1px 2px rgba(17,24,39,.05) !important; }
.menu-container .menu-list li > a, .menu-container .menu-list .list-menu-link { font-size:14.5px !important; }
.menu-container .menu-list li > a.router-link-active, .menu-container .menu-list .list-menu-link.router-link-active { font-weight:600 !important; }

/* pagina: sem moldura externa, cada tarefa e um cartao */
.list-view .card, .list-view .card.has-overflow { background:transparent !important; border:0 !important; box-shadow:none !important; }
.list-view .card-content { padding:0 !important; }
.task-add {
  background:var(--p-surface) !important; border:1px solid var(--p-border) !important; border-radius:12px !important;
  padding:12px !important; margin:0 0 16px !important; box-shadow:var(--p-shadow);
}
ul.tasks { padding:0 !important; }
.single-task {
  background:var(--p-surface) !important; border:1px solid var(--p-border) !important; border-left:4px solid var(--p-accent) !important;
  border-radius:10px !important; margin:0 0 8px !important; padding:14px 16px !important; box-shadow:var(--p-shadow);
  transition:box-shadow .15s, transform .15s;
}
.single-task:last-child { border-bottom:1px solid var(--p-border) !important; }
.single-task:hover { background:var(--p-surface) !important; box-shadow:var(--p-card-hover); }
.single-task:has(.high-priority) { border-left-color:#ef4444 !important; }
.single-task:has(.fancy-checkbox input:checked) { opacity:.65; border-left-color:#9ca3af !important; }
.tasktext, .task-link { font-size:16px; }
.single-task .tag { font-size:11.5px !important; }

/* cabecalho das colunas, agora solto acima dos cartoes */
@media (min-width: 769px) {
  .pei-head { border:0 !important; padding:2px 17px 8px 20px !important; background:transparent; }
}
.switch-view-container { margin-bottom:16px; }
.button.is-primary, .add-task-button { background:var(--p-accent) !important; }
.button.is-primary:hover, .add-task-button:hover { background:var(--p-accent2) !important; }
.card, .project-card, .noauth-container { border-radius:14px !important; }
.fancy-checkbox:hover .fancy-checkbox__icon path, .fancy-checkbox__icon polyline, .fancy-checkbox input:checked ~ .fancy-checkbox__icon path { stroke:var(--p-accent) !important; }

/* ================================================================
   v13: linha de "chips" sob o titulo (estilo tududi), substitui a tabela de colunas
   ================================================================ */
@media (min-width: 769px) {
  .pei-head { display: none !important; }
  .single-task { align-items: flex-start !important; padding: 14px 16px !important; }
  .single-task .fancy-checkbox { margin-top: 2px; }
  .single-task .tasktext {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding-right: 190px !important; grid-template-columns: none !important;
  }
  .single-task .tasktext > * { grid-column: auto !important; grid-row: auto !important; }
  .single-task .tasktext > span:first-child { flex: 1 0 100%; order: 0; font-size: 16px; }
  .single-task .tasktext > .label-wrapper { order: 2; display: flex !important; flex-wrap: wrap; gap: 4px; margin: 0 !important; }
  .single-task .tasktext > .assignees-list { order: 3; display: flex !important; margin: 0 !important; }
  .single-task .tasktext > .dueDate { order: 4; }
  .single-task .tasktext > span:last-child { order: 5; display: inline-flex !important; align-items: center; gap: 8px; opacity: .85; }
  .single-task .tasktext > .popup { display: none !important; }

  /* prazo como chip */
  .single-task .dueDate {
    display: inline-flex !important; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    background: var(--p-surface2); border: 1px solid var(--p-border); color: var(--p-muted);
  }
  .single-task .dueDate time { font-style: normal !important; font-size: 12.5px !important; color: inherit !important; }
  .single-task .dueDate time::before, .single-task .tasktext:not(:has(.dueDate))::after {
    content: ""; display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 6px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>") center/contain no-repeat;
  }
  .single-task .dueDate:has(.is-danger) { background: var(--p-danger-bg); border-color: transparent; color: var(--p-danger); }

  /* prazo vazio: chip pontilhado clicavel */
  .single-task .tasktext:not(:has(.dueDate))::after {
    content: "Prazo"; order: 4; grid-column: auto; grid-row: auto; display: inline-flex; align-items: center; gap: 6px;
    width: auto; height: auto; padding: 3px 10px; border: 1px dashed var(--p-check); border-radius: 999px;
    background: transparent; color: var(--p-muted); font-size: 12.5px; opacity: .8; -webkit-mask: none; mask: none;
  }
  .single-task .tasktext:not(:has(.dueDate))::after { padding-left: 10px; }
  .single-task[data-pei-hot="due"] .tasktext:not(:has(.dueDate))::after { border-color: var(--p-accent); color: var(--p-accent-text); opacity: 1; }
  .single-task[data-pei-hot="due"] .dueDate { border-color: var(--p-accent); color: var(--p-accent-text); }
  .single-task .tasktext:not(:has(.assignees-list))::before { order: 3; grid-column: auto; grid-row: auto; }
}