/* TaskHub — theming via CSS custom properties.
   :root holds the LIGHT palette (default). [data-theme="dark"] overrides it.
   All colour values (source badges, urgency chips, pill borders, shadows,
   on-accent text) are variables so both themes stay in sync. */

:root {
  /* --- base surfaces / text (light) --- */
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #eef1f7;
  --border: #d7dce6;
  --text: #1b1f2a;
  --muted: #5c6474;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --on-accent: #ffffff;      /* text/icon colour on an accent-filled control */
  --danger: #dc2626;
  --ok: #16a34a;
  --warn: #d97706;

  /* raw source hues (kept for reference/reuse) */
  --todo: #3b82f6;        /* blue */
  --planner: #8b5cf6;     /* purple */
  --flagged: #f59e0b;     /* amber */
  --jira: #14b8a6;        /* teal */

  /* --- source badges (light: darker fg for contrast on light bg) --- */
  --badge-todo-bg:    rgba(59, 130, 246, .12);
  --badge-todo-fg:    #1d4ed8;
  --badge-todo-bd:    rgba(59, 130, 246, .45);
  --badge-planner-bg: rgba(139, 92, 246, .12);
  --badge-planner-fg: #6d28d9;
  --badge-planner-bd: rgba(139, 92, 246, .45);
  --badge-flagged-bg: rgba(217, 119, 6, .14);
  --badge-flagged-fg: #b45309;
  --badge-flagged-bd: rgba(217, 119, 6, .5);
  --badge-jira-bg:    rgba(13, 148, 136, .13);
  --badge-jira-fg:    #0f766e;
  --badge-jira-bd:    rgba(13, 148, 136, .5);
  --badge-stale-bg:   rgba(92, 100, 116, .12);
  --badge-stale-fg:   var(--muted);
  --badge-stale-bd:   var(--border);
  --badge-action-bg:  rgba(37, 99, 235, .12);
  --badge-action-fg:  var(--accent);
  --badge-action-bd:  rgba(37, 99, 235, .4);

  /* --- urgency chips u1 (low) → u5 (critical) --- */
  --u1-bg: rgba(92, 100, 116, .16);   --u1-fg: #4b5163;
  --u2-bg: rgba(22, 163, 74, .14);    --u2-fg: #15803d;
  --u3-bg: rgba(202, 138, 4, .16);    --u3-fg: #a16207;
  --u4-bg: rgba(234, 88, 12, .16);    --u4-fg: #c2410c;
  --u5-bg: rgba(220, 38, 38, .16);    --u5-fg: #b91c1c;

  /* --- Package F2 status-chip tones (source_status_tone) --- */
  --tone-neutral-bg: rgba(92, 100, 116, .14);  --tone-neutral-fg: #4b5163;  --tone-neutral-bd: rgba(92, 100, 116, .4);
  --tone-active-bg:  rgba(37, 99, 235, .12);   --tone-active-fg:  #1d4ed8;  --tone-active-bd:  rgba(37, 99, 235, .4);
  --tone-wait-bg:    rgba(217, 119, 6, .14);   --tone-wait-fg:    #b45309;  --tone-wait-bd:    rgba(217, 119, 6, .5);
  --tone-blocked-bg: rgba(220, 38, 38, .14);   --tone-blocked-fg: #b91c1c;  --tone-blocked-bd: rgba(220, 38, 38, .45);
  --tone-done-bg:    rgba(22, 163, 74, .14);   --tone-done-fg:    #15803d;  --tone-done-bd:    rgba(22, 163, 74, .45);

  /* --- status pill borders (tinted) --- */
  --pill-ok-bd:      rgba(22, 163, 74, .45);
  --pill-warn-bd:    rgba(217, 119, 6, .45);
  --pill-err-bd:     rgba(220, 38, 38, .45);
  --pill-running-bd: rgba(37, 99, 235, .5);

  /* --- shadows / overlays --- */
  --backdrop: rgba(15, 23, 42, .35);
  --shadow-drawer: -12px 0 32px rgba(15, 23, 42, .18);
  --shadow-bar: 0 -6px 24px rgba(15, 23, 42, .12);

  /* --- diff highlight (word-level memory diff) — from ok/danger hues --- */
  --diff-ins-bg: rgba(22, 163, 74, .18);
  --diff-ins-fg: #15803d;
  --diff-del-bg: rgba(220, 38, 38, .16);
  --diff-del-fg: #b91c1c;

  /* --- write-back "done" success accent (Package E) --- */
  --done-bg: rgba(22, 163, 74, .12);
  --done-fg: #15803d;
  --done-bd: rgba(22, 163, 74, .5);
  --done-bg-hover: rgba(22, 163, 74, .2);
}

[data-theme="dark"] {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1e222c;
  --border: #262b36;
  --text: #e6e9ef;
  --muted: #8b93a7;
  --accent: #4f8cff;
  --accent-hover: #6da0ff;
  --on-accent: #ffffff;
  --danger: #ef4444;
  --ok: #22c55e;
  --warn: #f59e0b;

  --badge-todo-bg:    rgba(59, 130, 246, .16);
  --badge-todo-fg:    #7db2ff;
  --badge-todo-bd:    rgba(59, 130, 246, .45);
  --badge-planner-bg: rgba(139, 92, 246, .16);
  --badge-planner-fg: #b79bff;
  --badge-planner-bd: rgba(139, 92, 246, .45);
  --badge-flagged-bg: rgba(245, 158, 11, .14);
  --badge-flagged-fg: #fbc35c;
  --badge-flagged-bd: rgba(245, 158, 11, .45);
  --badge-jira-bg:    rgba(20, 184, 166, .15);
  --badge-jira-fg:    #4fd8c8;
  --badge-jira-bd:    rgba(20, 184, 166, .45);
  --badge-stale-bg:   rgba(139, 147, 167, .15);
  --badge-stale-fg:   var(--muted);
  --badge-stale-bd:   var(--border);
  --badge-action-bg:  rgba(79, 140, 255, .15);
  --badge-action-fg:  var(--accent);
  --badge-action-bd:  rgba(79, 140, 255, .4);

  --u1-bg: rgba(139, 147, 167, .18); --u1-fg: #aab2c5;
  --u2-bg: rgba(34, 197, 94, .16);   --u2-fg: #62d98d;
  --u3-bg: rgba(234, 179, 8, .16);   --u3-fg: #eed057;
  --u4-bg: rgba(249, 115, 22, .18);  --u4-fg: #fb9a58;
  --u5-bg: rgba(239, 68, 68, .2);    --u5-fg: #f87e7e;

  /* --- Package F2 status-chip tones (dark) --- */
  --tone-neutral-bg: rgba(139, 147, 167, .16); --tone-neutral-fg: #aab2c5; --tone-neutral-bd: rgba(139, 147, 167, .4);
  --tone-active-bg:  rgba(79, 140, 255, .16);  --tone-active-fg:  #7db2ff;  --tone-active-bd:  rgba(79, 140, 255, .4);
  --tone-wait-bg:    rgba(245, 158, 11, .16);  --tone-wait-fg:    #fbc35c;  --tone-wait-bd:    rgba(245, 158, 11, .45);
  --tone-blocked-bg: rgba(239, 68, 68, .18);   --tone-blocked-fg: #f87e7e;  --tone-blocked-bd: rgba(239, 68, 68, .45);
  --tone-done-bg:    rgba(34, 197, 94, .16);   --tone-done-fg:    #62d98d;  --tone-done-bd:    rgba(34, 197, 94, .45);

  --pill-ok-bd:      rgba(34, 197, 94, .4);
  --pill-warn-bd:    rgba(245, 158, 11, .4);
  --pill-err-bd:     rgba(239, 68, 68, .4);
  --pill-running-bd: rgba(79, 140, 255, .5);

  --backdrop: rgba(0, 0, 0, .5);
  --shadow-drawer: -12px 0 32px rgba(0, 0, 0, .4);
  --shadow-bar: 0 -6px 24px rgba(0, 0, 0, .35);

  --diff-ins-bg: rgba(34, 197, 94, .22);
  --diff-ins-fg: #7ee2a4;
  --diff-del-bg: rgba(239, 68, 68, .22);
  --diff-del-fg: #f8a1a1;

  --done-bg: rgba(34, 197, 94, .16);
  --done-fg: #62d98d;
  --done-bd: rgba(34, 197, 94, .45);
  --done-bg-hover: rgba(34, 197, 94, .26);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
h4 { font-size: .85rem; margin: .9rem 0 .3rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.muted { color: var(--muted); }
.small { font-size: .82rem; }

.container { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
/* Dashboard: full width so the wide 12-column table fits without clipping the
   last columns on typical desktop screens; narrower viewports scroll inside the
   table card (see .table-card). */
/* Data-dense dashboard uses the available screen width (forms/auth stay narrow). */
.container.wide { max-width: none; }

/* --- top bar ------------------------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* "created by LalAi" maker's mark — top-left on every page. */
.topbar-logo { height: 30px; width: auto; display: block; flex: none; }
.corner-logo { position: fixed; top: 10px; left: 14px; z-index: 5; }
.corner-logo img { height: 34px; width: auto; display: block; }

.brand { font-weight: 700; font-size: 1.1rem; letter-spacing: .02em; }
.brand span { color: var(--accent); }
.app-ver {
  font-size: .62rem; font-weight: 600; letter-spacing: .02em;
  color: var(--muted); background: var(--surface-2);
  border-radius: 999px; padding: 1px 6px; vertical-align: middle;
}
/* Version + generation timestamp stamp shown on every generated plan/output. */
.gen-stamp { margin-top: 8px; font-size: .72rem; color: var(--muted); opacity: .85; }

/* #9 project-health radar */
.health-body h3 { margin: 14px 0 6px; font-size: 1rem; }
.hb-overall { margin-bottom: 4px; }
.hb-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.hb-row:last-child { border-bottom: none; }
.hb-label { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.hb-metrics { color: var(--muted); font-size: .84rem; white-space: nowrap; }
.hb-over { color: var(--danger); font-weight: 600; }
.rag-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; vertical-align: middle; }
.rag-green { background: #16a34a; }
.rag-amber { background: #d97706; }
.rag-red { background: #dc2626; }

/* Persona editor (Settings) */
.persona-card { grid-column: 1 / -1; }
.persona-card .report-content { width: 100%; box-sizing: border-box; min-height: 220px; }
.persona-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.persona-row .btn { margin-top: 0; }
.persona-versions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.persona-vlabel { margin: 0; }
.persona-versions select { width: auto; }
.persona-versions .btn { margin-top: 0; }
.persona-diff { margin-top: 12px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; border: 1px solid var(--border); border-radius: 8px; padding: 10px; max-height: 340px; overflow: auto; }
.persona-diff .d-add { background: rgba(22,163,74,.16); }
.persona-diff .d-del { background: rgba(220,38,38,.14); text-decoration: line-through; }
.persona-diff .d-sub { color: var(--muted); font-weight: 600; margin: 8px 0 4px; }

/* Feature #2: per-plan-step action bar (in the drawer proposal). */
.plan-actionable li { margin-bottom: 12px; }
.plan-step-text { margin-bottom: 5px; }
.plan-step-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plan-step-actions .step-act {
  font: inherit; font-size: .74rem; padding: 2px 8px; cursor: pointer;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px;
}
.plan-step-actions .step-act:hover:not(:disabled) { border-color: var(--accent); }
.plan-step-actions .step-act:disabled { opacity: .6; cursor: default; }
.plan-step-actions .step-wf { font-size: .74rem; padding: 2px 6px; }
.step-status { margin-left: 4px; }
.step-status.err { color: var(--danger); }

/* Changelog page */
.changelog-page { max-width: 860px; }
.changelog-page h1 { margin: 0 0 6px; }
.changelog-page h2 { margin: 26px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); font-size: 1.15rem; }
.changelog-page h3 { margin: 14px 0 4px; font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.changelog-page ul { margin: 4px 0 10px; padding-left: 22px; }
.changelog-page li { margin: 3px 0; }
.changelog-page p { margin: 6px 0; color: var(--muted); }
.changelog-page hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.changelog-page code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: .85em; }

/* Best-matching primary workflow button per plan step */
.plan-step-actions .step-wf-primary {
  font: inherit; font-size: .74rem; font-weight: 600; padding: 2px 9px; cursor: pointer;
  color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 6px;
}
.plan-step-actions .step-wf-primary:hover:not(:disabled) { background: var(--accent-hover); }
.plan-step-actions .step-more { display: inline; }
.plan-step-actions .step-more summary { cursor: pointer; font-size: .74rem; color: var(--muted); list-style: none; }
.plan-step-actions .step-more summary::-webkit-details-marker { display: none; }
.plan-step-actions .step-more[open] summary { color: var(--text); }
.plan-step-actions .step-more-list {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px;
  padding: 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-subtle, rgba(0,0,0,.02));
}
.plan-step-actions .step-wf-alt {
  font: inherit; font-size: .72rem; padding: 2px 8px; cursor: pointer;
  color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 6px;
}
.plan-step-actions .step-wf-alt:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.brand.big { font-size: 1.6rem; margin-bottom: .25rem; }

.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a {
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 8px;
}
.topbar nav a:hover { color: var(--text); text-decoration: none; background: var(--surface-2); }
.topbar nav a.active { color: var(--text); background: var(--surface-2); }

/* --- cards / forms -------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

label { display: block; margin: 14px 0 4px; font-size: .85rem; color: var(--muted); }
label.checkbox { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: .9rem; margin: 8px 0; }

input[type="password"],
input[type="text"],
input[type="time"],
input[type="number"],
select {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 16px 0 4px;
  padding: 10px 14px;
}
legend { font-size: .8rem; color: var(--muted); padding: 0 6px; }

.btn {
  display: inline-block;
  padding: 8px 16px;
  margin-top: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); text-decoration: none; color: var(--text); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); margin-top: 0; }
.btn-ghost:hover { color: var(--text); border-color: var(--border); }
.btn-small { padding: 4px 10px; font-size: .85rem; margin-top: 6px; }
.btn-block { width: 100%; }

.form-error { color: var(--danger); font-size: .85rem; margin: 10px 0 0; }
.form-status { margin-left: 12px; font-size: .85rem; color: var(--muted); }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--danger); }

/* --- auth / setup --------------------------------------------------------- */

.auth-wrap { min-height: 90vh; display: flex; align-items: center; justify-content: center; }
.auth-card { width: 100%; max-width: 400px; padding: 32px; }

.setup-wrap { max-width: 640px; margin: 0 auto; }
.setup-step { margin-bottom: 16px; }
.setup-step h3 { margin-top: 0; }

.check { font-weight: 600; }
.check.ok { color: var(--ok); }
.check.warn { color: var(--warn); }
.check.err { color: var(--danger); }

/* --- dashboard ------------------------------------------------------------ */

.dash-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.dash-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dash-actions .btn { margin-top: 0; }

.usage-widget {
  font-size: .85rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
}
.usage-widget strong { color: var(--text); }
.usage-label { color: var(--muted); margin-right: 4px; }

.status-pill {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
}
.status-pill.ok { color: var(--ok); border-color: var(--pill-ok-bd); }
.status-pill.warn { color: var(--warn); border-color: var(--pill-warn-bd); }
.status-pill.err { color: var(--danger); border-color: var(--pill-err-bd); }
.status-pill.running { color: var(--accent); border-color: var(--pill-running-bd); animation: pulse 1.6s ease-in-out infinite; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* --- discreet stats strip -------------------------------------------------- */

.stats-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 0 0 12px;
  padding: 6px 12px;
  font-size: .8rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.stat-group { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.stat-cap {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .66rem;
  color: var(--muted);
  opacity: .75;
}
.stat-item { display: inline-flex; align-items: center; gap: 4px; }
.stat-group > b, .stat-item b { color: var(--text); font-weight: 600; }
.stats-strip .badge, .stats-strip .status-chip { font-size: .68rem; padding: 1px 7px; }
.stat-overdue b { color: var(--muted); }
.stat-overdue.has b { color: var(--danger); }

/* --- tasks table ----------------------------------------------------------- */

/* The table card is the scroll region for BOTH axes. Capping its height below the
   viewport guarantees the horizontal scrollbar stays on-screen: a tall table with
   page-level overflow puts that scrollbar at the very bottom, off-screen and
   behind the sticky selection bar, so it can never be reached (the recurring
   "doesn't fit and can't scroll" bug). */
.table-card { padding: 0; overflow: auto; max-height: calc(100vh - 300px); }

/* min-width keeps the columns at a usable size; when the viewport is narrower
   than this, .table-card scrolls horizontally instead of squeezing the last
   column (the proposal) into an unreadable, clipped sliver. Package F2 added
   three provenance columns (Eredet / Státusz / Létrehozva) → wider table. */
table.tasks { width: 100%; min-width: 1560px; border-collapse: collapse; }

/* Pin the column-label row to the top of the scroll card so sorting stays usable
   while scrolling; the filter row scrolls up and disappears cleanly behind it.
   border-collapse can drop a sticky cell's border, so the separator is a shadow. */
table.tasks thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--border);
}
table.tasks th {
  text-align: left;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
table.tasks td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.tasks tr:last-child td { border-bottom: none; }

tr.task-row { cursor: pointer; }
tr.task-row:hover td { background: var(--surface-2); }

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

.cell-title { min-width: 220px; max-width: 380px; }
.cell-summary { min-width: 240px; max-width: 340px; color: var(--muted); font-size: .88rem; overflow-wrap: break-word; word-break: normal; }
.cell-due { white-space: nowrap; font-size: .88rem; }
.cell-due.overdue { color: var(--danger); font-weight: 600; }

/* Package F2: provenance columns. */
.cell-origin { min-width: 130px; max-width: 220px; font-size: .85rem; color: var(--text); overflow-wrap: anywhere; }
.cell-created { white-space: nowrap; font-size: .85rem; color: var(--muted); }
.cell-status { white-space: nowrap; }

/* Package F2: coloured status chip (tone = source_status_tone). */
.status-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.status-chip.tone-neutral { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); border: 1px solid var(--tone-neutral-bd); }
.status-chip.tone-active  { background: var(--tone-active-bg);  color: var(--tone-active-fg);  border: 1px solid var(--tone-active-bd); }
.status-chip.tone-wait    { background: var(--tone-wait-bg);    color: var(--tone-wait-fg);    border: 1px solid var(--tone-wait-bd); }
.status-chip.tone-blocked { background: var(--tone-blocked-bg); color: var(--tone-blocked-fg); border: 1px solid var(--tone-blocked-bd); }
.status-chip.tone-done    { background: var(--tone-done-bg);    color: var(--tone-done-fg);    border: 1px solid var(--tone-done-bd); }

/* --- badges ----------------------------------------------------------------
   Source colours: todo=blue, planner=purple, flagged_email=amber, jira=teal */

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge-todo          { background: var(--badge-todo-bg);    color: var(--badge-todo-fg);    border: 1px solid var(--badge-todo-bd); }
.badge-planner       { background: var(--badge-planner-bg); color: var(--badge-planner-fg); border: 1px solid var(--badge-planner-bd); }
.badge-flagged_email { background: var(--badge-flagged-bg); color: var(--badge-flagged-fg); border: 1px solid var(--badge-flagged-bd); }
.badge-jira          { background: var(--badge-jira-bg);    color: var(--badge-jira-fg);    border: 1px solid var(--badge-jira-bd); }
.badge-stale         { background: var(--badge-stale-bg);   color: var(--badge-stale-fg);   border: 1px solid var(--badge-stale-bd); }
.badge-action        { background: var(--badge-action-bg);  color: var(--badge-action-fg);  border: 1px solid var(--badge-action-bd); }

/* urgency 1 (low) → 5 (critical) */
.urgency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 700;
}
.urgency.u1 { background: var(--u1-bg); color: var(--u1-fg); }
.urgency.u2 { background: var(--u2-bg); color: var(--u2-fg); }
.urgency.u3 { background: var(--u3-bg); color: var(--u3-fg); }
.urgency.u4 { background: var(--u4-bg); color: var(--u4-fg); }
.urgency.u5 { background: var(--u5-bg); color: var(--u5-fg); }

/* --- drawer ----------------------------------------------------------------- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  z-index: 30;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 20px 24px 32px;
  overflow-y: auto;
  z-index: 31;
  box-shadow: var(--shadow-drawer);
}

.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.drawer-head h2 { margin: 0; font-size: 1.1rem; line-height: 1.35; }

.drawer-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 12px 0; font-size: .85rem; color: var(--muted); }

/* Package F: "Eredet és állapot" section — a compact definition list. */
.drawer-origin { margin: 4px 0 12px; }
.drawer-origin h3 { margin-top: 12px; }
.drawer-origin-list { margin: 6px 0 0; padding: 0; }
.drawer-origin-list:empty { display: none; }
.drawer-origin-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  font-size: .85rem;
  border-bottom: 1px solid var(--border);
}
.drawer-origin-row:last-child { border-bottom: none; }
.drawer-origin-row dt {
  flex: none;
  width: 120px;
  color: var(--muted);
}
.drawer-origin-row dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.drawer-body {
  white-space: pre-wrap;
  font-size: .9rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  max-height: 220px;
  overflow-y: auto;
}
.drawer-body:empty { display: none; }

.drawer-proposal .prop-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.drawer-proposal .prop-summary { font-size: .95rem; }
.drawer-proposal ol.plan { margin: 4px 0 0; padding-left: 22px; }
.drawer-proposal ol.plan li { margin: 4px 0; }
.drawer-proposal pre.draft {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  font-size: .85rem;
}

.drawer-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.drawer-actions .btn { margin-top: 0; }

/* --- settings ----------------------------------------------------------------- */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
}

/* --- responsive ----------------------------------------------------------------- */

/* ============================================================
   MOBILE / TABLET — task table becomes cards.
   The DOM and ALL JS (row click → drawer, checkbox, automate toggle,
   filtering via tr.hidden, selection, sorting) are unchanged; only the
   presentation switches. Card mode ≤ 900px: 2-col grid on tablets,
   single column on phones (≤ 599px).
   ============================================================ */
@media (max-width: 900px) {
  .container { padding: 16px 12px 48px; }

  /* Unwrap the bounded scroll card — cards flow in normal page height. */
  .table-card { max-height: none; overflow: visible; background: transparent; border: none; padding: 0; }

  table.tasks { min-width: 0; width: 100%; display: block; }
  table.tasks thead { display: block; }
  table.tasks thead tr:first-child { display: none; } /* column labels: no columns to label */

  /* Filter row → stacked panel, collapsed until the "Szűrők" toggle. */
  table.tasks tr.filter-row { display: none; }
  body.filters-open table.tasks tr.filter-row {
    display: block;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 4px 12px 12px; margin-bottom: 12px;
  }
  body.filters-open table.tasks tr.filter-row th { display: block; width: auto; padding: 8px 0 0; }
  body.filters-open table.tasks tr.filter-row th:empty { display: none; }
  table.tasks tr.filter-row input[type="text"],
  table.tasks tr.filter-row select { width: 100%; box-sizing: border-box; }

  table.tasks tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  table.tasks tbody tr.task-row {
    display: block; position: relative;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 40px 12px 14px;
  }
  table.tasks tr.task-row:hover td { background: transparent; }
  table.tasks td { display: block; border: none; padding: 1px 0; }
  td.empty { grid-column: 1 / -1; text-align: center; }

  .cell-select { position: absolute; top: 10px; right: 10px; padding: 0; }
  .task-row td:nth-child(2) { display: inline-block; margin-bottom: 2px; } /* source badge */
  .cell-title { font-size: 1rem; font-weight: 600; margin: 2px 0 6px; line-height: 1.3; max-width: none; }
  .cell-title a { color: var(--text); }

  /* meta values inline; textual ones get a small label. The `table.tasks` prefix
     raises specificity above the generic `table.tasks td { display: block }`. */
  table.tasks .cell-type, table.tasks .cell-status, table.tasks .cell-urgency,
  table.tasks .cell-due, table.tasks .cell-origin, table.tasks .cell-created {
    display: inline-flex; align-items: center; gap: 4px; margin: 2px 10px 2px 0; font-size: .8rem;
  }
  .cell-due::before { content: 'Határidő: '; color: var(--muted); }
  .cell-created::before { content: 'Létrehozva: '; color: var(--muted); }
  .cell-origin::before { content: 'Eredet: '; color: var(--muted); }
  .cell-urgency::before { content: 'Sürgősség: '; color: var(--muted); }

  table.tasks .cell-summary { display: block; margin-top: 8px; font-size: .85rem; max-width: none; }
  table.tasks .cell-automate, table.tasks .cell-actions { display: inline-flex; margin: 10px 12px 0 0; }

  .selection-bar { flex-wrap: wrap; border-radius: 14px; gap: 6px; }
  #selection-status { margin-left: 0; flex-basis: 100%; }
}

/* Phone: single column + trim the lowest-priority meta. */
@media (max-width: 599px) {
  table.tasks tbody { grid-template-columns: 1fr; }
  table.tasks .cell-origin, table.tasks .cell-created { display: none; }
  .dash-actions .btn { padding: 6px 10px; }
}

/* Drawer + agentic modals go full-screen on phones. */
@media (max-width: 720px) {
  /* Top bar must wrap, or it overflows and inflates the layout viewport (which
     then breaks the phone breakpoints). Nav drops to its own full-width row. */
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
  .topbar-logo { height: 26px; }
  .topbar nav { order: 10; flex: 1 0 100%; }
  #logout-btn { margin-left: auto; }

  .drawer { width: 100vw; border-left: none; padding: 16px 16px 40px; }
  .report-modal { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; top: 0; left: 0; transform: none; }
  .report-backdrop { display: none; }
}

/* The "Szűrők" toggle + "Rendezés" dropdown only exist in card mode
   (on desktop, sorting/filtering happen via the column headers/filter row). */
.filters-toggle, .sort-select { display: none; }
@media (max-width: 900px) {
  .filters-toggle { display: inline-flex; }
  .sort-select { display: inline-block; width: auto; padding: 7px 10px; }
}

/* --- task selection + automation toggle ------------------------------------- */

/* Checkbox column */
th.col-select, td.cell-select { width: 34px; padding-right: 0; text-align: center; }
td.cell-select { cursor: default; }
.row-check, #select-all { cursor: pointer; }

/* Automate toggle — a small switch. ON (accent) = included; OFF = excluded. */
td.cell-automate { cursor: default; }
.automate-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
}
.automate-toggle .switch-track {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background .15s ease, border-color .15s ease;
  flex: none;
}
.automate-toggle .switch-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .15s ease, background .15s ease;
}
.automate-toggle.on .switch-track { background: var(--accent); border-color: var(--accent); }
.automate-toggle.on .switch-thumb { transform: translateX(16px); background: var(--on-accent); }
.automate-toggle .switch-label { font-size: .78rem; min-width: 1.6em; }
.automate-toggle.on { color: var(--text); }
.automate-toggle:disabled { opacity: .5; cursor: default; }
.automate-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* "select to generate" hint in the proposal cell */
.hint-generate { color: var(--muted); font-style: italic; }

/* --- sticky selection action bar -------------------------------------------- */

.selection-bar {
  position: sticky;
  bottom: 8px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-bar);
}
/* The `hidden` attribute must win over the display:flex above (author display
   rules otherwise defeat [hidden]); the bar shows only when something is selected. */
.selection-bar[hidden] { display: none; }
.selection-bar .btn { margin-top: 0; }
.selection-count {
  font-weight: 700; color: var(--accent);
  background: var(--surface-2); border-radius: 999px;
  padding: 2px 10px; font-size: .82rem; white-space: nowrap;
}
#selection-status { margin-left: auto; }
#selection-status.err { color: var(--danger); }

/* --- theme toggle (header) --------------------------------------------------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- sortable column headers ------------------------------------------------- */

table.tasks th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.tasks th.sortable:hover { color: var(--text); }
th.sortable .sort-ind { margin-left: 4px; font-size: .8em; opacity: .5; }
th.sortable.sorted { color: var(--text); }
th.sortable.sorted .sort-ind { opacity: 1; }

/* --- filter row -------------------------------------------------------------- */

table.tasks tr.filter-row th {
  padding: 6px 10px 10px;
  border-bottom: 1px solid var(--border);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  vertical-align: top;
}
.filter-row input[type="text"],
.filter-row input[type="date"],
.filter-row select {
  width: 100%;
  padding: 5px 7px;
  font-size: .8rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.filter-row select[multiple] { height: auto; min-height: 3.4em; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.filter-chips label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 2px 6px;
  font-size: .74rem;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-chips label.on { border-color: var(--accent); color: var(--accent); background: var(--badge-action-bg); }
.filter-chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-daterange { display: flex; flex-direction: column; gap: 4px; }
.filter-daterange label.checkbox { margin: 0; font-size: .72rem; }
.filter-note { font-size: .72rem; color: var(--muted); margin: 2px 0 0; }

/* --- type cell --------------------------------------------------------------- */

.cell-type { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.type-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .74rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

/* rows hidden by client-side filtering */
tr.task-row[hidden] { display: none; }

/* --- task types (settings panel) -------------------------------------------- */

/* The panel spans the full settings grid width — it's a list, not a form column. */
.task-types-card { grid-column: 1 / -1; }

.tt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tt-head h2 { margin: 0; }
.tt-head-actions { display: flex; gap: 8px; }
.tt-head-actions .btn { margin-top: 0; }

/* add-new form */
.tt-add-form {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.tt-add-form label { margin-top: 10px; }
.tt-add-form label:first-child { margin-top: 0; }
.tt-add-form textarea,
.tt-edit-form textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.tt-add-form textarea:focus,
.tt-edit-form textarea:focus,
.tt-edit-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.tt-add-actions,
.tt-edit-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tt-add-actions .btn,
.tt-edit-actions .btn { margin-top: 12px; }

/* the type list */
.tt-list { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }

.tt-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.tt-row.editing { border-color: var(--accent); }
.tt-row.inactive { opacity: .72; }

.tt-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.tt-reorder { display: flex; flex-direction: column; gap: 2px; flex: none; }
.tt-reorder button {
  width: 24px;
  height: 18px;
  padding: 0;
  line-height: 1;
  font-size: .7rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
}
.tt-reorder button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.tt-reorder button:disabled { opacity: .35; cursor: default; }

.tt-info { flex: 1; min-width: 0; }
.tt-name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tt-name { font-weight: 600; color: var(--text); }
.tt-slug {
  font-size: .74rem;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.tt-def { display: block; margin-top: 3px; font-size: .82rem; color: var(--muted); }

.tt-controls { display: flex; align-items: center; gap: 10px; flex: none; }
.tt-controls .btn { margin-top: 0; }

/* active toggle — reuses the automate-toggle switch look via shared classes */
.tt-toggle-active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
}
.tt-toggle-active .switch-track {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background .15s ease, border-color .15s ease;
  flex: none;
}
.tt-toggle-active .switch-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .15s ease, background .15s ease;
}
.tt-toggle-active.on .switch-track { background: var(--accent); border-color: var(--accent); }
.tt-toggle-active.on .switch-thumb { transform: translateX(16px); background: var(--on-accent); }
.tt-toggle-active.on { color: var(--text); }
.tt-toggle-active .switch-label { font-size: .78rem; min-width: 2.6em; }
.tt-toggle-active:disabled { opacity: .5; cursor: default; }
.tt-toggle-active:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* inline edit form inside a row */
.tt-edit-form {
  padding: 4px 12px 14px 48px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.tt-edit-form label {
  display: block;
  margin: 10px 0 4px;
  font-size: .85rem;
  color: var(--muted);
}
.tt-edit-form input[type="text"] {
  width: 100%;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.tt-edit-form .tt-e-slug { color: var(--muted); background: var(--surface); cursor: not-allowed; }
.tt-edit-form .tt-e-delete { color: var(--danger); border-color: var(--border); }
.tt-edit-form .tt-e-delete:hover { border-color: var(--danger); }

/* --- backlog classification progress ---------------------------------------- */

.classify-progress {
  margin: 8px 0 4px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .88rem;
  color: var(--text);
}
.classify-progress.running { border-color: var(--pill-running-bd); }
.classify-progress.ok { border-color: var(--pill-ok-bd); }
.classify-progress.err { border-color: var(--pill-err-bd); color: var(--danger); }
.classify-progress .cp-label { margin-bottom: 6px; }
.classify-progress .cp-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.classify-progress .cp-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width .3s ease;
}

@media (max-width: 720px) {
  .tt-main { flex-wrap: wrap; }
  .tt-controls { width: 100%; justify-content: space-between; }
  .tt-edit-form { padding-left: 12px; }
}

/* --- nav badge (Memória frissült) ------------------------------------------- */

.nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
  background: var(--badge-action-bg);
  color: var(--badge-action-fg);
  border: 1px solid var(--badge-action-bd);
}
.nav-badge[hidden] { display: none; }

/* --- memory (playbook) page ------------------------------------------------- */

.mem-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.mem-intro { max-width: 720px; margin: 4px 0 0; }

.mem-badge-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--pill-running-bd);
  background: var(--badge-action-bg);
  color: var(--text);
  font-size: .85rem;
}
.mem-badge-note[hidden] { display: none; }
.mem-badge-note .btn { margin-top: 0; }

/* two-column layout: editor (wider) + version list */
.mem-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1.3fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .mem-grid { grid-template-columns: 1fr; }
}

.mem-editor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mem-editor-head h2 { margin: 0; }
.mem-editor-meta { display: flex; align-items: baseline; gap: 14px; }
.mem-charcount.over { color: var(--danger); font-weight: 600; }

.mem-content {
  width: 100%;
  min-height: 460px;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: .88rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
  tab-size: 2;
}
.mem-content:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.mem-editor-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.mem-editor-actions .btn { margin-top: 0; }

/* 409 conflict panel */
.mem-conflict {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--pill-err-bd);
  background: var(--surface-2);
}
.mem-conflict[hidden] { display: none; }
.mem-conflict-head { font-weight: 700; color: var(--danger); margin-bottom: 6px; }
.mem-conflict p { margin: 6px 0; color: var(--muted); }
.mem-conflict-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mem-conflict-actions .btn { margin-top: 0; }
.mem-conflict-diff { max-height: 260px; overflow-y: auto; margin-top: 10px; }

/* version list */
.mem-versions-card h2 { margin-bottom: .4rem; }
.mem-versions-actions { display: flex; gap: 8px; margin: 8px 0 12px; flex-wrap: wrap; }
.mem-versions-actions .btn { margin-top: 0; }

.mem-version-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 560px;
  overflow-y: auto;
}
.mem-version {
  display: flex;
  align-items: stretch;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.mem-version.current { border-color: var(--accent); }
.mem-version.picked { background: var(--surface-2); }

.mem-cmp-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0 8px;
  border-right: 1px solid var(--border);
  cursor: pointer;
  flex: none;
}
.mem-cmp-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: .68rem;
  font-weight: 700;
  background: var(--accent);
  color: var(--on-accent);
}

.mem-v-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mem-v-main:hover { background: var(--surface-2); }
.mem-v-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mem-v-id { font-weight: 700; }
.mem-v-author, .mem-v-cur { font-size: .68rem; }
.mem-v-ts { display: block; }
.mem-v-note {
  display: block;
  font-size: .8rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* view / diff card */
.mem-view-card[hidden] { display: none; }
.mem-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mem-view-head h2 { margin: 0; }
.mem-view-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mem-view-actions .btn { margin-top: 0; }
.mem-view-meta { margin: 8px 0 12px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }

.mem-pre, .mem-diff {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  font: .85rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  max-height: 560px;
  overflow-y: auto;
}

/* word-level diff highlights */
.diff-ins {
  background: var(--diff-ins-bg);
  color: var(--diff-ins-fg);
  text-decoration: none;
  border-radius: 3px;
}
.diff-del {
  background: var(--diff-del-bg);
  color: var(--diff-del-fg);
  text-decoration: line-through;
  border-radius: 3px;
}

/* taxonomy mirror */
.mem-taxonomy { display: flex; flex-direction: column; gap: 6px; }
.mem-tax-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.mem-tax-row.inactive { opacity: .7; }
.mem-tax-name { color: var(--text); }

/* --- write-back actions (Package E1) ---------------------------------------- */

/* Row "Művelet" column: keep it compact and don't trigger the row→drawer open. */
th.col-actions, td.cell-actions { width: 96px; white-space: nowrap; }
td.cell-actions { cursor: default; text-align: right; }

/* Row quick "✔ Kész" button — subtle success accent, light + dark aware. */
.row-done-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--done-bd);
  background: var(--done-bg);
  color: var(--done-fg);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.row-done-btn:hover { background: var(--done-bg-hover); border-color: var(--ok); }
.row-done-btn:disabled { opacity: .5; cursor: default; }
.row-done-btn:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }

/* Drawer write-back section: heading + button group + status line. */
.drawer-writeback { margin-top: 8px; }
.drawer-writeback h3 { margin-top: 16px; }

.drawer-actions-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 6px;
}

/* Individual status-transition buttons in the drawer. */
.wb-action-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}
.wb-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.wb-action-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Blocked Jira transitions (required field with no default): greyed + not clickable. */
.wb-action-btn.blocked,
.wb-action-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  color: var(--muted);
  border-color: var(--border);
  background: var(--surface-2);
}
.wb-action-btn.blocked:hover { color: var(--muted); border-color: var(--border); }

/* Pending (in-flight) button gets a gentle pulse; keeps the click acknowledged. */
.wb-action-btn.pending { animation: pulse 1.2s ease-in-out infinite; border-color: var(--accent); }

#drawer-action-status.err { color: var(--danger); }

/* --- Package E2: agentic drafts (drawer "Tervezet" section) ---------------- */
/* Uses theme vars only, so light + dark are covered by the existing palettes. */
.drawer-draft { margin-top: 8px; }
.drawer-draft h3 { margin-top: 16px; }
.drawer-draft-intro { margin: 2px 0 8px; }

.drawer-draft-genrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.drawer-draft-genrow .btn { margin-top: 0; }

/* While a generation is in flight, the generate button pulses to acknowledge
   the (long-running) request; disabled styling still applies underneath. */
.drawer-draft.generating #drawer-draft-generate:disabled {
  opacity: 1;
  animation: pulse 1.2s ease-in-out infinite;
  border-color: var(--accent);
}

.drawer-draft-result { margin-top: 10px; }

.drawer-draft-content {
  width: 100%;
  min-height: 180px;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  line-height: 1.5;
  resize: vertical;
}
.drawer-draft-content:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.drawer-draft-notes {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--tone-wait-bd);
  background: var(--tone-wait-bg);
  color: var(--tone-wait-fg);
  font-size: .82rem;
  overflow-wrap: anywhere;
}

.drawer-draft-refine { margin-top: 12px; }
.drawer-draft-refine-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.drawer-draft-refine-row input[type="text"] { flex: 1; min-width: 0; }
.drawer-draft-refine-row .btn { margin-top: 0; white-space: nowrap; }

.drawer-draft-commit {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.drawer-draft-commit .btn { margin-top: 0; }

/* The post-commit "open in Outlook / Jira" link, styled as a subtle button. */
.drawer-draft-link {
  text-decoration: none;
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}
.drawer-draft-link:hover { background: var(--surface-2); color: var(--accent-hover); border-color: var(--accent-hover); }

#drawer-draft-status.err,
#drawer-draft-commit-status.err { color: var(--danger); }

/* =========================================================================
   Agentic Wave 1 — theme-var driven, so light + dark are both covered.
   #1 Weekly report modal · #2 WBS editable list · #3 Batch reply panel
   ========================================================================= */

/* --- #1 Weekly report modal ------------------------------------------------ */

.report-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  z-index: 40;
}
.report-backdrop[hidden] { display: none; }

.report-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px 24px;
  overflow-y: auto;
  z-index: 41;
  box-shadow: var(--shadow-drawer);
}
.report-modal[hidden] { display: none; }

.report-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.report-modal-head h2 { margin: 0; font-size: 1.2rem; }
.report-modal-head .btn { margin-top: 0; }

.report-genrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.report-genrow .btn { margin-top: 0; }

/* While generating, the primary button pulses to acknowledge the long call. */
.report-modal.generating #report-generate:disabled {
  opacity: 1;
  animation: pulse 1.2s ease-in-out infinite;
  border-color: var(--accent);
}

.report-result { margin-top: 14px; display: flex; flex-direction: column; }
.report-content {
  width: 100%;
  min-height: 340px;
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: .88rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}
.report-content:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.report-commit {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.report-commit .btn { margin-top: 0; }
.report-link {
  text-decoration: none;
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}
.report-link:hover { background: var(--surface-2); color: var(--accent-hover); border-color: var(--accent-hover); }
#report-status.err,
#report-commit-status.err { color: var(--danger); }

@media (max-width: 720px) {
  .report-modal { padding: 16px; border-radius: 12px; }
  .report-content { min-height: 260px; }
}

/* --- Wave 2 #4 triage + #5 meeting (reuse .report-modal shell) ------------- */

/* Pulse the primary generate button of each modal while a long call runs. */
.report-modal.generating #triage-generate:disabled,
.report-modal.generating #meeting-refresh:disabled {
  opacity: 1;
  animation: pulse 1.2s ease-in-out infinite;
  border-color: var(--accent);
}

.triage-briefing { margin-top: 6px; line-height: 1.5; }
.triage-briefing h3 { margin: 16px 0 4px; font-size: 1.05rem; }
.triage-briefing h4 { margin: 12px 0 2px; font-size: 0.95rem; }
.triage-briefing p { margin: 4px 0; }
.triage-briefing ul { margin: 4px 0 8px; padding-left: 20px; }
.triage-briefing li { margin: 2px 0; }
.triage-extra h3 { margin: 16px 0 4px; font-size: 1.05rem; }
.triage-extra ul { list-style: none; margin: 0; padding: 0; }
.triage-extra li {
  padding: 8px 10px;
  margin: 6px 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
#triage-status.err { color: var(--danger); }

/* Meeting-prep brief (#10) structured sections */
.mprep-list { list-style: none; margin: 0; padding: 0; }
.mprep-list li { padding: 6px 10px; margin: 5px 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
#meeting-prep-result .drawer-draft-content { width: 100%; margin-top: 4px; }
#meeting-prep-status.err, #meeting-prep-commit-status.err { color: var(--danger); }

/* Financial/legal follow-up toggle (#12) */
.drawer-fu-finance { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 8px; font-size: .9rem; }
.drawer-fu-finance input { margin-top: 3px; }

/* Jira backlog grooming (#11) */
.grooming-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.groom-card { padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.groom-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.groom-head a { font-weight: 600; }
.groom-summary { font-weight: 600; }
.groom-findings { list-style: disc; margin: 6px 0 8px 18px; padding: 0; }
.groom-findings li { margin: 2px 0; color: var(--muted); font-size: .9rem; }
.groom-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.groom-action { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.groom-action input { margin-top: 3px; }
.groom-result { margin-top: 8px; }
.groom-result.err { color: var(--danger); }
#grooming-status.err, #grooming-commit-status.err { color: var(--danger); }

.meeting-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.meeting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.meeting-item:hover { border-color: var(--accent); background: var(--surface); }
.meeting-item-title { font-weight: 600; }
.meeting-summary h3,
.meeting-decisions h3,
.meeting-ai-head { margin: 16px 0 4px; font-size: 1.05rem; }
.meeting-decisions ul { margin: 4px 0 8px; padding-left: 20px; }
.meeting-actions { display: flex; flex-direction: column; gap: 6px; }
.meeting-action {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.meeting-action input { margin-top: 3px; }
#meeting-status.err,
#meeting-commit-status.err { color: var(--danger); }

/* --- #2 WBS (drawer "Munkalebontás" section) ------------------------------- */

.drawer-wbs { margin-top: 8px; }
.drawer-wbs h3 { margin-top: 16px; }
.drawer-wbs-intro { margin: 2px 0 8px; }

.drawer-wbs-genrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.drawer-wbs-genrow .btn { margin-top: 0; }
.drawer-wbs.generating #drawer-wbs-generate:disabled,
.drawer-wbs.generating #drawer-doc-generate:disabled,
.drawer-wbs.generating #drawer-fu-generate:disabled {
  opacity: 1;
  animation: pulse 1.2s ease-in-out infinite;
  border-color: var(--accent);
}

/* #6 document + #7 follow-up drawer sections (reuse .drawer-wbs shell). */
.drawer-doc-title { width: 100%; box-sizing: border-box; padding: 7px 10px; margin: 2px 0 8px; }
#drawer-followup .checkbox { display: block; margin: 8px 0 4px; }
#drawer-followup textarea:disabled { opacity: .55; }

.drawer-wbs-result { margin-top: 10px; }
.drawer-wbs-list { display: flex; flex-direction: column; gap: 10px; }
.drawer-wbs-list:empty { display: none; }

.wbs-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wbs-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wbs-row-num { font-weight: 700; color: var(--muted); font-size: .82rem; flex: none; }
.wbs-reorder { display: flex; gap: 2px; flex: none; }
.wbs-reorder button {
  width: 24px;
  height: 20px;
  padding: 0;
  line-height: 1;
  font-size: .7rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.wbs-reorder button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.wbs-reorder button:disabled { opacity: .35; cursor: default; }
.wbs-remove {
  margin-top: 0;
  margin-left: auto;
  padding: 2px 9px;
  color: var(--danger);
  border-color: var(--border);
  background: var(--surface);
}
.wbs-remove:hover { border-color: var(--danger); color: var(--danger); }

.wbs-row input[type="text"],
.wbs-row textarea {
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .88rem;
}
.wbs-row textarea { resize: vertical; line-height: 1.45; }
.wbs-row input:focus,
.wbs-row textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.wbs-title { font-weight: 600; }
.wbs-meta { display: flex; gap: 8px; }
.wbs-meta input { flex: 1; min-width: 0; }

.drawer-wbs-add { margin-top: 10px; }

.drawer-wbs-commit {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.drawer-wbs-commit label { margin: 0; }
.drawer-wbs-commit .drawer-wbs-target { width: auto; min-width: 110px; padding: 7px 10px; }
.drawer-wbs-commit .btn { margin-top: 0; }
#drawer-wbs-status.err,
#drawer-wbs-commit-status.err { color: var(--danger); }

.drawer-wbs-created {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--done-bd);
  background: var(--done-bg);
}
.drawer-wbs-created[hidden] { display: none; }
.wbs-created-head { font-weight: 700; color: var(--done-fg); font-size: .82rem; margin-bottom: 6px; }
.wbs-created-row { font-size: .85rem; padding: 3px 0; overflow-wrap: anywhere; }

/* --- #3 Batch reply panel (dashboard) -------------------------------------- */

.batch-panel {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-bar);
}
.batch-panel[hidden] { display: none; }
.batch-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.batch-panel-head h3 { margin: 0; font-size: 1rem; }
.batch-panel-head .btn { margin-top: 0; }

.batch-progress {
  margin: 10px 0 6px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .88rem;
  color: var(--text);
}
.batch-progress.running { border-color: var(--pill-running-bd); }
.batch-progress.ok { border-color: var(--pill-ok-bd); }
.batch-progress.warn { border-color: var(--pill-warn-bd); }
.batch-progress.err { border-color: var(--pill-err-bd); color: var(--danger); }
.batch-progress .bp-label { margin-bottom: 6px; }
.batch-progress .bp-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.batch-progress .bp-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width .3s ease;
}

.batch-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.batch-results:empty { display: none; }
.batch-result {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: .85rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
  overflow-wrap: anywhere;
}
.batch-result .br-icon { flex: none; font-weight: 700; }
.batch-result.ok { border-color: var(--done-bd); }
.batch-result.ok .br-icon { color: var(--done-fg); }
.batch-result.err { border-color: var(--pill-err-bd); }
.batch-result.err .br-icon { color: var(--danger); }