:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --ink: #1f2430;
  --muted: #6b7280;
  --line: #e5e7eb;
  --primary: #2563eb;
  --primary-ink: #ffffff;
  --warn-bg: #fef3c7;
  --warn-line: #f59e0b;
  --ok: #16a34a;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ── App shell: fixed sidebar + scrolling content ─────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: none; min-width: 0; }
.brand-logo { height: 26px; width: auto; display: block; flex: 0 0 auto; }
.brand-name { letter-spacing: .3px; white-space: nowrap; }

.sidebar {
  width: 250px; flex: 0 0 250px;
  background: #fff; border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  transition: width .16s ease, flex-basis .16s ease;
  z-index: 40;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 8px; }
.icon-btn { border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: #f1f3f6; color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; display: block; }

.side-nav { flex: 1 1 auto; overflow-y: auto; padding: 6px 12px; display: flex; flex-direction: column; gap: 14px; }
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #9aa1ac; font-weight: 700; padding: 6px 10px 3px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 8px;
  color: #414751; text-decoration: none; font-weight: 500; font-size: 14px;
  white-space: nowrap;
}
.nav-item:hover { background: #f1f3f6; color: var(--ink); }
.nav-item.active { background: #eaf1fe; color: var(--primary); font-weight: 600; }
.nav-item.active .nav-ico { color: var(--primary); }
.nav-ico { display: inline-flex; flex: 0 0 20px; color: #6b7280; }
.nav-ico svg { width: 20px; height: 20px; display: block; }
.nav-txt { overflow: hidden; text-overflow: ellipsis; }

.sidebar-foot { border-top: 1px solid var(--line); padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.user-bar { position: relative; }
.user-btn { width: 100%; display: flex; align-items: center; gap: 10px; background: transparent; border: none; cursor: pointer; padding: 7px 8px; border-radius: 8px; text-align: left; }
.user-btn:hover { background: #f1f3f6; }
.avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; }
.user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.user-name { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { font-size: 11.5px; color: var(--muted); }
.user-caret { color: var(--muted); display: inline-flex; flex: 0 0 auto; }
.user-caret svg { width: 16px; height: 16px; }
.user-menu { position: absolute; bottom: calc(100% + 6px); left: 6px; right: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 6px; z-index: 50; }
.user-menu[hidden] { display: none; }
.user-menu-email { font-size: 12px; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-item { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 7px; color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.user-menu-item:hover { background: #f1f3f6; }
.user-menu-item.danger { color: #dc2626; }
.user-menu-item svg { width: 16px; height: 16px; flex: 0 0 16px; }

.content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.container { max-width: 980px; width: 100%; margin: 28px auto; padding: 0 24px; }

.topbar-mobile { display: none; }
.brand-sm { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; }
.drawer-backdrop { display: none; }

/* Collapsed icon rail (desktop) */
.app-shell.rail .sidebar { width: 66px; flex-basis: 66px; }
.app-shell.rail .brand-name,
.app-shell.rail .nav-txt,
.app-shell.rail .nav-label,
.app-shell.rail .user-meta,
.app-shell.rail .user-caret { display: none; }
.app-shell.rail .brand { display: none; }
.app-shell.rail .sidebar-head { justify-content: center; padding: 14px 8px 8px; }
.app-shell.rail .side-nav { padding: 6px 8px; }
.app-shell.rail .nav-item { justify-content: center; padding: 9px; }
.app-shell.rail .sidebar-foot { padding: 8px; }
.app-shell.rail .user-btn { justify-content: center; padding: 7px; }
.app-shell.rail .user-menu { left: auto; right: 6px; width: 210px; }

/* Mobile: sidebar becomes an off-canvas drawer */
@media (max-width: 860px) {
  .sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 44px rgba(0,0,0,.18); }
  .app-shell.drawer-open .sidebar { transform: translateX(0); }
  .app-shell.rail .sidebar { width: 250px; flex-basis: 250px; }
  .rail-toggle { display: none; }
  .topbar-mobile { display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 52px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
  .drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 35; }
  .app-shell.drawer-open .drawer-backdrop { display: block; }
  .container { margin: 20px auto; padding: 0 16px; }
}

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.page-head h1 { font-size: 22px; margin: 0 0 4px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.strong, .strong { font-weight: 600; }

.btn { border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 7px 14px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px; text-decoration: none; display: inline-block; }
.btn:hover { border-color: #cbd2dc; }
.btn-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn-primary:hover { background: #1d4fd0; }
.btn-ghost { background: transparent; }

/* ── Sign-in page ─────────────────────────────────────────────────────────── */
.auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, #eaf1fe 0%, var(--bg) 55%); }
.auth-card { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 12px 40px rgba(20,30,60,.10); padding: 36px 32px;
  display: flex; flex-direction: column; align-items: center; text-align: center; }
.auth-logo { height: 42px; margin-bottom: 20px; }
.auth-title { font-size: 20px; margin: 0 0 6px; }
.auth-sub { color: var(--muted); margin: 0 0 22px; font-size: 14px; }
.auth-providers { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.provider-btn { display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: none; transition: border-color .12s, background .12s; }
.provider-btn:hover { border-color: #cbd2dc; background: #fafbfc; }
.provider-ico { width: 20px; height: 20px; flex: 0 0 20px; }
.auth-foot { color: var(--muted); font-size: 12.5px; margin: 22px 0 0; }
.legal { max-width: 720px; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 36px 40px; margin: 40px auto; }
.legal-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); text-decoration: none; margin-bottom: 20px; }
.legal h1 { font-size: 24px; margin: 0 0 8px; }
.legal h2 { font-size: 16px; margin: 24px 0 8px; }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal li { margin: 6px 0; }
/* Connect-a-mailbox dropdown */
.connect-menu { position: relative; display: inline-block; }
.connect-dropdown { position: absolute; right: 0; top: calc(100% + 6px); background: #fff;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14);
  padding: 6px; z-index: 20; min-width: 220px; }
.connect-dropdown[hidden] { display: none; }
.connect-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px;
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.connect-opt:hover { background: #f1f3f6; }
.badge-google { background: #fce8e6; color: #c5221f; }
.badge-ms { background: #e8f0fe; color: #1a56c4; }

/* Live sync status widget */
.sync-widget { background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.sync-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sync-title { font-weight: 600; font-size: 14px; color: var(--muted); }
.sync-title.running { color: var(--primary); }
.sync-meta { font-size: 13px; color: var(--muted); }
.sync-bar { margin-top: 10px; height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.sync-bar-fill { height: 100%; width: 35%; border-radius: 999px; background: var(--primary);
  animation: sync-indeterminate 1.3s ease-in-out infinite; }
@keyframes sync-indeterminate {
  0% { margin-left: -35%; } 100% { margin-left: 100%; }
}
.sync-counts { margin-top: 8px; }

/* Executive overview */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); }
.kpi-warn { border-color: var(--warn-line); background: var(--warn-bg); }
.kpi-num { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.kpi-label { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.kpi-sub { margin-top: 2px; }
.exec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.hbar-row { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 10px; margin: 8px 0; }
.hbar-label { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 12px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.hbar-fill { height: 100%; background: var(--primary); border-radius: 999px; min-width: 2px; }
.hbar-fill.prio-4 { background: #dc2626; } .hbar-fill.prio-3 { background: #ea580c; }
.hbar-fill.prio-2 { background: #2563eb; } .hbar-fill.prio-1 { background: #94a3b8; }
.hbar-val { font-size: 13px; font-weight: 600; text-align: right; color: var(--ink); }
.bar-chart { display: flex; align-items: flex-end; gap: 16px; height: 170px; padding-top: 10px; }
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; gap: 6px; }
.bar { width: 60%; max-width: 54px; min-height: 3px; background: var(--primary); border-radius: 6px 6px 0 0; }
.bar-lbl { white-space: nowrap; }

.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.text-input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 14.5px; color: var(--ink); background: #fff; }
.text-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.flashes { margin-bottom: 16px; display: grid; gap: 8px; }
.flash { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.flash-success { border-color: #86efac; background: #f0fdf4; }
.flash-error { border-color: #fca5a5; background: #fef2f2; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 14px; }
.card-title { font-size: 15px; margin: 0 0 12px; }

/* Settings page */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 0; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; word-break: break-word; }
.settings-links { display: flex; flex-direction: column; gap: 8px; }
.settings-link { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); }
.settings-link:hover { border-color: #cbd2dc; background: #fafbfc; }
.card.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.card.empty { text-align: center; color: var(--muted); }

table.grid { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.grid th, .grid td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #fafbfc; }
.grid tr:last-child td { border-bottom: none; }
.actions { display: flex; gap: 8px; }
.actions form { margin: 0; }

.filters, .reply-actions { display: flex; gap: 8px; align-items: center; }
.chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; }
.chip-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.task { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; }
.task-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.task-head h3 { margin: 0; font-size: 16px; }
.summary { margin: 8px 0; color: #374151; }
.meta { display: flex; gap: 14px; flex-wrap: wrap; }
.task-actions { display: flex; flex-direction: column; gap: 8px; }
.task-actions form { margin: 0; }

.badge { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #eef2f7; color: #475569; }
.badge-prio-4 { background: #fee2e2; color: #b91c1c; }
.badge-prio-3 { background: #ffedd5; color: #c2410c; }
.badge-prio-2 { background: #e0e7ff; color: #4338ca; }
.badge-prio-1 { background: #e5e7eb; color: #4b5563; }
.task.prio-4 { border-left: 4px solid #ef4444; }
.task.prio-3 { border-left: 4px solid #f97316; }

.task-thread { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; }
.conv-block { border: 1px solid var(--line); border-radius: 8px; margin: 6px 0; overflow: hidden; }
.conv-line { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; background: #f8fafc; flex-wrap: wrap; }
.conv-line:hover { background: #f1f5f9; }
.conv-subj { font-weight: 600; }
.conv-emails { padding: 4px 10px 8px; }
.ungroup-form { margin: 0 0 0 auto; }
.link-btn { background: none; border: none; color: var(--primary); cursor: pointer; font: inherit; font-size: 12.5px; padding: 0; text-decoration: underline; }
.merge-box { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.merge-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.merge-row select { flex: 1; min-width: 220px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; background: #fff; }
.reply-box { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 4px; }
.reply-box textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: inherit; resize: vertical; }
.reply-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.reply-btns { display: flex; flex-wrap: wrap; gap: 8px; }
code { background: #eef1f5; padding: 1px 5px; border-radius: 4px; font-size: 13px; }

.dv-status { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dv-status.ok { background: #f0fdf4; border-color: #86efac; }
.dv-status form { margin: 0; }

.device { max-width: 560px; margin: 10px auto; }
.device h1 { font-size: 20px; margin: 0 0 4px; }
.device-steps { line-height: 2; padding-left: 20px; }
.device-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 30px;
  font-weight: 700; letter-spacing: 3px; background: #0f172a; color: #fff;
  display: inline-block; padding: 8px 18px; border-radius: 10px; margin: 6px 0; }
.device form { display: flex; gap: 8px; align-items: center; margin-top: 12px; }

/* Sync status page */
.sync-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sync-phase { font-size: 17px; font-weight: 600; flex: 1; }
.badge-ok { background: #dcfce7; color: #15803d; }
.spinner { width: 18px; height: 18px; border: 3px solid #cbd5e1; border-top-color: var(--primary);
  border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; }
.count { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; }
.count .num { display: block; font-size: 22px; font-weight: 700; }
.count .lbl { font-size: 12px; color: var(--muted); }
.count.err .num { color: #b91c1c; }

.banner { margin-top: 14px; padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.banner-ok { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.banner-error { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }

.logwrap { margin-top: 16px; }
.logbar { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px; font-weight: 600; }
.logbox { background: #0f172a; color: #cbd5e1; border-radius: 10px; padding: 12px 14px;
  height: 320px; overflow-y: auto; font: 12.5px/1.6 ui-monospace, "SF Mono", Menlo, monospace; margin: 0; }
.logline { white-space: pre-wrap; word-break: break-word; }
.logline.lv-phase { color: #93c5fd; font-weight: 700; margin-top: 4px; }
.logline.lv-success { color: #86efac; }
.logline.lv-error { color: #fca5a5; }
.logline.lv-warn { color: #fde68a; }
.sync-actions { display: flex; gap: 8px; margin-top: 16px; }

/* Dashboard client grouping */
.clientbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -6px 0 18px; }
/* Activity-feed filters: a pinned label + a chip strip per row, so the status
   filters and the client filters stay on separate, clearly labelled lines instead
   of running together. On mobile each strip scrolls sideways (see media query). */
.feed-filters { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.ff-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ff-label { flex: 0 0 auto; width: 52px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ff-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; flex: 1 1 auto; }
.ff-chips .chip { flex: 0 0 auto; white-space: nowrap; }
.client-group { margin-bottom: 22px; }
.client-head { display: flex; align-items: baseline; gap: 10px; padding: 4px 2px 10px;
  border-bottom: 2px solid var(--line); margin-bottom: 12px; }
.client-name { font-size: 16px; font-weight: 700; }
.badge-wait { background: #fef9c3; color: #854d0e; }

/* Bulk task actions */
.bulk-bar { position: sticky; top: 56px; z-index: 5; display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px;
  margin-bottom: 14px; box-shadow: var(--shadow); }
.bulk-bar.active { border-color: var(--primary); }
.bulk-selall { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
.bulk-actions { margin-left: auto; display: flex; gap: 8px; }
.task-check { width: 16px; height: 16px; cursor: pointer; flex: none; accent-color: var(--primary); }

.fromdate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.fromdate input[type="date"] { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font: inherit; }
.fromdate .muted { flex-basis: 100%; }

/* Projects / topics */
.section-title { font-size: 15px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 22px 0 10px; }
.section-title.inline-title { display: inline; margin: 0; }
.other-projects > summary { cursor: pointer; list-style: none; margin: 22px 0 4px; }
.other-projects > summary::-webkit-details-marker { display: none; }
.other-projects > summary::before { content: "▸ "; color: var(--muted); }
.other-projects[open] > summary::before { content: "▾ "; }

.proj-manage { padding: 0; }
.proj-manage > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; }
.proj-manage > summary::-webkit-details-marker { display: none; }
.proj-manage[open] > summary { border-bottom: 1px solid var(--line); }
.proj-add { display: flex; gap: 8px; padding: 14px 18px; }
.proj-add input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; }
.proj-table { width: 100%; border-collapse: collapse; }
.proj-table th, .proj-table td { text-align: left; padding: 8px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.proj-table th { font-size: 12px; text-transform: uppercase; color: var(--muted); }
.inline { display: flex; gap: 6px; align-items: center; margin: 0; }
.inline input { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font: inherit; }

.assign-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.assign, .assign-new { margin: 0; }
.assign select { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font: inherit; background: #fff; }
.assign-new input { border: 1px dashed var(--line); border-radius: 7px; padding: 5px 8px; font: inherit; width: 140px; }

/* Mail & conversations */
.search-box { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; margin: 4px 0 16px; box-shadow: var(--shadow); }
.search-box:focus { outline: none; border-color: var(--primary); }
.conv { padding: 0; overflow: hidden; }
.conv-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.conv-head:hover { background: #fafbfc; }
.conv-caret { color: var(--muted); width: 12px; flex: none; }
.conv-main { flex: 1; min-width: 0; }
.conv-subject { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.conv-task { flex: none; }
.badge-task { background: #dcfce7; color: #15803d; text-decoration: none; }
.badge-status-2 { background: #fef9c3; color: #854d0e; }
.badge-status-3 { background: #e5e7eb; color: #4b5563; }
.badge-status-4 { background: #f3f4f6; color: #9ca3af; }
.badge-none { background: #f1f5f9; color: #94a3b8; }
.conv-body { border-top: 1px solid var(--line); padding: 12px 16px; background: #fcfcfd; }
.conv-tasklink { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.msg { border-left: 3px solid var(--line); padding: 6px 12px; margin: 8px 0; }
.msg-incoming { border-left-color: #60a5fa; }
.msg-outgoing { border-left-color: #cbd5e1; }
.msg-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msg-dir { font-weight: 700; font-size: 11px; color: var(--muted); }
.msg-date { margin-left: auto; }
.msg-subject { font-weight: 600; margin: 2px 0; }
.msg-preview { color: #374151; font-size: 13.5px; white-space: pre-wrap; }
.msg-body { color: #374151; font-size: 13.5px; white-space: pre-wrap; word-break: break-word;
  max-height: 360px; overflow-y: auto; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; margin-top: 4px; }

/* ── Phase 2: AI grouping suggestions panel ─────────────────────────────── */
.suggest-panel { border-left: 4px solid var(--primary); background: #f8faff; }
.suggest-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.suggest-title { font-weight: 700; font-size: 15px; }
.suggest-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap;
}
.suggest-body { flex: 1 1 320px; min-width: 0; }
.suggest-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.suggest-new { font-weight: 600; }
.suggest-arrow { color: var(--muted); font-weight: 700; }
.suggest-target { color: var(--primary); font-weight: 600; }
.suggest-reason { margin-top: 3px; }
.suggest-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.suggest-actions select { max-width: 240px; }
.badge-conf { text-transform: capitalize; }
.badge-conf-high { background: #dcfce7; color: #15803d; }
.badge-conf-medium { background: #fef9c3; color: #854d0e; }
.badge-conf-low { background: #e5e7eb; color: #4b5563; }

/* ── Dashboard two-column layout: project sidebar + main ─────────────────── */
.dash-layout { display: flex; gap: 22px; align-items: flex-start; }
.dash-side {
  width: 232px; flex: 0 0 232px; position: sticky; top: 72px;
  align-self: flex-start; max-height: calc(100vh - 90px); overflow-y: auto;
}
.dash-main { flex: 1 1 auto; min-width: 0; }
.side-head { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin: 0 0 8px 4px; }
.proj-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.proj-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--ink);
  font-size: 14px; border: 1px solid transparent;
}
.proj-link:hover { background: #eef2f7; }
.proj-link-active { background: #e0e7ff; border-color: #c7d2fe; color: #3730a3; font-weight: 600; }
.proj-link > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-count { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.proj-link-active .proj-count { background: #fff; color: #3730a3; border-color: #c7d2fe; }
/* Split counts: 🟠 = tasks for you (Needs you), 🔵 = tasks for others (Waiting). */
.pc-seg { display: inline-flex; align-items: center; gap: 3px; line-height: 1; }
.pc-mine::before { content: "🟠"; font-size: 8px; }
.pc-others::before { content: "🔵"; font-size: 8px; }
.pc-others { color: #94a3b8; }
.proj-link-active .pc-others { color: #6366f1; }
.side-create { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.side-create input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; }
.side-manage > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px; }
.side-manage .proj-table { width: 100%; font-size: 12px; margin-top: 8px; }
.side-manage .proj-table input { width: 100%; padding: 3px 5px; }
.side-manage .proj-table td { padding: 3px 2px; vertical-align: middle; }
.side-manage .inline { display: flex; gap: 3px; align-items: center; }
@media (max-width: 760px) {
  .dash-layout { flex-direction: column; }
  .dash-side { position: static; width: 100%; flex-basis: auto; max-height: none; }
  .proj-nav { flex-direction: row; flex-wrap: wrap; }
}

/* ── Horizontal project bar (replaces the old left project column) ────────── */
/* Sticky one-row strip of project chips; the task board keeps the full width. */
.projbar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
  background: var(--bg); padding: 10px 0; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.projbar::-webkit-scrollbar { height: 6px; }
.projbar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.pjchip {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); text-decoration: none;
  font-size: 13px; white-space: nowrap;
}
.pjchip:hover { background: #eef2f7; }
.pjchip-active { background: #e0e7ff; border-color: #c7d2fe; color: #3730a3; font-weight: 600; }
.pjchip-active .proj-count { background: #fff; color: #3730a3; border-color: #c7d2fe; }
.pjchip-add { cursor: pointer; color: var(--muted); border-style: dashed; font: inherit; font-size: 13px; }
.pjchip-add:hover { color: var(--primary); border-color: var(--primary); background: #eff6ff; }
.projbar-create { display: none; gap: 8px; align-items: center; flex-wrap: wrap; margin: -6px 0 16px; }
.projbar-create input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; min-width: 220px; }

/* ── AJAX interactivity: toast, busy, fade-out ───────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: #1f2937; color: #fff; padding: 10px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 500; box-shadow: 0 6px 24px rgba(0,0,0,.22);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 2000;
  max-width: 80vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-error { background: #b91c1c; }
.toast-ok { background: #15803d; }
.task.busy, .suggest-row.busy { opacity: .55; pointer-events: none; }
.task.removing, .suggest-row.removing, .client-group.removing {
  opacity: 0; transform: translateX(8px); max-height: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.task, .suggest-row { transition: opacity .2s ease, transform .2s ease; }

/* ── Prompts / summarization config page ─────────────────────────────────── */
.reprocess-card { background: #f8faff; border-left: 4px solid var(--primary); }
.reproc-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.reproc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.prompt-card { scroll-margin-top: 70px; }
.prompt-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.prompt-label { font-weight: 700; font-size: 15px; }
.prompt-scenario { margin: 6px 0 10px; }
.badge-custom { background: #ede9fe; color: #6d28d9; }
.prompt-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 12px;
  font: 12.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace; resize: vertical; background: #fff;
}
.prompt-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.schema-block { margin: 10px 0; }
.schema-pre {
  background: #0f172a; color: #cbd5e1; border-radius: 8px; padding: 12px 14px; overflow-x: auto;
  font: 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; word-break: break-word;
}

/* Connections page header actions */
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Manage projects — compact per-project rows (narrow sidebar) */
.pm-row { border-top: 1px solid var(--line); padding: 8px 0; }
.pm-row:first-of-type { border-top: none; }

/* Projects management card (moved from the dashboard sidebar to Settings) */
.projects-card { scroll-margin-top: 70px; margin-top: 16px; }
.proj-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 14px; }
.proj-add-row input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; flex: 1 1 220px; min-width: 0; }
@media (max-width: 560px) {
  .proj-add-row > * { flex: 1 1 100%; max-width: 100% !important; }
}
.pm-list { max-width: 760px; }
.projects-card .pm-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.projects-card .pm-rename { flex: 1 1 340px; max-width: 440px; }
.projects-card .pm-actions { margin-top: 0; }
@media (max-width: 640px) {
  .projects-card .pm-row { flex-wrap: wrap; }
}
.projects-card .pm-actions select, .proj-add-row select,
.projects-needclient select {
  font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; max-width: 200px;
}
.projects-needclient { border: 1px solid var(--warn-line); background: var(--warn-bg); }
.projects-needclient .pm-row { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border-top: 1px solid #fde68a; padding: 8px 0; }
.projects-needclient .pm-row:first-of-type { border-top: none; }

/* Executive: projects-by-client KPI table */
.cpk-client { border-top: 1px solid var(--line); padding: 12px 0; }
.cpk-client:first-of-type { border-top: none; padding-top: 4px; }
.cpk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.cpk-name { font-weight: 600; }
.cpk-over { color: #b91c1c; font-weight: 600; }
.cpk-scroll { overflow-x: auto; }
.cpk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cpk-table th { text-align: right; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 2px 10px; white-space: nowrap; }
.cpk-table th:first-child { text-align: left; }
.cpk-table td { text-align: right; padding: 4px 10px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cpk-table td.cpk-proj { text-align: left; white-space: normal; }
.pm-rename { display: flex; gap: 4px; align-items: center; }
.pm-rename input { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.pm-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 5px; }
.pm-actions .inline { display: flex; gap: 3px; align-items: center; }
.pm-actions .btn.small, .pm-arch-row .btn.small { padding: 3px 7px; }
.pm-disabled { opacity: .35; cursor: not-allowed; }
.pm-archived { margin-top: 10px; }
.pm-archived > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.pm-arch-row { display: flex; gap: 6px; align-items: center; padding: 4px 0; }
.pm-arch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

/* ── Two-lane action board (Variant A) ───────────────────────────────────── */
/* Dashboard fills the whole screen (minus the sidebar), not a narrow column. */
.container.dash-wide { max-width: none; }

/* Redesigned dashboard toolbar: title + New task on top, filters below. */
.dash-toolbar { margin-bottom: 16px; }
.dt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dt-top h1 { font-size: 22px; margin: 0; }
.dt-new { flex: none; white-space: nowrap; }
.dt-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.chip-group { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.proj-block { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 12px 14px; margin-bottom: 14px; box-shadow: var(--shadow); }
.pb-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.pb-name { font-weight: 600; font-size: 15px; }
.pb-counts { white-space: nowrap; }

.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lane { min-width: 0; }
.lane-wait { border-left: 1px solid var(--line); padding-left: 14px; }
.lane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lane-title { font-size: 12.5px; font-weight: 600; }
.lane-title-mine { color: #b45309; }
.lane-title-wait { color: #1d4ed8; }
.lane-count { font-size: 11px; color: var(--muted); background: #f1f5f9; border-radius: 999px; padding: 0 7px; }
.lane-cards { display: flex; flex-direction: column; gap: 8px; }
.lane-cards.single { max-width: 620px; }
.lane-empty { padding: 6px 2px; }
.lane-done { margin-top: 12px; }
.lane-done > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; }

.tcard { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 9px 11px; transition: opacity .2s, transform .2s; }
.tcard.prio-4 { border-left: 3px solid #ef4444; }
.tcard.prio-3 { border-left: 3px solid #f97316; }
.tcard.busy { opacity: .55; pointer-events: none; }
.tcard.removing { opacity: 0; transform: translateX(8px); }
.tcard-top { display: flex; align-items: center; gap: 8px; }
.prio-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #cbd5e1; }
.pd-4 { background: #ef4444; } .pd-3 { background: #f97316; } .pd-2 { background: #3b82f6; } .pd-1 { background: #cbd5e1; }
.tcard-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; cursor: pointer; line-height: 1.35; }
.tcard-title:hover { color: var(--primary); }
.tcard-quick { margin: 0; }
.icon-btn { border: 1px solid var(--line); background: #fff; color: #16a34a; border-radius: 6px; width: 24px; height: 24px; line-height: 1; cursor: pointer; font-size: 13px; padding: 0; }
.icon-btn:hover { background: #f0fdf4; border-color: #86efac; }
.edit-name { color: #64748b; }
.edit-name:hover { background: #eff6ff; border-color: #93c5fd; color: var(--primary); }
.pin { font-size: 12px; }
.rename-box { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; padding-left: 16px; }
.rename-input { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--primary); border-radius: 6px; font: inherit; font-size: 14px; }

/* Task type chip + source filter (Phase B: manual tasks) */
.type-chip { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 20px; border: 1px solid var(--line); }
.tc-email { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.tc-manual { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.tc-planner { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.filter-sep { width: 1px; height: 18px; background: var(--line); display: inline-block; margin: 0 4px; }
.source-chip { cursor: pointer; }
.source-chip.source-active { background: var(--ink); color: #fff; border-color: var(--ink); }
#groups.only-email .tcard:not([data-source="email"]) { display: none; }
#groups.only-manual .tcard:not([data-source="manual"]) { display: none; }
#groups.only-planner .tcard:not([data-source="planner"]) { display: none; }

/* Quick text filter: hide non-matching cards and any project block emptied by the search. */
.tcard.tf-hide { display: none !important; }
.proj-block.tf-block-hide { display: none !important; }

/* Keyword search box — its own row under the filter chips, roomy on desktop and mobile. */
.dt-search { position: relative; margin-top: 10px; max-width: 440px; }
.dt-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--muted); pointer-events: none; }
.dt-search-input { width: 100%; box-sizing: border-box; padding: 9px 34px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; }
.dt-search-input::placeholder { color: var(--muted); }
.dt-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.dt-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dt-search-x { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dt-search-x:hover { background: #f1f3f6; color: var(--ink); }

/* New-task panel */
.newtask-panel { margin-bottom: 16px; border: 1px solid var(--primary); }
.newtask-form { display: flex; flex-direction: column; gap: 10px; }
.nt-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.nt-row label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.nt-row input, .nt-row select, .nt-row textarea { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.nt-title { width: 100%; font-size: 15px !important; }
.nt-title-row { display: block; }
.nt-notes { width: 100%; resize: vertical; }
.nt-client { min-width: 200px; }
.nt-actions { margin-top: 2px; }

/* Manual task inline details editor */
.details-box { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 2px; padding: 10px; background: #faf9ff; border: 1px solid #e9e5ff; border-radius: 8px; }
.details-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.details-box label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.details-box input, .details-box select, .details-box textarea { font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; }
.details-notes { width: 100%; }
.details-notes textarea { width: 100%; resize: vertical; }

/* Phase C: cross-channel activity log */
.act-badge { font-size: 11px; font-weight: 600; color: #6d28d9; background: #f5f3ff; border: 1px solid #ddd6fe; padding: 1px 6px; border-radius: 20px; }
.activity { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.activity-head { font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.activity-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.act-item { display: flex; align-items: baseline; gap: 8px; font-size: 13px; padding: 3px 6px; border-radius: 6px; background: #faf9ff; }
.act-icon { flex: none; }
.act-date { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.act-note { flex: 1; min-width: 0; color: #374151; }
.act-del { margin: 0; }
.icon-x { border: none; background: none; color: #9ca3af; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.icon-x:hover { color: #ef4444; }
.act-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.act-add select, .act-add input[type="date"] { font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; }
.act-add input[name="note"] { flex: 1; min-width: 160px; font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; }

/* Calendar triage panel */
.cal-panel .suggest-title { color: #6d28d9; }
.cal-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cal-actions select { font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; max-width: 200px; }
.badge-ext { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 20px; }

/* Calendar-consent reminder banner */
.cal-banner { display: flex; align-items: center; gap: 12px; background: #fffbeb; border: 1px solid #fcd34d; margin-bottom: 16px; }
.cal-banner-icon { font-size: 22px; flex: none; }
.cal-banner-body { flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; }
.cal-banner-conn { display: inline-block; background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; font-weight: 600; font-size: 12.5px; padding: 1px 8px; border-radius: 20px; margin: 0 2px; }

/* Reply modal (Outlook-style popup with full recipient info) */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; z-index: 100; padding: 40px 16px; overflow-y: auto; }
.modal { background: #fff; border-radius: 12px; box-shadow: 0 12px 44px rgba(0,0,0,.28); width: 100%; max-width: 660px; }
.reply-modal { display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-title { font-weight: 700; font-size: 16px; }
.modal-x { border: none; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }
.modal-x:hover { color: var(--ink); }
.reply-modal-form { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.rm-field { display: flex; gap: 10px; align-items: baseline; }
.rm-label { flex: none; width: 58px; color: var(--muted); font-size: 13px; font-weight: 600; }
.rm-val { font-size: 14px; min-width: 0; word-break: break-word; }
.rm-recip { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.rm-recip-edit { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.recip-chip { display: inline-flex; align-items: center; gap: 4px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; border-radius: 20px; padding: 2px 6px 2px 10px; font-size: 13px; }
.chip-x { border: none; background: none; color: #60a5fa; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.chip-x:hover { color: #1d4ed8; }
.rm-add { flex: 1; min-width: 120px; border: none; outline: none; font: inherit; font-size: 13px; padding: 3px 2px; background: none; }
.rm-me { flex: none; padding: 3px 8px; }
.rm-warn { color: #b91c1c; font-size: 13px; }
.reply-modal-form textarea { width: 100%; font: inherit; font-size: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.rm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 5px 6px; border: 1px solid var(--line); border-bottom: none; border-radius: 8px 8px 0 0; background: #f9fafb; }
.rm-toolbar button { border: 1px solid transparent; background: none; border-radius: 5px; padding: 3px 8px; font-size: 13px; cursor: pointer; color: #374151; min-width: 28px; }
.rm-toolbar button:hover { background: #fff; border-color: var(--line); }
.rm-tb-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
.rm-editor { min-height: 150px; max-height: 320px; overflow-y: auto; font: inherit; font-size: 14px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.rm-editor:focus { outline: none; border-color: var(--primary); }
.rm-editor:empty::before { content: attr(data-placeholder); color: var(--muted); }
.rm-note { margin-top: -2px; }
.modal-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.rm-history { border: 1px solid var(--line); border-radius: 8px; }
.rm-history-head { cursor: pointer; padding: 8px 12px; font-size: 13px; font-weight: 600; color: #374151; background: #f9fafb; border-radius: 8px 8px 0 0; user-select: none; }
.rm-history-body { max-height: 320px; overflow-y: auto; padding: 8px 12px; }
.thread-modal { max-width: 860px; display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.thread-modal-body { padding: 14px 18px; overflow-y: auto; }

/* Task detail modal */
.reply-btn { color: var(--primary); }
.reply-btn:hover { background: #eff6ff; border-color: #93c5fd; }
#taskModal { z-index: 90; padding: 24px 18px; }   /* sits below reply/thread modals opened from it */
.task-modal { max-width: none; width: min(1200px, 96vw); height: calc(100vh - 48px);
  display: flex; flex-direction: column; }
.task-modal-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.td-thread-wrap { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.td-thread { margin-top: 6px; }
.td-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.td-chip { font-size: 12px; background: #f3f4f6; border: 1px solid var(--line); color: #374151; padding: 2px 9px; border-radius: 20px; }
.td-summary { font-size: 14.5px; line-height: 1.6; color: var(--ink); background: #f9fafb; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; white-space: pre-wrap; }
.td-line { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.td-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.td-fields { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.td-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-label { font-size: 12px; font-weight: 600; color: var(--muted); min-width: 54px; }
.td-scope-hint { flex-basis: 100%; margin-top: 2px; }
.tcard-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; padding-left: 16px; cursor: pointer; }
.wait-age { color: #64748b; }
.wait-stale { color: #b91c1c; font-weight: 600; }
.tcard-body { border-top: 1px dashed var(--line); margin-top: 9px; padding-top: 9px; }
.tcard-body .summary { margin: 0 0 8px; font-size: 13.5px; color: #374151; }
.tcard-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

html.dense .tcard { padding: 6px 9px; }
html.dense .tcard-title { font-size: 13px; }
html.dense .lane-cards { gap: 6px; }
html.dense .proj-block { padding: 9px 11px; margin-bottom: 10px; }
html.dense .tcard-meta { margin-top: 3px; }

/* ── Mobile: task-detail modal → full-screen, thumb-friendly sheet ──────────── */
@media (max-width: 720px) {
  /* Full-screen sheet: the overlay itself never scrolls (overflow hidden) — only the
     modal BODY scrolls, so there's one clean scroll surface that fits the viewport. */
  #taskModal, #threadModal, #replyModal { padding: 0; align-items: stretch; overflow: hidden; }
  .task-modal, .thread-modal, .reply-modal {
    width: 100vw; max-width: none; max-height: none; border-radius: 0;
    height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
  .task-modal .modal-head, .thread-modal .modal-head, .reply-modal .modal-head { flex: 0 0 auto; }
  .task-modal-body, .thread-modal-body, .reply-modal-form {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* Long unbroken strings (URLs, message bodies) must wrap, never force sideways scroll. */
  .task-modal .td-summary, .task-modal .msg-body, .task-modal .msg-subject,
  .task-modal .conv-subj, .task-modal .feed-subject { overflow-wrap: anywhere; word-break: break-word; }

  /* Header pins to the top so the title + close stay reachable while scrolling. */
  .task-modal .modal-head { position: sticky; top: 0; z-index: 2; background: #fff;
    padding: 12px 14px; }
  .task-modal .modal-title { font-size: 15px; line-height: 1.35; }
  .task-modal .modal-x { font-size: 30px; padding: 0 6px; }
  .task-modal-body { padding: 14px 14px calc(28px + env(safe-area-inset-bottom)); }

  /* Roomier summary + meta so it reads well on a small screen. */
  .task-modal .td-summary { font-size: 15px; }
  .task-modal .td-chip { font-size: 12.5px; padding: 3px 10px; }

  /* Primary actions: a 2-up grid of full-width, tall (≈44px) tap targets. */
  .task-modal .td-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-bottom: 16px; }
  .task-modal .td-actions form.inline { display: block; }
  .task-modal .td-actions .btn { display: block; width: 100%; padding: 12px 10px;
    font-size: 14.5px; text-align: center; }

  /* Project + details fields go full-width; 16px controls stop iOS zoom-on-focus. */
  .task-modal .td-field { flex-direction: column; align-items: stretch; gap: 6px; }
  .task-modal .assign, .task-modal .assign-new { width: 100%; }
  .task-modal .assign select,
  .task-modal .assign-new input { width: 100%; font-size: 16px; padding: 10px 12px; }
  .task-modal .details-grid { flex-direction: column; }
  .task-modal .details-box label { width: 100%; }
  .task-modal .details-box input,
  .task-modal .details-box select,
  .task-modal .details-box textarea { width: 100%; font-size: 16px; padding: 9px 11px; }
  .task-modal .details-box > .btn { width: 100%; padding: 12px; }

  /* Activity log: the add-entry row stacks so every control is a full-width target. */
  .task-modal .act-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .task-modal .act-add select,
  .task-modal .act-add input[type="date"] { width: 100%; font-size: 16px; padding: 9px 10px; }
  .task-modal .act-add input[name="note"] { grid-column: 1 / -1; min-width: 0;
    font-size: 16px; padding: 10px 12px; }
  .task-modal .act-add .btn { grid-column: 1 / -1; width: 100%; padding: 11px; }
  .task-modal .act-item { font-size: 13.5px; padding: 6px 8px; }

  /* Group-into picker + merge row full width. */
  .task-modal .merge-row { flex-direction: column; align-items: stretch; }
  .task-modal .merge-row select { width: 100%; min-width: 0; font-size: 16px; }
  .task-modal .merge-row .btn { width: 100%; }
}

@media (max-width: 720px) {
  .lanes { grid-template-columns: 1fr; }
  .lane-wait { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 10px; }

  /* ── Mobile: the task board becomes a scrollable feed (Facebook-style) ──── */
  /* Full-bleed: cards use the whole screen width, not a boxed column. */
  .container.dash-wide { padding: 0 8px; margin-top: 10px; }

  /* Toolbar shrinks; filter chips scroll sideways instead of stacking rows. */
  .dt-top h1 { font-size: 19px; }
  .dt-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px; }
  .dt-filters::-webkit-scrollbar { display: none; }
  .chip-group { flex-wrap: nowrap; }
  .chip { white-space: nowrap; }
  .filter-sep { flex: none; }

  /* Search box fills the width and gets a bigger tap target on the feed. */
  .dt-search { max-width: none; margin-top: 8px; }
  .dt-search-input { padding: 11px 36px; font-size: 16px; }  /* 16px avoids iOS zoom-on-focus */

  /* Client filter scrolls sideways too. */
  .clientbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
  .clientbar::-webkit-scrollbar { display: none; }
  .clientbar .chip, .clientbar .muted { white-space: nowrap; }

  /* Feed filters: pinned label, chips scroll sideways per row (no more piling up). */
  .feed-filters { gap: 8px; margin-bottom: 14px; }
  .ff-label { width: 46px; font-size: 10.5px; }
  .ff-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px; }
  .ff-chips::-webkit-scrollbar { display: none; }

  /* Project panels dissolve into one continuous stream; a light project label
     divides the sections (the sticky projbar above carries the live filter). */
  .proj-block { border: none; box-shadow: none; background: transparent;
    padding: 0; border-radius: 0; margin-bottom: 22px; }
  .pb-head { padding: 2px 2px 7px; margin: 0; border-bottom: 1px solid var(--line); }
  .pb-name { font-size: 15.5px; }

  /* The project filter bar sits just under the mobile top bar. */
  .projbar { top: 52px; }

  /* The bulk bar is a desktop grooming tool — on the feed, per-card ✓ leads,
     so let it scroll away instead of pinning to the top. */
  .bulk-bar { position: static; flex-wrap: wrap; gap: 8px 12px; }

  /* Feed cards: full-width, roomy, tappable, clearly separated. */
  .lane { margin-top: 4px; }
  .lane-cards { gap: 10px; }
  .tcard { padding: 14px; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
  .tcard-top { gap: 10px; }
  .tcard-title { font-size: 15.5px; line-height: 1.4; }
  .tcard-meta { padding-left: 0; margin-top: 9px; gap: 8px 12px; font-size: 12.5px; }

  /* Bigger touch targets for thumbs. */
  .task-check { width: 20px; height: 20px; }
  .icon-btn { width: 34px; height: 34px; font-size: 15px; }
  .dt-new { padding: 9px 16px; }
}

/* Reply box "to whom / which email" header */
.reply-to { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 3px; }
.rt-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rt-label { display: inline-block; min-width: 74px; color: var(--muted); font-size: 12px; }
.rt-subj { font-weight: 600; }
.rt-addr { font-weight: 600; color: var(--ink); }

/* Billing: customers & invoices */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select { font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; }
.form-actions { display: flex; gap: 8px; align-items: center; }
.grid.inv-lines { margin: 8px 0; }
.grid.inv-lines input { width: 100%; font: inherit; font-size: 13.5px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; }
.grid.inv-lines input.num, .grid.inv-lines td.num { text-align: right; }
.grid.inv-lines input.unit { text-align: center; }
.grid.inv-lines td.amount { font-variant-numeric: tabular-nums; color: var(--muted); }
.inv-head { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; margin-bottom: 10px; }
.inv-number { font-family: ui-monospace, monospace; font-size: 14px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; }
.inv-totals { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin: 12px 0; font-size: 14px; }
.inv-totals .grand { font-size: 16px; margin-top: 4px; }
.pick-form, .inv-form, .cust-form, .upload-form { }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Invoice calendar-hours breakdown */
.cal-hours { margin: 8px 0 4px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fafbfc; }
.cal-hours summary { cursor: pointer; }
.cal-list { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cal-list li { display: flex; align-items: baseline; gap: 8px; }
.cal-list label { display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
.cal-date { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.cal-h { margin-left: auto; color: #374151; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Customer revenue dashboard */
.rev-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.rev-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.rev-num { display: block; font-size: 22px; font-weight: 700; color: var(--ink); }
.rev-lbl { font-size: 12.5px; color: var(--muted); }
.rev-cell { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .rev-summary { grid-template-columns: 1fr; } }

/* Contract upload */
.contract-box { border: 1px dashed var(--primary); background: #f8faff; }
.contract-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* Statement of Work (SOW) */
.sow-section { margin-top: 8px; }
.sow-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sow-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fff; }
.sow-card.sow-current { border-color: #86efac; background: #f0fdf4; }
.sow-when { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sow-lines-view { margin: 6px 0; padding-left: 18px; font-size: 13.5px; }
.sow-form .inv-lines select { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; }

/* Compact icon action buttons (customer/invoice tables) */
.cust-actions { white-space: nowrap; }
.ibtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; font-size: 14px;
  color: var(--ink); text-decoration: none; padding: 0; }
.ibtn:hover { background: #f3f4f6; border-color: #cbd2dc; }
.ibtn-danger:hover { background: #fef2f2; border-color: #fca5a5; }

/* ── Invoices dashboard (KPIs + billing overview) ─────────────────────────── */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.kpi .kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.kpi .kpi-value { font-size: 24px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .kpi-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.kpi-accent { border-left: 4px solid var(--primary); }
.kpi-ok { border-left: 4px solid var(--ok); }
.kpi-warn { border-left: 4px solid var(--warn-line); }
.kpi-value.ok { color: var(--ok); }
.kpi-value.warn { color: #b45309; }

/* sent-vs-draft progress bar */
.sent-bar { height: 8px; border-radius: 999px; background: #fde68a; overflow: hidden; margin: 10px 0 6px; }
.sent-bar > span { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.sent-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); }
.sent-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; }
.dot-sent { background: var(--ok); }
.dot-draft { background: #f59e0b; }

/* search */
.inv-toolbar { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.inv-toolbar h2 { margin: 0; font-size: 18px; }
.inv-search { flex: 1; max-width: 340px; margin-left: auto; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: 14px; background: #fff; }
.inv-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* grouped-by-customer cards */
.inv-group { margin-bottom: 14px; }
.inv-group-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.inv-group-head h3 { margin: 0; font-size: 16px; }
.inv-group-head .grp-total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-group-head .grp-total small { font-weight: 500; color: var(--muted); }
.inv-meta-chips { display: flex; gap: 6px; }
.status-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.status-sent { background: #dcfce7; color: #15803d; }
.status-draft { background: #fef9c3; color: #854d0e; }
.grid td.amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid th.amt { text-align: right; }
.inv-empty-search { display: none; text-align: center; color: var(--muted); padding: 24px; }

/* year filter chips */
.inv-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* monthly / yearly income bar chart */
.bar-chart { display: flex; align-items: flex-end; gap: 6px; margin-top: 6px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.bar-val { font-size: 11px; color: var(--muted); margin-bottom: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-val.zero { color: #cbd2dc; }
.bar-track { height: 150px; width: 100%; max-width: 48px; display: flex; align-items: flex-end; }
.bar-stack { width: 100%; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 0 0;
  overflow: hidden; transition: height .3s ease; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.bar-seg { width: 100%; min-height: 1px; }
.bar-col:hover .bar-stack { filter: brightness(1.06); }
.bar-lbl { font-size: 11.5px; color: var(--muted); margin-top: 7px; font-weight: 600; }
.bar-col.cur .bar-lbl { color: var(--ok); }
.bar-col.cur .bar-track { box-shadow: inset 0 -2px 0 var(--ok); }

/* stacked-chart legend */
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.leg-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); }
.leg-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }

/* Per-conversation reply button inside a grouped thread */
.conv-reply { margin-left: 8px; color: var(--primary); font-weight: 600; }
.conv-reply:hover { text-decoration: underline; }

/* Planner checklist — name count badge + detail list */
.cl-count { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: #eef2f7; color: #475569; white-space: nowrap; vertical-align: middle; }
.cl-count.cl-done { background: #dcfce7; color: #15803d; }
.td-checklist { margin: 12px 0; }
.td-checklist-head { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
ul.checklist { list-style: none; margin: 0; padding: 0; }
ul.checklist li { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0;
  font-size: 13.5px; border-bottom: 1px solid var(--line); }
ul.checklist li:last-child { border-bottom: none; }
ul.checklist .cl-box { flex: none; line-height: 1.3; }
ul.checklist li.cl-checked .cl-text { text-decoration: line-through; color: var(--muted); }
ul.checklist li.cl-checked .cl-box { color: var(--ok); }

/* per-customer revenue share bar */
.share { display: inline-block; width: 84px; height: 7px; background: #eef2f7; border-radius: 999px; overflow: hidden; vertical-align: middle; margin-right: 8px; }
.share-fill { height: 100%; background: var(--primary); border-radius: 999px; }

/* Grouping-suggestion comparison — accepting a suggestion folds one topic into another
   and deletes the source, so both sides must be reviewable before deciding. */
.sg-toggle { margin-left: auto; }
.sg-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.sg-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; }
.sg-src { border-left: 3px solid #f59e0b; }
.sg-tgt { border-left: 3px solid #10b981; }
.sg-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
            color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.sg-title { font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.sg-meta { margin-bottom: 6px; }
.sg-summary { font-size: 13px; line-height: 1.45; color: #374151; }
.sg-open { display: inline-block; margin-top: 8px; font-size: 12px;
           color: #2563eb; text-decoration: none; font-weight: 600; }
.sg-open:hover { text-decoration: underline; }
@media (max-width: 760px) { .sg-compare { grid-template-columns: 1fr; } }

/* Silent-task review sweep — long-quiet tasks the user grooms by hand. */
.silent-panel { border-left: 3px solid #94a3b8; }
.silent-row { align-items: center; }
.silent-age { display: inline-block; min-width: 44px; padding: 2px 8px; border-radius: 999px;
              background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 700;
              text-align: center; }
.silent-title { font-weight: 600; color: var(--ink); text-decoration: none; }
.silent-title:hover { text-decoration: underline; }
.silent-row.busy { opacity: .5; pointer-events: none; }
.silent-bulk { padding-top: 10px; margin-top: 6px; border-top: 1px dashed var(--line);
               display: flex; justify-content: flex-end; }

/* ══ "Šiandien" board ══════════════════════════════════════════════════════════
   Two zones: the day (what to do now) then the portfolio (whole picture per client).
   Colour carries exactly one meaning here — orange = needs me, blue = needs others,
   red = late — so the eye can scan without decoding. */
.section-h { font-size: 15px; font-weight: 700; margin: 26px 0 12px; color: var(--muted);
             text-transform: uppercase; letter-spacing: .05em; }

.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tcol { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
        padding: 12px 6px 8px; box-shadow: var(--shadow); min-height: 96px; }
.tcol-late { border-color: #fecaca; background: #fffafa; }
.tcol-head { display: flex; align-items: center; justify-content: space-between;
             padding: 0 8px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tcol-label { font-size: 13px; font-weight: 700; }
.tcol-count { font-size: 12px; font-weight: 700; color: var(--muted);
              background: #f1f5f9; border-radius: 999px; padding: 1px 8px; }
.tcol-empty { padding: 14px 10px; font-size: 12px; color: #9aa3af; text-align: center; }
.tcol-body { display: flex; flex-direction: column; }

.tl-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 6px;
          padding: 7px 8px; border-radius: 8px; }
.tl-row:hover { background: #f8fafc; }
.tl-row:hover .tl-actions { opacity: 1; }
.tl-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.tl-title { grid-column: 2; text-align: left; background: none; border: 0; padding: 0;
            font: inherit; font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--ink);
            cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; }
.tl-title:hover { text-decoration: underline; }
.tl-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--muted); }
.tl-due { font-weight: 600; }
.tl-due.late, .late-text { color: #dc2626; }
.tl-client { opacity: .75; }
.tl-actions { grid-row: 1 / span 2; grid-column: 3; display: flex; gap: 2px;
              opacity: 0; transition: opacity .12s; }
.tl-btn { border: 1px solid var(--line); background: #fff; border-radius: 6px; width: 24px;
          height: 24px; cursor: pointer; font-size: 12px; line-height: 1; color: var(--muted); }
.tl-btn:hover { background: #f1f5f9; color: var(--ink); }
.tl-more { padding: 4px 8px; }
.tl-more summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.undated-card { margin-top: 12px; padding: 12px 6px 8px; }

.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.client-card { padding: 14px 16px; margin-bottom: 0; }
.cc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cc-name { font-weight: 700; font-size: 15px; }
.cc-nums { display: flex; gap: 6px; font-size: 12px; font-weight: 700; }
.cc-mine { color: #ea580c; } .cc-others { color: #2563eb; }
.cc-bar { height: 5px; border-radius: 999px; background: #dbeafe; margin: 10px 0 12px; overflow: hidden; }
.cc-bar-mine { display: block; height: 100%; background: #fb923c; }
.cc-projects { display: flex; flex-direction: column; gap: 1px; }
.cc-proj { display: flex; justify-content: space-between; align-items: center; gap: 8px;
           padding: 5px 6px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 13px; }
.cc-proj:hover { background: #f1f5f9; }
.cc-proj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-proj-nums { display: flex; gap: 6px; font-size: 12px; }
.cc-top { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.cc-top-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
                color: var(--muted); font-weight: 700; margin-bottom: 2px; }

.peek-modal { max-width: 560px; }
.peek-meta { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.peek-summary { font-size: 14px; line-height: 1.5; }

@media (max-width: 1100px) { .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tgrid { grid-template-columns: 1fr; } }

/* ── Activity feed ─────────────────────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.feed-day { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 18px 0 4px; padding-left: 2px; }
.feed-day:first-child { margin-top: 4px; }
.feed-item { display: flex; align-items: flex-start; gap: 12px; background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 12px;
  padding: 12px 14px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  cursor: pointer; transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease; }
.feed-item:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
/* Inline project picker on a feed card — assign a project without opening the task. */
.feed-proj { margin-top: 7px; }
.feed-proj select { font-size: 12px; padding: 4px 9px; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; color: #374151; max-width: 100%; cursor: pointer; }
.feed-proj select:hover { border-color: #93c5fd; }
.feed-item:hover { transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.09), 0 1px 3px rgba(0,0,0,.06); }
.feed-item:hover .feed-open { opacity: 1; }
.feed-dot { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 15px; font-weight: 700;
  background: #eef1f5; color: var(--muted); }
.feed-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.feed-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.feed-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: #eef1f5; color: var(--muted); }
.feed-subject { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 100%; }
.feed-sub { display: block; }
.feed-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 1px; }
.feed-chip { background: #f1f5f9; border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 8px; font-weight: 600; color: var(--ink); }
.feed-open { flex: 0 0 auto; align-self: center; font-weight: 600; opacity: 0; transition: opacity .12s ease; }
.feed-pager { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 8px; }

/* per-kind accents (left border + dot) */
.feed-item.fd-created   { border-left-color: #2563eb; }
.fd-created   .feed-dot,   .fd-created   .feed-badge { background: #e0ecff; color: #1d4ed8; }
.feed-item.fd-updated   { border-left-color: #0891b2; }
.fd-updated   .feed-dot,   .fd-updated   .feed-badge { background: #cffafe; color: #0e7490; }
.feed-item.fd-done      { border-left-color: #16a34a; }
.fd-done      .feed-dot,   .fd-done      .feed-badge { background: #dcfce7; color: #15803d; }
.feed-item.fd-dismissed { border-left-color: #9ca3af; }
.fd-dismissed .feed-dot,   .fd-dismissed .feed-badge { background: #eef1f5; color: #6b7280; }
.feed-item.fd-reopened  { border-left-color: #d97706; }
.fd-reopened  .feed-dot,   .fd-reopened  .feed-badge { background: #fef3c7; color: #b45309; }
.feed-item.fd-merged    { border-left-color: #7c3aed; }
.fd-merged    .feed-dot,   .fd-merged    .feed-badge { background: #ede9fe; color: #6d28d9; }
.feed-item.fd-mailin    { border-left-color: #0891b2; }
.fd-mailin    .feed-dot,   .fd-mailin    .feed-badge { background: #cffafe; color: #0e7490; }
.feed-item.fd-toyou     { border-left-color: #ea580c; }
.fd-toyou     .feed-dot,   .fd-toyou     .feed-badge { background: #ffedd5; color: #c2410c; }
.feed-item.fd-towaiting { border-left-color: #2563eb; }
.fd-towaiting .feed-dot,   .fd-towaiting .feed-badge { background: #dbeafe; color: #1d4ed8; }

/* status-move pill: "🔵 Waiting → 🟠 Needs you" */
.feed-transition { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: 12px; font-weight: 600; color: var(--ink); background: #f1f5f9;
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.feed-transition .ft-arrow { color: var(--muted); font-weight: 700; }

@media (max-width: 640px) { .feed-open { display: none; } }