/* ═══════════════════════════════════════════════════════════════════
   donna — tasks-f7b3d223.css  (cleané)
   ─ z-index migrés vers tokens (--z-* dans _z-index-scale.css) : 1 occurrence(s)
   ─ Aucune autre modification. Voir CHANGELOG.md.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   donna — Tasks v2.1 (vues 1-4)
   ══════════════════════════════════════════════════ */

/* ══════════ Artboard wrappers ══════════ */
.t-frame{
  background:var(--bg); width:100%; height:100%;
  padding:32px; overflow:hidden;
  display:flex; flex-direction:column;
}
.t-frame.is-modal{ padding:0; background:rgba(20,22,31,.45); display:grid; place-items:center }
:root[data-theme="noir"] .t-frame.is-modal{ background:rgba(0,0,0,.65) }
/* v2.1 — Modal overlay : force plein écran + redéfinit les vars CSS pour fonctionner hors .pwa-root */
#task-modal-overlay.t-frame.is-modal{
  width:100vw !important;
  height:100vh !important;
  padding:0 !important;
  overflow:auto;
  /* Vars CSS pour fonctionner même quand attaché à document.body (hors .pwa-root) */
  --bg:#f7f8fa; --surface:#ffffff; --s2:#f1f3f7; --s3:#e7ebf2;
  --border:#cdd2dc; --border-hi:#b6bdcb;
  --text:#14161f; --text-dim:#4a5169; --muted:#8a93ab;
  --accent:#6b5cf5; --accent-hi:#564bd8; --accent-dim:rgba(107,92,245,.09);
  --chaud:#d64560; --tiede:#c08a2e; --froid:#3d7fc2; --green:#22a06b; --mauve:#8257e5;
  --shadow-sm:0 1px 2px rgba(20,22,31,.05);
  --shadow:0 4px 14px rgba(20,22,31,.07);
  --shadow-lg:0 16px 40px rgba(20,22,31,.14);
  --radius-sm:3px; --radius:6px; --radius-lg:10px;
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  color:var(--text);
}
body[data-theme="noir"] #task-modal-overlay.t-frame.is-modal,
html[data-theme="noir"] #task-modal-overlay.t-frame.is-modal{
  /* [v1149] Aligné sur tc.css :root[data-theme="noir"] adouci (style focus) */
  --bg:#0f1115; --surface:#16181d; --s2:#1c1e24; --s3:#23262d;
  --border:rgba(255,255,255,.07); --border-hi:rgba(255,255,255,.12);
  --text:#e7e9ee; --text-dim:#a8adbd; --muted:#6a7080;
  --accent:#8b7bff; --accent-hi:#a89dff; --accent-dim:rgba(139,123,255,.13);
  --chaud:#ff6680; --tiede:#f0c050; --froid:#5ca8ff; --green:#4fd49a;
}
/* Reset margin/padding pour les enfants de la modal (au cas où on est hors pwa-root) */
#task-modal-overlay *{ box-sizing:border-box }
#task-modal-overlay .modal-shell{
  background:var(--surface); color:var(--text);
}

/* ══════════ Common task list primitives ══════════ */
.task-list{ display:flex; flex-direction:column; }
.task-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px;
  align-items:center;
  padding:11px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-top:none;
  position:relative;
  transition:background .12s, opacity .25s, transform .25s;
  cursor:pointer;
}
.task-row:first-child{ border-top:1px solid var(--border); border-top-left-radius:var(--radius-lg); border-top-right-radius:var(--radius-lg); }
.task-row:last-child{ border-bottom-left-radius:var(--radius-lg); border-bottom-right-radius:var(--radius-lg); }
.task-row:hover{ background:var(--s2); }
.task-row:hover .task-actions{ opacity:1; }

/* AI marker */
.task-row.is-ai{ border-left:2px solid var(--accent); padding-left:13px; }
.task-row.is-ai::after{
  content:"✦"; position:absolute; top:9px; right:10px;
  font-size:9px; color:var(--accent); opacity:.7;
}

.task-row.is-done{ opacity:.45 }
.task-row.is-done .task-title{ text-decoration:line-through; color:var(--muted) }

/* checkbox */

.task-check.checked{ background:var(--text); border-color:var(--text); }
.task-check.checked svg{ opacity:1; transform:scale(1); }

/* main */

.task-prio-dot.low{ background:var(--muted); opacity:.5 }
.task-prio-dot.normal{ display:none }

/* due chips */

.due-chip.overdue{ color:var(--chaud); font-weight:600 }
.due-chip.today{ color:var(--text); font-weight:600 }
.due-chip.upcoming{ color:var(--text-dim) }
.due-chip.nodate{ color:var(--muted) }

/* context chip */
.ctx-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 7px 2px 4px;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:11px; color:var(--text-dim); font-weight:500;
  max-width:100%;
  transition:all .12s;
  cursor:pointer;
  min-width:0;
}
.ctx-chip:hover{ background:var(--s3); border-color:var(--border-hi); color:var(--text) }

.ctx-chip-icon.vendeur{ background:color-mix(in srgb, var(--chaud) 18%, transparent); color:var(--chaud) }
.ctx-chip-icon.bien{ background:color-mix(in srgb, var(--froid) 18%, transparent); color:var(--froid) }
.ctx-chip-icon.acquereur{ background:color-mix(in srgb, var(--green) 18%, transparent); color:var(--green) }

/* row actions */

/* ══════════ Vue 1 — Widget tasks ══════════ */

.widget-fake-line.short{ width:35% }
.widget-fake-line.med{ width:65% }

.widget{
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px;
  display:flex; flex-direction:column; gap:10px;
  align-self:start;
}
.widget-head{ display:flex; align-items:center; gap:8px; padding:0 2px 4px }
.widget-title{ font-size:12px; font-weight:600; color:var(--text); letter-spacing:-.1px }
.widget-count{
  font-size:10.5px; color:var(--muted); font-weight:500;
  font-variant-numeric:tabular-nums;
}

.widget .task-row{ background:var(--surface); padding:9px 10px; }
.widget .task-row:hover{ background:var(--s3) }
.widget .task-title{ font-size:12.5px }
.widget .task-meta{ font-size:11px }

.widget-add{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 10px;
  background:transparent;
  border:1px dashed var(--border-hi);
  border-radius:var(--radius);
  font-size:12px; font-weight:500; color:var(--text-dim);
  transition:all .12s;
}
.widget-add:hover{ background:var(--surface); border-color:var(--text-dim); color:var(--text); border-style:solid }

/* ══════════ Vue 2 — Modal ══════════ */
.modal-shell{
  width:480px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(20,22,31,.18);
  display:flex; flex-direction:column;
  overflow:hidden;
}
:root[data-theme="noir"] .modal-shell{ box-shadow:0 24px 60px rgba(0,0,0,.6) }

.modal-head{
  padding:14px 16px 12px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}

.modal-close{
  width:24px; height:24px; border-radius:var(--radius-sm);
  display:grid; place-items:center; color:var(--muted);
}
.modal-close:hover{ background:var(--s2); color:var(--text) }

.modal-ctx{
  margin:14px 16px 0;
  display:flex; align-items:center; gap:9px;
  padding:8px 10px;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:11.5px;
}

.modal-ctx-edit{
  font-size:11px; color:var(--text-dim); font-weight:500;
}
.modal-ctx-edit:hover{ color:var(--text) }

.modal-body{
  padding:16px;
  display:flex; flex-direction:column; gap:14px;
}
.field{ display:flex; flex-direction:column; gap:6px }
.field-label{ font-size:11px; font-weight:500; color:var(--text-dim); letter-spacing:.1px }
.field-input{
  width:100%;
  padding:9px 11px;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius);
  font-family:inherit; font-size:13px; color:var(--text);
  transition:all .12s;
  outline:none;
}
.field-input:focus{ background:var(--surface); border-color:var(--text-dim); }
.field-input.title{ font-size:15px; font-weight:500; padding:11px 13px; }
.field-input::placeholder{ color:var(--muted) }
textarea.field-input{ resize:vertical; min-height:60px; font-size:12.5px }

.date-pill.active{ background:var(--text) !important; border:1px solid var(--text) !important; color:var(--bg); }

.prio-seg{
  display:grid; grid-template-columns:1fr 1fr 1fr;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2px;
}
.prio-seg button{
  padding:6px 8px; font-size:12px; font-weight:500;
  color:var(--text-dim); border-radius:calc(var(--radius) - 1px);
  display:flex; align-items:center; justify-content:center; gap:5px;
  transition:all .12s;
  border:none !important;
  background:transparent;
  cursor:pointer;
  font-family:inherit;
}
.prio-seg button:hover{ color:var(--text); background:rgba(0,0,0,.03) }
.prio-seg button.active{
  background:var(--surface); color:var(--text); font-weight:600;
  box-shadow:0 1px 2px rgba(20,22,31,.06);
}
/* États actifs colorés par priorité (Margot UI 2.0 : pas de fill plein, juste accent) */
.prio-seg button[data-tm-prio="basse"].active{
  color:var(--green);
}
.prio-seg button[data-tm-prio="normale"].active{
  color:var(--tiede);
}
.prio-seg button[data-tm-prio="haute"].active{
  color:var(--chaud);
}

.prio-dot-mini.basse{ background:var(--green); }
.prio-dot-mini.normale{ background:var(--tiede); }
.prio-dot-mini.haute{ background:var(--chaud); }
.prio-seg button.active .prio-dot-mini { box-shadow:0 0 0 2px rgba(255,255,255,.5) }

.notes-toggle{
  font-size:12px; color:var(--text-dim); font-weight:500;
  display:flex; align-items:center; gap:5px;
  padding:2px 0;
  align-self:start;
  background:transparent;
}
.notes-toggle:hover{ color:var(--text) }

.modal-foot{
  padding:12px 16px;
  border-top:1px solid var(--border);
  background:var(--s2);
  display:flex; gap:8px; justify-content:flex-end;
}
.btn-secondary{
  padding:8px 14px; font-size:12.5px; font-weight:500;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  transition:all .12s;
}
.btn-secondary:hover{ background:var(--s3); border-color:var(--border-hi) }
.btn-primary{
  padding:8px 14px; font-size:12.5px; font-weight:600;
  background:var(--text); color:var(--bg);
  border-radius:var(--radius);
  transition:all .12s;
}
.btn-primary:hover{ background:var(--text-dim) }

/* ══════════ Vue 3 — Page Mes tâches ══════════ */

.page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  padding-bottom:4px;
}
.page-title{
  font-family:var(--font-display);
  font-size:26px; font-weight:700; letter-spacing:-.6px;
  color:var(--text);
  display:flex; align-items:baseline; gap:10px;
}

.filters-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:8px 0;
  border-bottom:1px solid var(--border);
}
.filter-group{ display:flex; align-items:center; gap:6px }
.filter-label{
  font-size:10.5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted); margin-right:2px;
}

.filter-chip.active{
  background:var(--text); border-color:var(--text); color:var(--bg);
  font-weight:600;
}

.filter-chip.active .filter-chip-count{ opacity:.85 }

.filter-toggle{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; color:var(--text-dim); font-weight:500;
  padding:5px 10px;
  border:1px solid var(--border); border-radius:var(--radius);
  transition:all .12s;
  background:transparent;
}
.filter-toggle:hover{ background:var(--s2); color:var(--text) }
.filter-toggle .switch{
  width:24px; height:14px; background:var(--border-hi); border-radius:999px;
  position:relative; transition:background .15s;
}
.filter-toggle .switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:10px; height:10px; border-radius:50%; background:var(--surface);
  transition:transform .15s;
}
.filter-toggle.on .switch{ background:var(--text) }
.filter-toggle.on .switch::after{ transform:translateX(10px); background:var(--bg) }

.tasks-group-title.urgent{ color:var(--chaud) }

/* ══════════ Vue 4 — Bloc dashboard ══════════ */

.dash-card .task-list{ padding:6px 0 }
.dash-card .task-row{
  border-left:none; border-right:none;
  border-radius:0 !important;
  padding:11px 18px;
}
.dash-card .task-row:first-child{ border-top:none }
.dash-card .task-row.is-ai{ border-left:2px solid var(--accent); padding-left:16px }

.dash-empty{
  padding:36px 24px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center;
}

.dash-empty-cta{
  margin-top:4px;
  font-size:12px; font-weight:500; color:var(--text);
  padding:6px 12px; background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius);
  display:inline-flex; align-items:center; gap:6px;
}
.dash-empty-cta:hover{ background:var(--s3); border-color:var(--border-hi) }

/* dash-aside (mock other dashboard content) */

.dash-aside-line.s{ width:60% }
.dash-aside-line.m{ width:80% }

/* ══════════ Theme toggle (top right) ══════════ */
.theme-toggle{
  position:fixed; top:16px; right:16px; z-index: var(--z-sticky) /* was 100 */;
  display:flex;
  background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:3px;
  box-shadow:0 2px 8px rgba(20,22,31,.06);
}
:root[data-theme="noir"] .theme-toggle{ box-shadow:0 2px 8px rgba(0,0,0,.4) }
.theme-toggle button{
  padding:5px 12px; font-size:11px; font-weight:600;
  color:var(--text-dim); border-radius:999px;
  display:inline-flex; align-items:center; gap:5px;
  letter-spacing:.2px;
  transition:all .12s;
}
.theme-toggle button:hover{ color:var(--text) }
.theme-toggle button.active{ background:var(--text); color:var(--bg) }

/* ══════════════════════════════════════════════════════════════════════════
   v2.1 — Compléments CSS pour intégration donna (au-delà du design Margot)
   ══════════════════════════════════════════════════════════════════════════ */

/* Modal foot buttons */
.modal-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.modal-foot .btn-tertiary {
  margin-right: auto;
  padding: 7px 12px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s;
}
.modal-foot .btn-tertiary.danger:hover {
  color: var(--chaud);
  background: color-mix(in srgb, var(--chaud) 8%, transparent);
}
.modal-foot .btn-secondary {
  padding: 8px 14px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  transition: all .12s;
}
.modal-foot .btn-secondary:hover {
  background: var(--s3);
  color: var(--text);
}
.modal-foot .btn-primary,
.btn-primary {
  padding: 8px 16px;
  background: var(--text);
  border: 1px solid var(--text);
  border-radius: var(--radius);
  color: var(--bg);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.modal-foot .btn-primary:hover {
  opacity: .85;
}

/* Notes toggle button */
.notes-toggle {
  align-self: flex-start;
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all .12s;
}
.notes-toggle:hover {
  border-color: var(--text-dim);
  color: var(--text);
}

/* Modal ctx icon style harmonisation */

.modal-ctx-icon.vendeur { background: color-mix(in srgb, var(--chaud) 18%, transparent); color: var(--chaud); }
.modal-ctx-icon.bien { background: color-mix(in srgb, var(--froid) 18%, transparent); color: var(--froid); }
.modal-ctx-icon.acquereur { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }

/* Date pill with active state */
.date-pill.active .prio-dot-mini { background: var(--bg); }

/* ════════ Page Mes tâches ════════ */
.shellv2-main #page-tasks {
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  /* [v1025] padding: 0 RETIRÉ — était mort (écrasé par layout-tokens.css L71
     `padding: 0 0 0 var(--page-tasks-pl-extra) !important`). La source of
     truth pour les paddings #page-tasks est désormais layout-tokens.css
     (consolidé en v1025). Cf ROLLBACK.md r1025-3. */
  overflow-y: auto;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.page-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.filter-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-pill {
  padding: 6px 11px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  transition: all .12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.filter-pill:hover {
  background: var(--s2);
  color: var(--text);
}
.filter-pill.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.filter-pill-count {
  font-size: 11px;
  font-weight: 600;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}
.filter-pill.is-ai {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
}
.filter-pill.is-ai.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.filter-toggle {
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.filter-toggle:hover { color: var(--text); }
.filter-toggle.active { color: var(--text); }

.page-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.task-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 4px;
}
.task-group-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
}
.task-group-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-weight: 500;
}

.page-empty {
  text-align: center;
  padding: 80px 32px;
  color: var(--muted);
}

.page-empty-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.page-empty-sub {
  font-size: 12.5px;
  color: var(--text-dim);
}

/* ════════ Dashboard block ════════ */
.dash-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.1px;
}
.dash-add-btn {
  width: 24px; height: 24px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .12s;
}
.dash-add-btn:hover {
  background: var(--s2);
  color: var(--text);
}
.dash-link {
  font-size: 11.5px;
  color: var(--text-dim);
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  align-self: flex-start;
  font-weight: 500;
}
.dash-link:hover { color: var(--text); }
.dash-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 8px;
  align-items: flex-start;
}
.dash-empty-msg {
  font-size: 12.5px;
  color: var(--text-dim);
}
.dash-empty-cta {
  font-size: 12px;
  color: var(--text-dim);
  background: transparent;
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius);
  padding: 6px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dash-empty-cta:hover {
  border-color: var(--text-dim);
  color: var(--text);
  border-style: solid;
}

/* Empty state widget */
.task-row.task-empty {
  cursor: default;
  background: transparent;
  border-style: dashed;
}
.task-row.task-empty:hover { background: transparent; }
.task-empty-msg {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.1 — Modal mobile/PWA : bottom sheet sur petits écrans
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  /* Modal en bottom sheet sur mobile */
  #task-modal-overlay.t-frame.is-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #task-modal-overlay .modal-shell {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh;
    overflow-y: auto;
    animation: tmSlideUp .25s cubic-bezier(.4, 0, .2, 1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  @keyframes tmSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* Inputs full-width plus confortables au tap */
  #task-modal-overlay .field-input {
    font-size: 16px; /* évite le zoom Safari iOS */
  }
  #task-modal-overlay .field-input.title {
    font-size: 17px;
  }

  /* Modal foot fixe en bas */
  #task-modal-overlay .modal-foot {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
    z-index: 1;
  }

  /* Date pills wrap */
  
  

  /* Body padding tweaks */
  #task-modal-overlay .modal-body {
    padding: 14px 16px;
    gap: 12px;
  }
}

/* Bouton pill "+ Voir toutes" PWA — léger override pour cohérence */
#pwa-tasks-allpage-btn:hover {
  color: var(--text);
}

/* v2.1 — Pills filtre priorité colorées */
.filter-pill.prio-haute{ color:var(--chaud); border-color:color-mix(in srgb, var(--chaud) 35%, transparent); }
.filter-pill.prio-haute.active{ background:var(--chaud); border-color:var(--chaud); color:#fff; }
.filter-pill.prio-normale{ color:var(--tiede); border-color:color-mix(in srgb, var(--tiede) 35%, transparent); }
.filter-pill.prio-normale.active{ background:var(--tiede); border-color:var(--tiede); color:#fff; }
.filter-pill.prio-basse{ color:var(--green); border-color:color-mix(in srgb, var(--green) 35%, transparent); }
.filter-pill.prio-basse.active{ background:var(--green); border-color:var(--green); color:#fff; }

/* v2.1 — Indicateur de présence de note sur une tâche */
.task-note-ind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: .7;
  flex-shrink: 0;
  margin-left: 4px;
  transition: opacity .12s, color .12s;
}
.task-row:hover .task-note-ind {
  opacity: 1;
  color: var(--text-dim);
}
.task-row.is-done .task-note-ind {
  opacity: .35;
}

/* v2.1 — PWA tasks overlay : header + filtres scrollable */
#pwa-tasks-overlay .pwa-filters {
  display: block !important;
  padding: 8px 0 10px !important;
  border-bottom: 1px solid var(--border);
  width: 100%;
  flex-wrap: unset !important;
}
#pwa-tasks-overlay .pwa-filters > .filter-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 !important;
  gap: 6px;
  justify-content: flex-start !important;
  align-items: center;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
}
#pwa-tasks-overlay .pwa-filters > .filter-group + .filter-group {
  margin-top: 6px;
}
#pwa-tasks-overlay .pwa-filters > .filter-group::-webkit-scrollbar { display: none; }
#pwa-tasks-overlay .filter-prio-label {
  font-size: 11px;
  color: var(--muted);
  align-self: center;
  margin-right: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
#pwa-tasks-overlay .filter-pill {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  padding: 6px 10px;
}
#pwa-tasks-overlay .filter-pill-count {
  font-variant-numeric: tabular-nums;
}
#pwa-tasks-overlay .filter-toggle {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 11.5px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
}
#pwa-tasks-overlay .filter-toggle.active {
  color: var(--text);
  background: var(--s2);
}
#pwa-tasks-overlay .page-empty {
  padding: 80px 24px;
  text-align: center;
  color: var(--muted);
}
#pwa-tasks-overlay .page-empty-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
#pwa-tasks-overlay .page-empty-sub {
  font-size: 13px;
  color: var(--text-dim);
}
#pwa-tasks-overlay .task-group {
  margin-top: 16px;
}
#pwa-tasks-overlay .task-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 6px;
}
#pwa-tasks-overlay .task-group-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
}
#pwa-tasks-overlay .task-group-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-weight: 500;
}

/* v2.1 — PWA : actions toujours visibles + collées au bord droit */

#pwa-tasks-overlay .task-row .task-actions {
  opacity: 1 !important;
}
/* Augmenter la zone de tap des boutons d'action sur mobile (sans qu'ils soient trop visuels) */

/* Row plus tappable — padding augmenté côté gauche, normal à droite (boutons déjà en bord) */
#pwa-tasks-overlay .task-row {
  padding: 14px 12px 14px 14px;
  cursor: pointer;
}
/* Le titre prend toute la place disponible jusqu'aux actions */
#pwa-tasks-overlay .task-row {
  grid-template-columns: auto 1fr auto !important;
}

/* v2.1 — Bouton "+" discret dans le header du module À faire dashboard */

.dbv2-card-head:hover .dbv2-todo-add-btn {
  color: var(--text-dim);
}

/* v2.1 — Mobile : actions toujours visibles dans tous les widgets task aussi */
@media (max-width: 880px) {
  
  
}

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD TASKS — Margot Option C (v777, refonte module "À faire")
   Remplace le module composite tabs (Tout/Tâches/Alertes IA) par :
   - Header card : titre "Mes tâches" + sous-titre dynamique + "Tout voir →"
   - Banner Donna AI dismissible (1 suggestion à la fois, accent violet)
   - Liste de 4 tâches user max
   - Quick-add inline (Enter submit, Escape/blur cancel)
   ════════════════════════════════════════════════════════════════════════ */

.dt-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.dt-widget-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
}
.dt-widget-head-l { min-width: 0; }
.dt-widget-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  color: var(--text);
  letter-spacing: -.1px;
}
.dt-widget-sub {
  font-size: 11px; color: var(--muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.dt-widget-sub .dt-sep { color: var(--border-hi); margin: 0 4px; }
.dt-widget-link {
  font-size: 11.5px; font-weight: 500;
  color: var(--text-dim);
  background: transparent; border: none;
  padding: 2px 4px; border-radius: 3px;
  cursor: pointer; flex-shrink: 0;
  transition: color .12s;
}
.dt-widget-link:hover { color: var(--text); }

/* ─── Banner Donna AI (le SEUL endroit du widget en accent violet) ─── */
.dt-ai {
  margin: 8px 12px 0;
  padding: 10px 12px;
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius);
  position: relative;
}
.dt-ai-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 5px;
}
.dt-ai-mark {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent);
}
/* v781/784 — Sparkle SVG (Margot 2.0 nouveau logo donna) à la place du
   caractère ✦ unicode legacy. Stroke currentColor → hérite de .dt-ai-mark
   color qui est var(--accent). */
.dt-ai-mark-glyph {
  color: var(--accent);
  flex-shrink: 0;
}
.dt-ai-close {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--accent); opacity: .6;
  background: transparent; border: none;
  border-radius: 3px; cursor: pointer;
  transition: opacity .12s, background .12s;
}
.dt-ai-close:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.dt-ai-title {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  line-height: 1.35; margin-bottom: 2px;
}
.dt-ai-why {
  font-size: 11px; color: var(--text-dim);
  margin-bottom: 8px; line-height: 1.4;
}
.dt-ai-actions { display: flex; gap: 6px; }
.dt-ai-btn {
  padding: 4px 9px;
  font-size: 11px; font-weight: 500;
  border-radius: 3px; cursor: pointer;
  background: transparent; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition: background .12s;
}
.dt-ai-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.dt-ai-btn-primary {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
}
.dt-ai-btn-primary:hover {
  background: var(--accent-hi); border-color: var(--accent-hi);
}

/* ─── Liste tâches (compact, 4 max) ─── */
.dt-list {
  display: flex; flex-direction: column;
  padding: 4px 0;
}
.dt-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 16px;
  background: transparent; border: none;
  cursor: pointer; text-align: left;
  width: 100%; box-sizing: border-box;
  font-family: inherit;
  transition: background .1s;
}
.dt-row:hover { background: var(--s2); }
.dt-row[data-done="true"] .dt-title {
  color: var(--muted);
  text-decoration: line-through;
}
.dt-row[data-done="true"] .dt-meta { opacity: .5; }

.dt-row-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.dt-title {
  font-size: 12.5px; font-weight: 500;
  color: var(--text); line-height: 1.4;
  text-wrap: pretty;
}
.dt-meta {
  font-size: 11px; color: var(--muted);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  line-height: 1.4;
}

/* ─── Atoms ─── */
.dt-check {
  width: 14px; height: 14px; flex-shrink: 0;
  border: 1.5px solid var(--border-hi);
  border-radius: 3px;
  background: var(--surface);
  display: grid; place-items: center;
  margin-top: 2px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.dt-check:hover { border-color: var(--text-dim); }
.dt-check[data-on="true"] {
  background: var(--text); border-color: var(--text);
}
.dt-check[data-on="true"] svg { display: block; }
.dt-check svg { display: none; }

.dt-due {
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 4px;
}
.dt-due-dot { width: 4px; height: 4px; border-radius: 50%; }
.dt-due-overdue { color: var(--chaud); }
.dt-due-today   { color: var(--tiede); }
.dt-due-up      { color: var(--text-dim); }

.dt-ctx {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-dim);
  min-width: 0; max-width: 100%;
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 3px; margin: -1px -3px;
  transition: background .12s;
}
.dt-ctx:hover { background: color-mix(in srgb, var(--text-dim) 8%, transparent); }
.dt-ctx svg { flex-shrink: 0; opacity: .7; }
.dt-ctx-label {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 130px;
}

/* ─── Empty state ─── */
.dt-empty {
  padding: 24px 16px;
  text-align: center;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.dt-empty-msg {
  font-size: 12.5px; color: var(--text-dim);
}
.dt-empty-sub {
  font-size: 11px; color: var(--muted);
}

/* ─── Quick-add row ─── */
.dt-row-quick {
  width: 100%; cursor: pointer; background: none;
  border: none; padding: 9px 16px;
  display: flex; align-items: center; gap: 10px;
  color: var(--text-dim);
  font-family: inherit; text-align: left;
  border-top: 1px dashed var(--border);
  transition: background .12s, color .12s;
}
.dt-row-quick:hover { background: var(--s2); color: var(--text); }
.dt-quick-plus {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  border: 1.5px dashed var(--border-hi);
  border-radius: 3px;
  font-size: 12px; line-height: 1;
  color: var(--muted);
  flex-shrink: 0;
}
.dt-row-quick:hover .dt-quick-plus {
  border-color: var(--text-dim);
  border-style: solid;
}
.dt-quick-label { flex: 1; font-size: 12.5px; font-weight: 500; }
.dt-kbd {
  font-family: var(--mono);
  font-size: 9.5px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted);
  flex-shrink: 0;
}

.dt-row-add {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border-top: 1px solid var(--accent);
  background: var(--accent-dim);
}
.dt-quick-input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-size: 12.5px; font-weight: 500;
  color: var(--text);
  padding: 0; line-height: 1.4;
  font-family: inherit;
}
.dt-quick-input::placeholder { color: var(--muted); }