/* Lav opgave — toolbar pill + extraction modal (#2292) */

/* ── Toolbar pill — now a quiet ivory chip, primary styles in email-calm-preview.css (#2306) ── */

.email-reader-actions .email-todo-action[aria-disabled="true"] {
  opacity: 0.45 !important;
  pointer-events: none !important;
}

/* ── Modal ────────────────────────────────────────── */

body.todo-modal-open { overflow: hidden; }

.todo-modal[aria-hidden="true"] { display: none; }

.todo-modal[aria-hidden="false"] {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.todo-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(40, 30, 20, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  .todo-modal__overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.todo-modal__panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: #fffefb;
  border: 1px solid rgba(228, 220, 212, 0.7);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(40, 30, 20, 0.10), 0 1px 4px rgba(40, 30, 20, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ───────────────────────────────────────── */

.todo-modal__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(228, 220, 212, 0.5);
}

.todo-modal__icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(110, 138, 126, 0.1);
  color: rgb(74, 122, 104);
  flex: 0 0 32px;
}

.todo-modal__titles {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.todo-modal__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 650;
  color: #3A2F26;
  line-height: 1.3;
}

.todo-modal__subtitle {
  display: none;
}

.todo-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #7a7068;
  cursor: pointer;
  flex: 0 0 32px;
  transition: background 120ms ease;
}

.todo-modal__close:hover { background: rgba(0, 0, 0, 0.05); }
.todo-modal__close:focus-visible { outline: 2px solid #6e8a7e; outline-offset: 2px; }

/* ── Body ─────────────────────────────────────────── */

.todo-modal__body {
  padding: 14px 18px 4px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Task card ────────────────────────────────────── */

.todo-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(228, 220, 212, 0.55);
  background: rgba(255, 254, 251, 0.6);
  transition: border-color 120ms ease, background 120ms ease;
  align-items: flex-start;
}

.todo-item:hover {
  border-color: rgba(110, 138, 126, 0.4);
  background: #fffefb;
}

.todo-item:has(input:not(:checked)) {
  opacity: 0.55;
}

.todo-item:has(input:not(:checked)) .todo-item__title {
  text-decoration: line-through;
}

.todo-item__check-label {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-top: 2px;
}

.todo-item__check {
  width: 18px;
  height: 18px;
  accent-color: rgb(74, 122, 104);
  cursor: pointer;
}

.todo-item__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.todo-item__title {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: #2f2934;
  line-height: 1.4;
  outline: none;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 120ms ease;
  word-break: break-word;
}

.todo-item__title:focus {
  background: rgba(110, 138, 126, 0.08);
}

.todo-item__deadline {
  font-size: var(--font-size-xs);
  color: #7a7068;
  line-height: 1.3;
}

.todo-item__priority {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  width: fit-content;
}

.todo-item__priority--high {
  background: rgba(200, 80, 60, 0.1);
  color: #a04030;
}

.todo-item__priority--medium {
  background: rgba(200, 160, 60, 0.1);
  color: #9a7b2a;
}

.todo-item__priority--low {
  background: rgba(110, 138, 126, 0.1);
  color: rgb(74, 122, 104);
}

/* ── Skeleton ─────────────────────────────────────── */

.todo-item--skeleton {
  pointer-events: none;
}

.todo-item__check-skel {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(228, 220, 212, 0.5);
  flex: 0 0 18px;
}

.todo-item__text-skel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}

.todo-item__line-skel {
  height: 12px;
  border-radius: 6px;
  background: rgba(228, 220, 212, 0.5);
  animation: todo-skel-pulse 1.6s ease-in-out infinite;
}

.todo-item__line-skel--short { width: 60%; }

@keyframes todo-skel-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .todo-item__line-skel { animation: none; opacity: 0.7; }
}

/* ── Empty / Error ────────────────────────────────── */

.todo-modal__empty,
.todo-modal__error {
  text-align: center;
  padding: 24px 12px;
  color: #7a7068;
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.todo-modal__empty-hint {
  font-size: var(--font-size-xs);
  margin-top: 6px;
  color: #9a9088;
}

.todo-modal__retry {
  margin-top: 12px;
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid rgba(110, 138, 126, 0.4);
  background: transparent;
  color: rgb(74, 122, 104);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease;
}

.todo-modal__retry:hover { background: rgba(110, 138, 126, 0.06); }

.todo-modal__submit-error {
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(200, 80, 60, 0.08);
  color: #a04030;
  font-size: var(--font-size-sm);
  text-align: center;
}

/* ── Missing-task re-scan zone (#2401) ────────────── */

.todo-missing-zone {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 0;
}

.calm-input-shell.todo-missing-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  background: #FFFEFB;
  border: 1px solid rgba(58, 47, 38, 0.12);
  border-radius: 14px;
  cursor: text;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.calm-input-shell.todo-missing-shell:focus-within {
  border-color: rgba(228, 220, 212, 0.7);
  box-shadow: 0 1px 2px rgba(58, 47, 38, 0.04);
  outline: none;
}

.todo-missing-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  appearance: none;
  padding: 9px 2px;
  font: inherit;
  font-size: var(--font-size-sm);
  color: #3A2F26;
  line-height: 1.4;
}

.todo-missing-input::placeholder {
  color: #9A8E82;
  opacity: 1;
}

.todo-missing-send {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: none;
  background: #6E8A7E;
  color: #FFFEFB;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease, opacity 120ms ease;
  padding: 0;
  margin: 0;
}

.todo-missing-send:hover:not(:disabled) {
  background: #4A7A68;
}

.todo-missing-send:active:not(:disabled) {
  background: #4A7A68;
  transform: translateY(1px);
}

.todo-missing-send:focus-visible {
  outline: 2px solid #6E8A7E;
  outline-offset: 2px;
}

.todo-missing-send:disabled {
  background: rgba(110, 138, 126, 0.35);
  cursor: default;
}

.todo-missing-send:disabled:hover {
  background: rgba(110, 138, 126, 0.35);
}

.todo-missing-send::before {
  content: "";
  position: absolute;
  inset: -4px;
}

.todo-missing-send svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.todo-missing-status {
  display: none;
  margin: 0 4px;
  overflow: hidden;
}

.todo-missing-status[data-state] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: #5C4D43;
}

.todo-missing-status__text {
  font: inherit;
  color: inherit;
}

.todo-missing-status[data-state="done"] .todo-missing-status__text {
  color: rgb(74, 122, 104);
}

.todo-missing-status[data-state="error"] .todo-missing-status__text {
  color: #a04030;
}

.todo-missing-spinner {
  display: none;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(110, 138, 126, 0.2);
  border-top-color: #6E8A7E;
  border-radius: 50%;
  animation: todo-rescan-spin 700ms linear infinite;
  flex: 0 0 12px;
}

.todo-missing-status[data-state="searching"] .todo-missing-spinner {
  display: inline-block;
}

@keyframes todo-rescan-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .todo-missing-spinner { animation: none; opacity: 0.7; }
}

/* ── Hint ─────────────────────────────────────────── */

.todo-modal__hint {
  margin: 14px 4px 0;
  font-size: var(--font-size-sm);
  color: #9A8E82;
  line-height: 1.45;
}

/* ── Footer ───────────────────────────────────────── */

.todo-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(228, 220, 212, 0.5);
}

.todo-modal__cancel {
  padding: 8px 18px;
  border-radius: 10px;
  border: 1px solid rgba(228, 220, 212, 0.7);
  background: transparent;
  color: #5c4d43;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease;
}

.todo-modal__cancel:hover { background: rgba(0, 0, 0, 0.03); }

.todo-modal__confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 10px;
  border: none;
  background: rgb(74, 122, 104);
  color: #fff;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, opacity 120ms ease;
}

.todo-modal__confirm:hover:not(:disabled) { background: rgb(60, 105, 88); }

.todo-modal__confirm:disabled {
  opacity: 0.5;
  cursor: default;
}

.todo-modal__confirm span {
  display: inline !important;
}

.todo-modal__confirm:focus-visible,
.todo-modal__cancel:focus-visible {
  outline: 2px solid #6e8a7e;
  outline-offset: 2px;
}

/* ── Dark mode ────────────────────────────────────── */

[data-theme="dark"] .todo-modal__panel {
  background: #1e1c20;
  border-color: rgba(80, 75, 70, 0.5);
}

[data-theme="dark"] .todo-modal__header { border-bottom-color: rgba(80, 75, 70, 0.4); }
[data-theme="dark"] .todo-modal__footer { border-top-color: rgba(80, 75, 70, 0.4); }

[data-theme="dark"] .todo-modal__title { color: #e8e4e0; }
[data-theme="dark"] .todo-modal__subtitle { display: none; }
[data-theme="dark"] .todo-modal__close { color: #9a9088; }
[data-theme="dark"] .todo-modal__close:hover { background: rgba(255, 255, 255, 0.06); }

[data-theme="dark"] .todo-item {
  border-color: rgba(80, 75, 70, 0.4);
  background: rgba(30, 28, 32, 0.6);
}

[data-theme="dark"] .todo-item:hover {
  border-color: rgba(110, 138, 126, 0.4);
  background: rgba(30, 28, 32, 0.9);
}

[data-theme="dark"] .todo-item__title { color: #e8e4e0; }
[data-theme="dark"] .todo-item__title:focus { background: rgba(110, 138, 126, 0.12); }

[data-theme="dark"] .todo-modal__cancel { border-color: rgba(80, 75, 70, 0.5); color: #c0b8b0; }
[data-theme="dark"] .todo-modal__cancel:hover { background: rgba(255, 255, 255, 0.04); }

[data-theme="dark"] .calm-input-shell.todo-missing-shell {
  background: rgba(30, 28, 32, 0.6);
  border-color: rgba(80, 75, 70, 0.4);
}

[data-theme="dark"] .calm-input-shell.todo-missing-shell:focus-within {
  border-color: rgba(168, 197, 184, 0.18);
  box-shadow: none;
}

[data-theme="dark"] .todo-missing-input { color: #e8e4e0; }
[data-theme="dark"] .todo-missing-input::placeholder { color: #7a7068; }

[data-theme="dark"] .todo-missing-status__text { color: #9a9088; }
[data-theme="dark"] .todo-missing-status[data-state="done"] .todo-missing-status__text { color: rgba(110, 138, 126, 0.9); }
[data-theme="dark"] .todo-missing-status[data-state="error"] .todo-missing-status__text { color: #c86050; }

[data-theme="dark"] .todo-missing-spinner {
  border-color: rgba(110, 138, 126, 0.2);
  border-top-color: rgba(110, 138, 126, 0.8);
}

[data-theme="dark"] .email-reader-actions .email-todo-action {
  background: rgba(255, 254, 251, 0.08) !important;
  color: #EDE6DD !important;
  border-color: rgba(255, 254, 251, 0.14) !important;
}

[data-theme="dark"] .email-reader-actions .email-todo-action:hover {
  background: rgba(255, 254, 251, 0.12) !important;
  border-color: rgba(110, 138, 126, 0.45) !important;
}