:root {
  --bg:#ffffff;
  --text:#111827;
  --white:#ffffff;
  --light-grey:#94A3B8;
  --tag-urgent:#ff595e;
  --tag-onhold:#ff924c;
  --tag-task:#ffca3a;
  --tag-maintenance:#c5ca30;
  --tag-operations:#8ac926;
  --tag-support:#36949d;
  --tag-design:#1982c4;
  --tag-feature:#4267ac;
  --tag-issues:#565aa0;
  --tag-report:#6a4c93;
  --purple:#0353a4;
  --purple-gradient:linear-gradient(135deg,#4a1a6b 0%,#2d1052 100%);
  /* surfaces */
  --surface:#ffffff;
  --border:#e5e7eb;
  --topbar-bg:#ffffff;
}

/* -- Dark mode -- */
body.dark {
  --bg:#0f1117;
  --text:#e2e8f0;
  --white:#1a1d27;
  --light-grey:#64748b;
  --purple:#818cf8;
  --purple-gradient:linear-gradient(135deg,#4a1a6b 0%,#2d1052 100%);
  --surface:#1a1d27;
  --border:#2d3148;
  --topbar-bg:#13151f;
}
body.dark .project-info {
  background:var(--topbar-bg);
  box-shadow:0 1px 0 0 var(--border);
}
.topbar-logo svg text,
.topbar-logo svg tspan {
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif !important;
}
body.dark .topbar-logo svg text { fill:#F1F5F9; }
body.dark .topbar-logo svg .logo-box { fill:#1E293B; }
body.dark .project-tasks { background:var(--bg); }
body.dark .project-column {
  background:var(--surface);
  border-color:var(--border);
}
body.dark .project-column-heading {
  background:var(--surface);
  border-color:var(--border);
}
body.dark .task {
  background:var(--surface);
  border-color:var(--border);
}
body.dark .task p { color:var(--text); }
body.dark .task__deadline { background:#1e1e3a; color:#818cf8; }
body.dark .task__deadline--overdue { background:#2d1515; color:#f87171; }
body.dark .task__assignee { background:#052e1c; color:#34d399; }
body.dark .board-combo__trigger {
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}
body.dark .board-combo__menu,
body.dark .board-dropdown,
body.dark .col-dropdown,
body.dark .tags-popup,
body.dark .tag-picker__dropdown,
body.dark .topbar-user__dropdown {
  background:var(--surface);
  border-color:var(--border);
}
body.dark .board-combo__item,
body.dark .board-dropdown button,
body.dark .col-dropdown button,
body.dark .tags-popup,
body.dark .topbar-user__item {
  color:var(--text);
}
body.dark .board-combo__item:hover  { background:#2a2d45; }
body.dark .board-combo__item.active { background:#1e2340; color:var(--purple); }
body.dark .board-combo__footer { border-color:var(--border); }
body.dark .board-combo__new-input { background:#1e2132; border-color:var(--border); color:var(--text); }
body.dark .board-dropdown button:hover { background:#2a2d45; }
/* Tags popup dark mode */
body.dark .tags-popup__title { color:#64748b; }
body.dark .tags-label { color:var(--text); }
body.dark .tags-label:hover { background:#2a2d45; }
body.dark .tags-row:hover { background:#1e2132; }
body.dark .tags-rename-input { color:var(--text); background:#1e2132; border-color:var(--border); }
body.dark .tags-popup__footer { border-color:var(--border); }
body.dark .tags-new-input { color:var(--text); background:#1e2132; border-color:var(--border); }
body.dark .tags-del-btn { color:#64748b; }
body.dark .tags-del-btn:hover { color:#f87171; }
body.dark .modal-overlay { background:rgba(0,0,0,.6); }
body.dark .modal {
  background:var(--surface);
  border-color:var(--border);
}
body.dark .modal__header-brand h3 { color:#F1F5F9; }
.logo-text-main  { fill: #0B1220; }
.logo-text-accent { fill: #da1e37; }
body.dark .logo-text-main  { fill: #F1F5F9; }
body.dark .logo-text-accent { fill: #94A3B8; }
.logo-mode-light { display: block; }
.logo-mode-dark  { display: none; }
body.dark .logo-mode-light { display: none; }
body.dark .logo-mode-dark  { display: block; }
body.dark .modal__header,
body.dark .modal__actions { border-color:var(--border); }
body.dark .modal h3 { color:var(--text); }
body.dark .modal label { color:#94a3b8; }
body.dark .modal select,
body.dark .modal textarea,
body.dark .modal input[type=text],
body.dark .modal input[type=url] {
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}
body.dark .modal-todo-item {
  background:var(--surface);
  border-color:var(--border);
}
body.dark .modal-todo-input {
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}
body.dark .task__todo-item { color:var(--text); }
body.dark .task__todo-text--done { color:#475569; }
body.dark .task__todos-progress { color:#64748b; }
body.dark .task__todos-bar { background:#2d3148; }
body.dark .task__comment-input {
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}
body.dark .task__timeline { border-color:var(--border); }
body.dark .topbar-icon-btn { color:#94a3b8; }
body.dark .topbar-icon-btn:hover { background:#2a2d45; color:var(--purple); }
body.dark .topbar-icon-btn.active { background:#1e2340; color:var(--purple); }
body.dark .task-icon--attachment  { background-color:#422006; color:#fbbf24; }
body.dark .task-icon--comment     { background-color:#052e16; color:#34d399; }
body.dark .task-icon--edit        { background-color:#1e2048; color:var(--purple); }
body.dark .task-icon--delete      { background-color:#450a0a; color:#f87171; }
body.dark .task-icon--move        { background-color:#082f49; color:#38bdf8; }
body.dark .task-icon--todo        { background-color:#052e16; color:#4ade80; }
body.dark .task-icon--participant { background-color:#2e1065; color:#a78bfa; }
body.dark .tags-btn { color:#94a3b8; }
body.dark .tags-btn:hover, body.dark .tags-btn.open { background:#2a2d45; color:var(--purple); }
body.dark .login-card {
  background:var(--surface);
  border-color:var(--border);
}
body.dark .login-card h2,
body.dark .login-card p { color:var(--text); }

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Inter', sans-serif;
}

body {
  color:var(--text);
  background:var(--bg);
}

.app {
  background-color:var(--bg);
  width:100%;
  min-height:100vh;
}

h1 {
  font-size:22px;
}

.project {
  padding-top:5px;
  padding-left: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  max-width:100%;
  width:100%;
  flex:1;
  overflow:auto;
  display:flex;
  flex-direction:column;
}

/* --------------------------------------------------
   TOPBAR  (Metronic demo3 inspired)
-------------------------------------------------- */
.project-info {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 1.5rem;
  height:64px;
  min-height:64px;
  background:var(--topbar-bg);
  box-shadow:0 1px 0 0 var(--border);
  flex-shrink:0;
  position:sticky;
  top:0;
  z-index:50;
}

/* -- Topbar inline logo -- */
.topbar-logo {
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  flex-shrink:0;
}
.topbar-logo__icon {
  width:32px;
  height:32px;
  border-radius:9px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}
.topbar-logo__icon i { color:#fff; font-size:14px; }
.topbar-logo__text {
  font-size:15px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.3px;
}

/* -- Left group -- */
.topbar-left {
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width:0;
}
.topbar-breadcrumb__sep {
  font-size:13px;
  color:#c8d0e0;
  font-weight:300;
}
.topbar-left .board-title-wrap {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.board-combo {
  position:relative;
}
.board-combo__trigger {
  display:flex;
  align-items:center;
  gap:7px;
  background:#fff;
  border:1.5px solid #dde3ee;
  border-radius:10px;
  padding:0 10px;
  height:34px;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  transition:border-color .15s, box-shadow .15s;
  white-space:nowrap;
  min-width:250px;
  max-width:250px;
}
.board-combo__trigger:hover,
.board-combo__trigger.open {
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(3,83,164,.08);
}
.board-combo__icon {
  color:var(--purple);
  font-size:11px;
  opacity:.9;
  flex-shrink:0;
}
.board-combo__chevron {
  font-size:10px;
  color:var(--light-grey);
  flex-shrink:0;
  transition:transform .2s;
  order:4;
}
.board-combo__fav-star {
  font-size:10px;
  color:#dd6f1a;
  flex-shrink:0;
  display:none;
  order:2;
}
.board-combo__fav-star.visible { display:inline-flex; align-items:center; }
#boardComboLabel { order:1; }
.board-combo__trigger.open .board-combo__chevron {
  transform:rotate(180deg);
}

/* -- Tags button & popup -- */
.tags-wrap {
  position:relative;
  flex-shrink:0;
}
.tags-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:8px;
  border:none;
  background:transparent;
  color:#6b7280;
  font-size:14px;
  cursor:pointer;
  transition:background .15s, color .15s;
  flex-shrink:0;
  position:relative;
}
.tags-btn:hover, .tags-btn.open {
  background:#f5f6fa;
  color:var(--purple);
}
.tags-popup {
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:270px;
  background:#fff;
  border:1.5px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
  z-index:600;
  padding:10px;
}
.tags-popup.open { display:block; }
.tags-popup__title {
  font-size:11px;
  font-weight:600;
  color:#9ca3af;
  text-transform:uppercase;
  letter-spacing:.6px;
  padding:0 4px 8px;
}
.tags-list {
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:280px;
  overflow-y:auto;
}
.tags-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px;
  border-radius:6px;
  transition:background .12s;
}
.tags-row:hover { background:#f8f9fc; }
.tags-swatch-wrap {
  position:relative;
  cursor:pointer;
  flex-shrink:0;
  display:flex;
  align-items:center;
}
.tags-color-input {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
  height:100%;
  border:none;
  padding:0;
  font-size:0;
  color:transparent;
  background:transparent;
}
/* Coloris picker � always above tags popup & modal */
#clr-picker { z-index: 2000 !important; }
.tags-swatch {
  display:block;
  width:13px;
  height:13px;
  border-radius:50%;
  border:1.5px solid rgba(0,0,0,.12);
  flex-shrink:0;
}
.tags-label {
  flex:1;
  font-size:13px;
  color:#374151;
  cursor:pointer;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-radius:4px;
  padding:2px 4px;
  transition:background .1s;
}
.tags-label:hover { background:#f0f1f6; }
.tags-rename-input {
  flex:1;
  font-size:13px;
  color:#374151;
  border:1.5px solid var(--purple);
  border-radius:4px;
  padding:2px 6px;
  min-width:0;
  outline:none;
  background:#fff;
}
.tags-del-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:20px;
  height:20px;
  border:none;
  background:transparent;
  color:#c4c9d4;
  font-size:11px;
  cursor:pointer;
  border-radius:4px;
  transition:background .12s, color .12s;
  opacity:0;
}
.tags-row:hover .tags-del-btn { opacity:1; }
.tags-del-btn:hover { background:#fee2e2; color:#ef4444; }
/* -- Color Themes panel � floats to the right of the popup -- */
.tags-themes {
  display:none;
  position:absolute;
  top:0;
  left:calc(100% + 8px);
  width:200px;
  background:#fff;
  border:1.5px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
  padding:10px;
  z-index:601;
}
.tags-themes--open { display:block; }
.tags-themes__title {
  font-size:11px;
  font-weight:600;
  color:#9ca3af;
  text-transform:uppercase;
  letter-spacing:.6px;
  padding:0 4px 8px;
}
.tags-themes__list {
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:260px;
  overflow-y:auto;
}
/* Icon button in title bar */
.tags-popup__title {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.tags-themes__icon-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border:none;
  background:transparent;
  color:#9ca3af;
  font-size:12px;
  border-radius:5px;
  cursor:pointer;
  transition:background .12s, color .12s;
  flex-shrink:0;
}
.tags-themes__icon-btn:hover,
.tags-themes__icon-btn.active { background:#eef1fd; color:var(--purple); }
.tags-theme-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 6px;
  border-radius:6px;
  cursor:pointer;
  transition:background .12s;
}
.tags-theme-row:hover { background:#f5f7ff; }
.tags-theme-row.active { background:#eef1fd; }
.tags-theme-row__preview {
  width:64px;
  height:12px;
  border-radius:6px;
  flex-shrink:0;
  border:1.5px solid rgba(0,0,0,.18);
  box-shadow:0 0 0 1px rgba(255,255,255,.4) inset;
}
body.dark .tags-theme-row__preview {
  border-color:rgba(255,255,255,.2);
}
.tags-theme-row__name {
  flex:1;
  font-size:12px;
  font-weight:500;
  color:#374151;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tags-theme-row__check {
  font-size:10px;
  color:var(--purple);
  flex-shrink:0;
}
body.dark .tags-themes { background:#1e2030; border-color:var(--border); }
body.dark .tags-themes__title { color:#6b7280; }
body.dark .tags-themes__icon-btn:hover,
body.dark .tags-themes__icon-btn.active { background:#2a2d45; color:var(--purple); }
body.dark .tags-theme-row:hover { background:#2a2d45; }
body.dark .tags-theme-row.active { background:#2a2d45; }
body.dark .tags-theme-row__name { color:var(--text); }

.tags-popup__footer {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #f0f1f6;
}
.tags-popup__new-row {
  display:flex;
  align-items:center;
  gap:6px;
}
.tags-new-input {
  flex:1;
  font-size:12px;
  border:1.5px solid #e5e7eb;
  border-radius:6px;
  padding:4px 8px;
  outline:none;
  color:#374151;
  background:#fff;
  transition:border-color .15s;
}
.tags-new-input:focus { border-color:var(--purple); }
.tags-new-add {
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border:none;
  background:var(--purple-gradient);
  color:#fff;
  border-radius:6px;
  font-size:13px;
  cursor:pointer;
  flex-shrink:0;
  transition:opacity .15s;
}
.tags-new-add:hover { opacity:.85; }
#boardComboLabel {
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:left;
  min-width:0;
}
.board-combo__menu {
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  width:100%;
  background:#fff;
  border:1.5px solid #dde3ee;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:5px;
  z-index:500;
  overflow:hidden;
}
.board-combo__menu.open { display:block; }
.board-combo__item {
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:8px 12px;
  border-radius:7px;
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  color:var(--text);
  cursor:pointer;
  transition:background .12s;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.board-combo__item:hover  { background:#f5f7ff; }
.board-combo__item.active {
  background:#eef1fd;
  color:var(--purple);
  font-weight:700;
}
.board-combo__footer {
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding:6px 4px 2px;
  border-top:1px solid #f0f1f6;
}
.board-combo__new-input {
  flex:1;
  font-size:12px;
  border:1.5px solid #e5e7eb;
  border-radius:6px;
  padding:4px 8px;
  outline:none;
  color:#374151;
  background:#fff;
  transition:border-color .15s;
  font-family:inherit;
  min-width:0;
}
.board-combo__new-input:focus { border-color:var(--purple); }
.board-combo__new-add {
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border:none;
  background:var(--purple-gradient);
  color:#fff;
  border-radius:6px;
  font-size:13px;
  cursor:pointer;
  flex-shrink:0;
  transition:opacity .15s;
}
.board-combo__new-add:hover { opacity:.85; }

/* -- Right group -- */
.topbar-right {
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-left:auto;
  flex-shrink:0;
}

/* -- Topbar divider -- */
.topbar-divider {
  width:1px;
  height:24px;
  background:#e8eaee;
  flex-shrink:0;
  margin:0 .25rem;
}

/* -- Icon buttons (archive, activity) -- */
.topbar-icon-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:8px;
  border:none;
  background:transparent;
  color:#6b7280;
  cursor:pointer;
  font-size:14px;
  transition:background .15s, color .15s;
  position:relative;
}
.topbar-icon-btn:hover { background:#f5f6fa; color:var(--purple); }
.topbar-icon-btn.active { background:#eef1fd; color:var(--purple); }

/* -- Search (collapsible) -- */
.topbar-search {
  display:flex;
  align-items:center;
  border-radius:8px;
  border:1.5px solid transparent;
  background:transparent;
  overflow:hidden;
  width:36px;
  height:36px;
  flex-shrink:0;
  transition:width .25s cubic-bezier(.4,0,.2,1), background .2s, border-color .15s, box-shadow .15s;
}
.topbar-search.open {
  width:230px;
  background:#f5f6fa;
}
.topbar-search.open:focus-within {
  border-color:var(--purple);
  background:#fff;
  box-shadow:0 0 0 3px rgba(3,83,164,.1);
}
.topbar-search__icon-btn {
  width:36px;
  min-width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  cursor:pointer;
  color:#6b7280;
  font-size:14px;
  border-radius:8px;
  transition:background .15s, color .15s;
  flex-shrink:0;
}
.topbar-search__icon-btn:hover { background:#f5f6fa; color:var(--purple); }
.topbar-search.open .topbar-search__icon-btn { color:var(--purple); border-radius:0; }
.topbar-search input {
  border:none;
  background:transparent;
  outline:none;
  font-size:13px;
  font-family:inherit;
  color:var(--text);
  width:0;
  opacity:0;
  padding:0;
  transition:opacity .2s;
  flex:1;
}
.topbar-search.open input {
  width:100%;
  opacity:1;
  padding:.2rem .2rem;
}
.topbar-search input::placeholder { color:#9ca3af; }
.topbar-search__clear {
  background:transparent;
  border:none;
  cursor:pointer;
  color:#9ca3af;
  font-size:11px;
  padding:0 .5rem 0 0;
  display:none;
  line-height:1;
  flex-shrink:0;
}
.topbar-search__clear.visible { display:block; }
.task--search-hidden { display:none !important; }
.task--search-match { outline:2px solid var(--purple); outline-offset:1px; }

/* -- Nav toggle (hamburger) -- */
.topbar-left .nav-toggle {
  width:36px; height:36px;
  border-radius:8px;
  border:none;
  background:transparent;
  color:#6b7280;
  font-size:15px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
  flex-shrink:0;
}
.topbar-left .nav-toggle:hover { background:#f5f6fa; color:var(--purple); }

/* -- Topbar User trigger -- */
.topbar-user {
  position:relative;
  flex-shrink:0;
}
.topbar-user__trigger {
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  padding:4px;
  border-radius:50%;
  transition:box-shadow .15s;
  user-select:none;
}
.topbar-user__trigger:hover { box-shadow:0 0 0 3px #e8eaee; }
.topbar-avatar-wrap {
  position:relative;
  display:inline-flex;
  flex-shrink:0;
}
.nav-user__avatar {
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--purple-gradient);
  flex-shrink:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  color:#fff;
  font-weight:600;
}
.nav-user__avatar--lg {
  width:44px;
  height:44px;
  font-size:17px;
}
.nav-user__avatar img { width:100%; height:100%; object-fit:cover; }

/* -- Dropdown panel -- */
.topbar-user__dropdown {
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  background:#fff;
  border:1px solid #f1f1f4;
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.12);
  min-width:220px;
  padding:.5rem 0;
  z-index:300;
}
.topbar-user.open .topbar-user__dropdown { display:block; }

/* User header section */
.topbar-user__header {
  display:flex;
  align-items:center;
  gap:12px;
  padding:.85rem 1.1rem 1rem;
  background:#f9fafc;
  border-radius:10px 10px 0 0;
  border-bottom:1px solid #f1f1f4;
  margin-bottom:.35rem;
}
.topbar-user__hd-avatar { position:relative; display:inline-flex; }
.topbar-user__hd-info { min-width:0; }
.topbar-user__hd-name {
  font-size:13px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:140px;
}
.topbar-user__hd-email {
  font-size:11px;
  color:#9ca3af;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:140px;
  margin-top:2px;
}

/* Divider */
.topbar-user__divider {
  height:1px;
  background:#f1f1f4;
  margin:.35rem 0;
}

/* Menu items */
.topbar-user__item {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:.55rem 1.1rem;
  background:none;
  border:none;
  font-size:13px;
  font-weight:500;
  color:#374151;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  transition:background .12s, color .12s;
}
.topbar-user__item:hover { background:#f5f6fa; color:var(--purple); }
.topbar-user__item i {
  width:18px;
  text-align:center;
  font-size:13px;
  color:#9ca3af;
  transition:color .12s;
}
.topbar-user__item:hover i { color:var(--purple); }
.topbar-user__item.danger { color:#DC2626; }
.topbar-user__item.danger i { color:#DC2626; }
.topbar-user__item.danger:hover { background:#FEF2F2; color:#b91c1c; }
.topbar-user__item.danger:hover i { color:#b91c1c; }

.project-participants {
  display:flex;
  align-items:center;
  gap:.4rem;
  flex-shrink:0;
  position:relative;
}

/* -- Participant avatars -- */
.participant-avatar {
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--purple-gradient);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:600;
  overflow:visible;
  flex-shrink:0;
  cursor:pointer;
  border:2px solid var(--white);
  box-shadow:0 0 0 1px var(--purple);
  position:relative;
}
.participant-avatar > img,
.participant-avatar > span {
  width:28px;
  height:28px;
  border-radius:50%;
  pointer-events:none;
}
.participant-avatar > img {
  object-fit:cover;
  display:block;
}
.participant-avatar > span {
  display:flex;
  align-items:center;
  justify-content:center;
}
/* -- Hover card -- */
.participant-card {
  display:none;
  position:absolute;
  top:calc(100% + 8px);  
  width:210px;
  background:#fff;
  border:1.5px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
  padding:10px;
  z-index:700;
  text-align:left;
  flex-direction:column;
  gap:0;
}
.participant-avatar.open .participant-card {
  display:flex;
}
.pcard__title {
  font-size:11px;
  font-weight:600;
  color:#9ca3af;
  text-transform:uppercase;
  letter-spacing:.6px;
  padding:0 4px 8px;
}
.pcard__info {
  display:flex;
  flex-direction:column;
  gap:2px;
  width:100%;
}
.pcard__row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px;
  border-radius:6px;
}
.pcard__name {
  font-size:13px;
  font-weight:600;
  color:#374151;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pcard__email {
  font-size:12px;
  color:#9ca3af;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pcard__footer {
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #f0f1f6;
  width:100%;
}
.pcard__remove {
  flex:1;
  padding:4px 8px;
  border:none;
  border-radius:6px;
  background:#fee2e2;
  color:#e05252;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:background .15s;
}
.pcard__remove:hover { background:#fecaca; }

.project-participants__add {
  width:28px;
  height:28px;
  background:transparent;
  border:1px dashed rgb(150,150,150);
  border-radius:50%;
  font-size:11px;
  color:rgb(130,130,130);
  cursor:pointer;
  position:relative;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s, color .15s;
}
.project-participants__add:hover { border-color:var(--purple); color:var(--purple); }

/* admin crown badge on avatar */
.participant-avatar--admin { box-shadow:0 0 0 1px #f59e0b; }
.participant-avatar--admin .pa-crown {
  position:absolute;
  bottom:-3px;
  right:-3px;
  width:13px;
  height:13px;
  background:#f59e0b;
  border-radius:50%;
  border:2px solid var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:6px;
  color:#fff;
  line-height:1;
  pointer-events:none;
}

/* separator between admin and member avatars */
.participants-sep {
  width:1px;
  height:18px;
  background:#d1d5db;
  flex-shrink:0;
  align-self:center;
  margin:0 2px;
}

/* role pill in mini-card */
.pcard__title--admin  { color:#d97706; }
.pcard__title--member { color:#6b7280; }

/* ── Team management panel ── */
.team-panel {
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  z-index:600;
  width:340px;
  background:var(--white);
  border:1.5px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.14);
  flex-direction:column;
  overflow:hidden;
}
.team-panel.open { display:flex; }

.team-panel__hdr {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px 10px;
  border-bottom:1px solid #f0f1f6;
}
.team-panel__title {
  font-size:13px;
  font-weight:700;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:6px;
}
.team-panel__title i { color:var(--purple); }
.team-panel__count {
  background:#f3f4f6;
  color:#6b7280;
  font-size:11px;
  font-weight:600;
  border-radius:20px;
  padding:1px 7px;
}
.team-panel__close {
  background:none;
  border:none;
  cursor:pointer;
  color:#9ca3af;
  font-size:13px;
  padding:4px;
  border-radius:6px;
  transition:background .15s;
}
.team-panel__close:hover { background:#f3f4f6; color:#374151; }

.team-panel__search-wrap {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-bottom:1px solid #f0f1f6;
  color:#9ca3af;
  font-size:12px;
}
.team-panel__search-wrap input {
  flex:1;
  border:none;
  outline:none;
  font-size:13px;
  font-family:inherit;
  background:transparent;
  color:var(--text);
}

.team-panel__body {
  overflow-y:auto;
  max-height:280px;
  padding:6px 0;
}

/* section header */
.team-section__hdr {
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#9ca3af;
  padding:8px 14px 4px;
  display:flex;
  align-items:center;
  gap:5px;
}
.team-section__hdr i { font-size:10px; }
.team-section__hdr--admin i { color:#f59e0b; }
.team-section__hdr--member i { color:#7c3aed; }

/* member row */
.team-member-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 14px;
  transition:background .12s;
}
.team-member-row:hover { background:#f9fafb; }
.team-member-row__avatar {
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--purple-gradient);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:600;
  flex-shrink:0;
  overflow:hidden;
}
.team-member-row__avatar img { width:100%; height:100%; object-fit:cover; }
.team-member-row__info {
  flex:1;
  min-width:0;
}
.team-member-row__name {
  font-size:13px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.team-member-row__email {
  font-size:11px;
  color:#9ca3af;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.team-member-row__actions {
  display:flex;
  gap:4px;
  flex-shrink:0;
}
.team-member-row__actions button {
  border:none;
  cursor:pointer;
  border-radius:6px;
  padding:3px 7px;
  font-size:11px;
  font-weight:500;
  font-family:inherit;
  transition:background .12s;
}
.tmr-promote  { background:#ede9fe; color:#7c3aed; }
.tmr-promote:hover { background:#ddd6fe; }
.tmr-demote   { background:#fef3c7; color:#d97706; }
.tmr-demote:hover { background:#fde68a; }
.tmr-remove   { background:#fee2e2; color:#dc2626; }
.tmr-remove:hover { background:#fecaca; }

.team-panel__empty {
  text-align:center;
  color:#9ca3af;
  font-size:13px;
  padding:20px 14px;
}

/* footer: add member */
.team-panel__footer {
  border-top:1px solid #f0f1f6;
  padding:10px 14px;
}
.team-panel__add-row {
  display:flex;
  gap:6px;
  align-items:center;
}
.team-panel__add-row input {
  flex:1;
  border:1px solid #e5e7eb;
  border-radius:7px;
  padding:.35rem .55rem;
  font-size:13px;
  font-family:inherit;
  outline:none;
  color:var(--text);
  background:var(--white);
  transition:border-color .15s;
}
.team-panel__add-row input:focus { border-color:var(--purple); }
.team-panel__add-row button {
  background:var(--purple-gradient);
  color:#fff;
  border:none;
  border-radius:7px;
  width:30px;
  height:30px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  flex-shrink:0;
  transition:opacity .15s;
}
.team-panel__add-row button:hover { opacity:.85; }
.team-panel__msg {
  margin:.4rem 0 0;
  font-size:12px;
  min-height:1em;
  color:#dc2626;
}
.team-panel__msg.ok { color:#059669; }

/* dark mode */
body.dark .team-panel { background:var(--white); border-color:#2d2d2d; }
body.dark .team-panel__hdr,
body.dark .team-panel__search-wrap { border-color:#2d2d2d; }
body.dark .team-member-row:hover { background:#1e1e2e; }
body.dark .team-panel__close:hover { background:#2d2d2d; }
body.dark .team-panel__count { background:#2d2d2d; color:#9ca3af; }
body.dark .team-panel__footer { border-color:#2d2d2d; }
body.dark .team-panel__add-row input { border-color:#3d3d4d; background:#161622; }

/* ── Role-based UX restrictions (member = limited access) ── */
#appShell[data-role="member"] #boardOptRename,
#appShell[data-role="member"] #boardOptDelete,
#appShell[data-role="member"] .board-dropdown__divider,
#appShell[data-role="member"] #activityClearBtn,
#appShell[data-role="member"] .project-column-heading__options:not(#boardOptionsBtn) { display:none !important; }

/* member role indicator — lock icon inside board selector */
#appShell[data-role="member"] .board-combo__trigger::after {
  content: '\f023';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 10px;
  color: #94a3b8;
  flex-shrink: 0;
  order: 3;
  display:flex;
  align-items:center;
}
body.dark #appShell[data-role="member"] .board-combo__trigger::after {
  color: #475569;
}

/* dim drag handle cursor for non-owned tasks when member */
#appShell[data-role="member"] .task { cursor:default; }

.project-tasks {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  width:100%;
  grid-column-gap:1rem;
  grid-row-gap:1rem;
  flex:1;
  align-items:start;
  align-content:start;
  padding:.5rem 1rem 1.5rem;
}

.project-column-heading {
  margin-bottom:0.75rem;
  margin-left: 7px;
  margin-top: 7px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.project-column-heading__title {
  font-size:16px;
}

.project-column-heading__options {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:8px;
  border:none;
  background:transparent;
  color:#6b7280;
  font-size:14px;
  cursor:pointer;
  transition:background .15s, color .15s;
  flex-shrink:0;
}
.project-column-heading__options:hover {
  background:#e8ecf5;
  color:var(--purple);
}

.task {
  cursor:move;
  background-color:var(--white);
  padding:0.6rem 0.75rem;
  border-radius:10px;
  width:100%;
  box-shadow: 0 1px 4px rgba(100,116,139,.08), 0 1px 2px rgba(100,116,139,.06);
  margin-bottom:0.55rem;
  border:1.5px solid #f1f5f9;
  transition:box-shadow .15s, border-color .15s;
}

.task:hover {
  box-shadow: 0 4px 12px rgba(100,116,139,.13);
  border-color:#e2e8f0;
}

.task p {
  font-size:13.5px;
  font-weight:500;
  color:#111827;
  margin:0.4rem 0;
  line-height:1.4;
  letter-spacing:-.01em;
  white-space:pre-wrap;
  word-break:break-word;
}

.task__tag {
  border-radius:6px;
  padding:2px 9px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.01em;
}

.task__tags {
  width:100%;
  display:flex;
  align-items:center;
  gap:4px;
}
.task__tags .task__tag { flex:1; }

/* Assignee avatars in the tags row */
.task__assignees {
  display:inline-flex;
  align-items:center;
  gap:2px;
  flex-shrink:0;
  margin-left:auto;
}
.task__assignees .tl-avatar,
.task__assignees .tl-avatar--initial {
  margin-right:0;
  width:20px;
  height:20px;
  flex-shrink:0;
}

.task__age {
  font-size:10.5px;
  color:#94a3b8;
  white-space:nowrap;
  font-weight:500;
  margin-left:auto;
  flex-shrink:0;
}

.task__options {
  background:transparent;
  border:0;
  color:#94a3b8;
  font-size:13px;
  cursor:pointer;
  border-radius:5px;
  padding:1px 5px;
  transition:background .13s, color .13s;
}
.task__options:hover { background:#f1f5f9; color:#374151; }

.task__stats {
  position:relative;
  width:100%;
  color:#94a3b8;
  font-size:11.5px;
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-top:.25rem;
}
.task__stats span:not(:last-of-type) {
  margin-right:0;
}

/* Missing-value placeholders */
.task__no-value {
  font-size:10.5px;
  color:#cbd5e1;
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-style:italic;
}
.task__no-value i { font-size:9px; opacity:.6; }
.task__no-assignee { margin-left:auto; }

/* Assignee combo dropdown avatar */
.assignee-item__avatar {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.assignee-item__avatar .tl-avatar,
.assignee-item__avatar img.tl-avatar {
  width: 22px;
  height: 22px;
  font-size: 9px;
  border-radius: 50%;
  object-fit: cover;
}

.task__stats svg,
.task__stats i {
  margin-right:3px;
  font-size:10px;
  opacity:.7;
}

.task__owner {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  cursor:default;
}
.task__owner img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

/* -- Author avatars in timeline / activity -- */
.tl-avatar {
  width:20px;
  height:20px;
  border-radius:50%;
  object-fit:cover;
  vertical-align:middle;
  margin-right:5px;
  flex-shrink:0;
}
.tl-avatar--initial {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--purple-gradient);
  color:#fff;
  font-size:10px;
  font-weight:700;
  width:20px;
  min-width:20px;
  height:20px;
  border-radius:50%;
  margin-right:0px;
  vertical-align:middle;
  flex-shrink:0;
}

.task-hover {
  border:2px dashed var(--light-grey)!important;
}

.project-column {
  min-height:200px;
  height:96%;
  background:#f4f4f5;
  border-radius:12px;
  padding:.5rem .5rem 1rem;
}

.column-drag-over {
  background:rgba(26,86,232,.08);
  border-radius:8px;
  outline:2px dashed var(--purple);
  outline-offset:-4px;
}

.task-details {
  width:24%;
  border-left:1px solid #d9e0e9;
  overflow-y:auto;
  padding:1.5rem 1rem 1.5rem 1.25rem;
  flex-shrink:0;
}
.task-details.collapsed {
  display:none;
}

.task-activity h2 {
  font-size:14px;
  margin-bottom:0.75rem;
}
.activity-header {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:0;
}
.activity-header__top {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.activity-header h2 { margin-bottom:0; }
.activity-clear-btn {
  display:flex;
  align-items:center;
  gap:5px;
  border:1px solid #e5e7eb;
  background:transparent;
  border-radius:6px;
  padding:4px 9px;
  font-size:11px;
  font-weight:500;
  color:#94a3b8;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s, color .15s, border-color .15s;
  white-space:nowrap;
}
.activity-clear-btn:hover { background:#fee2e2; border-color:#fca5a5; color:#dc2626; }
.activity-clear-btn .fa-spinner { animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
body.dark .activity-clear-btn { border-color:var(--border); color:#475569; }
body.dark .activity-clear-btn:hover { background:#450a0a; border-color:#7f1d1d; color:#f87171; }
.activity-tabs-wrap {
  position:relative;
  margin-bottom:0.75rem;
}
.activity-period-tabs {
  display:flex;
  gap:0;
  background:transparent;
  border-radius:0;
  padding:0;
  border-bottom:2px solid #e5e7eb;
  width:100%;
}
.activity-period-tab {
  border:none;
  background:transparent;
  border-radius:0;
  padding:8px 14px;
  font-size:12.5px;
  font-weight:500;
  color:#64748b;
  cursor:pointer;
  transition:color .15s;
  white-space:nowrap;
  font-family:inherit;
  position:relative;
  margin-bottom:-2px;
  border-bottom:2px solid transparent;
}
.activity-period-tab.active {
  background:transparent;
  color:var(--purple);
  font-weight:600;
  border-bottom:2px solid var(--purple);
  box-shadow:none;
}
.activity-period-tab:hover:not(.active) { color:#374151; }
.activity-period-tab--custom { margin-left:auto; gap:5px; }
.activity-diff {
  display:block;
  margin-top:3px;
  font-size:11px;
  color:#64748b;
  line-height:1.5;
}
.activity-diff s {
  color:#e05252;
  text-decoration-color:#e05252;
}
body.dark .activity-diff { color:#475569; }
.activity-calendar-popover {
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:200;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.14);
  padding:10px;
  min-width:280px;
}
.cal-hint {
  font-size:11px;
  color:#94a3b8;
  text-align:center;
  margin:0 0 6px;
}
.activity-empty {
  list-style:none !important;
  text-align:center;
  color:#94a3b8;
  font-size:12px;
  padding:20px 0 !important;
  margin:0 !important;
}
body.dark .activity-empty { color:#475569; }
body.dark .activity-period-tabs { background:transparent; border-bottom-color:var(--border); }
body.dark .activity-period-tab { color:#64748b; }
body.dark .activity-period-tab.active { background:transparent; color:var(--purple); border-bottom-color:var(--purple); box-shadow:none; }
body.dark .activity-calendar-popover { background:var(--surface); border-color:var(--border); box-shadow:0 8px 32px rgba(0,0,0,.4); }
body.dark .cal-hint { color:#475569; }

.task-activity li {
  list-style:none;
  margin:0.75rem 0;
  padding:0rem 0.75rem 0.75rem 2.5rem;
  position:relative;
  font-size:12px;
}

.task-activity time {
  display:block;
  color:var(--light-grey);
  font-size:11px;
  margin-top:0.25rem;
}

.task-icon {
  width:28px;
  height:28px;
  border-radius:8px;
  position:absolute;
  top:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}

.task-icon i,
.task-icon svg {
  font-size:12px;
}

.task-icon--attachment  { background-color:#fef3c7; color:#d97706; }
.task-icon--comment     { background-color:#d1fae5; color:#059669; }
.task-icon--edit        { background-color:#eef1fd; color:var(--purple); }
.task-icon--delete      { background-color:#fee2e2; color:#dc2626; }
.task-icon--move        { background-color:#e0f2fe; color:#0284c7; }
.task-icon--todo        { background-color:#f0fdf4; color:#16a34a; }
.task-icon--participant { background-color:#faf5ff; color:#7c3aed; }

@media only screen and (max-width: 1300px) {
  .project { max-width:100%; }
  .task-details { width:100%; }
  .task-activity {
    flex-basis:50%;
    background:var(--white);
    padding:1rem;
    border-radius:8px;
    margin:0.5rem;
  }
}

@media only screen and (max-width: 1000px) {
  .project-column:nth-child(2),
  .project-column:nth-child(3) { display:none; }
  .project-tasks { grid-template-columns:1fr 1fr; }
}

@media only screen and (max-width: 600px) {
  .project-column:nth-child(4) { display:none; }
  .project-tasks { grid-template-columns:1fr; }
  .task-details { flex-wrap:wrap; padding:1.5rem 0.5rem; }
  .task-activity { flex-basis:100%; }
  h1 { font-size:20px; }
}

/* -- Floating Add Button -- */
.fab {
  position:fixed;
  bottom:1.75rem;
  right:1.75rem;
  width:40px;
  height:40px;
  border-radius:10px;
  background:#fff;
  color:var(--purple);
  font-size:18px;
  border:1.5px solid #dde3ee;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s, box-shadow .15s, color .15s;
  z-index:100;
}
.fab:hover {
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(3,83,164,.08);
  color:var(--purple);
}
body.dark .fab {
  background:var(--surface);
  border-color:var(--border);
  color:var(--purple);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
body.dark .fab:hover {
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(129,140,248,.15);
}

/* -- Modal -- */
.modal-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.4);
  backdrop-filter:blur(3px);
  z-index:200;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.modal-overlay.open { display:flex; }

/* Wrapper holds the floating icon + modal box */
.modal-wrapper {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:480px;
  animation:modalIn .22s cubic-bezier(.16,1,.3,1);
}
@keyframes modalIn {
  from { transform:translateY(20px) scale(.97); opacity:0; }
  to   { transform:translateY(0)    scale(1);   opacity:1; }
}

.modal {
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:16px;
  width:100%;
  box-shadow:0 24px 64px rgba(0,0,0,.18);
  overflow:visible;
  padding-top:0;
}

/* Header */
.modal__header {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 22px 0;
  border-radius:16px 16px 0 0;
  overflow:hidden;
}
.modal__header-brand {
  display:flex;
  align-items:center;
  gap:10px;
}
.modal h3 {
  font-size:16px;
  font-weight:600;
  color:#0B1220;
  letter-spacing:-.2px;
  margin:0;
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
}

/* Body */
.modal__body {
  padding:14px 22px 18px;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.modal-field--row { display:flex; gap:10px; }
.modal-field--half { flex:1; min-width:0; }
/* Two-column grid: Column + Tag */
.modal-two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:start;
}
/* Inline tag picker embedded in modal */
.modal-inline-tag-picker {
  border:1.5px solid #e5e7eb;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
}
.modal-inline-tag-picker__list {
  max-height:130px;
  overflow-y:auto;
  padding:4px;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.modal-inline-tag-picker__footer {
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 6px;
  border-top:1px solid #f0f1f6;
}
.modal-inline-tag-picker__footer .tags-new-input { font-size:11px; padding:3px 7px; height:24px; }
.modal-inline-tag-picker__footer .tags-new-add   { width:22px; height:22px; font-size:11px; }
/* More Options toggle */
.modal-more-toggle {
  display:flex;
  align-items:center;
  gap:5px;
  padding:0;
  border:none;
  background:transparent;
  color:#9ca3af;
  font-size:11px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  letter-spacing:.3px;
  text-transform:uppercase;
  transition:color .15s;
  align-self:flex-end;
  margin-left:auto;
}
.modal-more-toggle:hover { color:var(--purple); }
.modal-more-toggle__icon { font-size:10px; transition:transform .2s; }
.modal-more-toggle.open .modal-more-toggle__icon { transform:rotate(180deg); }
/* More Options fields (hidden by default) */
.modal-more-fields {
  display:none;
  flex-direction:column;
  gap:13px;
}
.modal-more-fields.open { display:flex; }
body.dark .modal-inline-tag-picker { border-color:var(--border); background:var(--surface); }
body.dark .modal-inline-tag-picker__footer { border-color:var(--border); }
body.dark .modal-more-toggle { color:#6b7280; }
body.dark .modal-more-toggle:hover { color:var(--purple); }
/* deadline input looks clickable */
#cardDeadline { cursor:pointer; }
/* assignee combo placeholder + unassigned option */
.assignee-placeholder { color:#9ca3af; }
.assignee-none { color:#9ca3af; font-style:italic; }
.assignee-item { display:flex; align-items:center; gap:7px; }
.assignee-check { font-size:11px; color:var(--purple); min-width:11px; }
/* Vanilla Calendar Pro � render above modal */
[data-vc="calendar"] { z-index:9999 !important; }

/* -- Column combo (modal) -- */
.col-combo { position:relative; }
.col-combo__trigger {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  border:1.5px solid #e5e7eb;
  border-radius:8px;
  padding:9px 12px;
  font-size:13px;
  font-family:inherit;
  background:#fff;
  color:#374151;
  cursor:pointer;
  transition:border-color .15s;
  gap:8px;
}
.col-combo__trigger:focus,
.col-combo__trigger.open { border-color:var(--purple); outline:none; }
.col-combo__chevron { font-size:11px; color:#9ca3af; transition:transform .15s; flex-shrink:0; }
.col-combo__trigger.open .col-combo__chevron { transform:rotate(180deg); }
.col-combo__menu {
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  background:#fff;
  border:1.5px solid #dde3ee;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:5px;
  z-index:600;
}
.col-combo__menu.open { display:block; }
.col-combo__row {
  display:flex;
  align-items:center;
  border-radius:7px;
  transition:background .12s;
}
.col-combo__row:hover { background:#f5f7ff; }
.col-combo__row .board-combo__item {
  flex:1;
  min-width:0;
}
.col-combo__row .board-combo__item:hover { background:none; }
.col-combo__row .board-combo__item.active { background:none; color:var(--purple); font-weight:700; }
.col-combo__row.active-row { background:#eef1fd; }
.col-combo__row.active-row:hover { background:#e6eafc; }
.col-combo__row:hover .tags-del-btn { opacity:1; }
body.dark .col-combo__trigger { background:var(--surface); border-color:var(--border); color:var(--text); }
body.dark .col-combo__menu { background:var(--surface); border-color:var(--border); }
body.dark .col-combo__menu .board-combo__footer { border-color:var(--border); }

.modal label {
  display:block;
  font-size:12px;
  font-weight:600;
  color:#6b7280;
  margin-bottom:5px;
  letter-spacing:.1px;
}
/* Neutralise .modal label overrides inside tag rows / pickers */
.modal .tags-swatch-wrap {
  display:inline-flex;
  margin-bottom:0;
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  letter-spacing:normal;
}
.modal-label-hint {
  font-weight:400;
  color:#9ca3af;
  font-size:11px;
  margin-left:3px;
}
.modal select,
.modal textarea,
.modal input[type=text],
.modal input[type=url] {
  width:100%;
  border:1.5px solid #e5e7eb;
  border-radius:8px;
  padding:9px 12px;
  font-size:13px;
  font-family:inherit;
  color:#111827;
  outline:none;
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
  background:#fff;
}
.modal select:focus,
.modal textarea:focus,
.modal input[type=text]:focus,
.modal input[type=url]:focus {
  border-color:#4a1a6b;
  box-shadow:0 0 0 3px rgba(74,26,107,.12);
}
.modal select { height:38px; }
.modal textarea { resize:vertical; min-height:80px; }

/* Footer / actions */
.modal__actions {
  display:flex;
  gap:8px;
  padding:14px 22px 20px;
  border-top:1px solid #f1f5f9;
}
.btn-cancel {
  flex:1;
  padding:9px 0;
  border-radius:8px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  border:1.5px solid #e5e7eb;
  background:#fff;
  color:#6b7280;
  font-family:inherit;
  transition:background .15s, color .15s, border-color .15s;
}
.btn-cancel:hover { background:#f9fafb; color:#374151; border-color:#d1d5db; }
.btn-add {
  flex:2;
  padding:9px 0;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  border:none;
  background:linear-gradient(135deg,#4a1a6b 0%,#2d1052 100%);
  color:#fff;
  font-family:inherit;
  transition:opacity .15s, box-shadow .15s;
  box-shadow:0 2px 10px rgba(74,26,107,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.btn-add:hover { opacity:.9; box-shadow:0 4px 18px rgba(149,64,165,.45); }

/* -- Card Timeline -- */
.task__timeline {
  margin-top:.55rem;
  padding-top:.45rem;
  border-top:1px solid #f1f5f9;
}
/* Hide timeline container entirely when only a create entry exists and card is collapsed */
.task__timeline--create-only {
  margin-top:0;
  padding-top:0;
  border-top:none;
}
.task--expanded .task__timeline--create-only {
  margin-top:.55rem;
  padding-top:.45rem;
  border-top:1px solid #f1f5f9;
}
.task__tl-entry {
  display:none;
  align-items:flex-start;
  gap:.5rem;
  padding:.3rem 0;
  font-size:12.5px;
  position:relative;
}
.task__tl-entry:last-of-type { display:flex; }
/* create entries are always hidden unless the card is expanded */
.task__tl-entry--create { display:none !important; }
.task--expanded .task__tl-entry { display:flex; padding-bottom:.3rem; }
.task--expanded .task__tl-entry--create { display:flex !important; }
.task--expanded .task__tl-entry:not(:last-of-type)::after {
  content:'';
  position:absolute;
  left:10px;
  top:22px;
  width:2px;
  bottom:-2px;
  background:#e8ecf2;
  z-index:0;
}
.task__tl-dot {
  width:22px;
  height:22px;
  border-radius:50%;
  border:2.5px solid var(--light-grey);
  flex-shrink:0;
  margin-top:1px;
  position:relative;
  z-index:1;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f5f6fa;
}
.task__tl-dot .tl-avatar,
.task__tl-dot .tl-avatar--initial {
  width:100%;
  height:100%;
  margin:0;
  border-radius:0;
  flex-shrink:0;
}
.task__tl-dot--comment { border-color:#10B981; }
.task__tl-dot--attach  { border-color:#F59E0B; }
.task__tl-dot--edit    { border-color:var(--purple); }
.task__tl-dot--create  { border-color:#c4cad3; }
.task__tl-text { flex:1; line-height:1.4; }
.task__tl-meta {
  display:flex;
  align-items:center;
  gap:.35rem;
  margin-top:1px;
}
.task__tl-meta time { color:#94a3b8; font-size:10.5px; flex:1; }
.task__tl-meta b { font-size:10.5px; color:#64748b; font-weight:600; white-space:nowrap; }
.task__tl-text time {
  display:block;
  color:var(--light-grey);
  font-size:10px;
  margin-top:1px;
}

/* -- Card Update button & comment box -- */
.task__footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:0;
}
.task__expand-btn {
  background:transparent;
  border:none;
  font-size:11px;
  font-weight:500;
  color:#94a3b8;
  cursor:pointer;
  display:none;
  align-items:center;
  gap:4px;
  padding:0;
  font-family:inherit;
  user-select:none;
  transition:color .13s;
}
.task__expand-btn:hover { color:var(--purple); }
.task__expand-btn.has-history { display:flex; }
.task__update-btn {
  background:transparent;
  border:1px solid var(--light-grey);
  border-radius:4px;
  font-size:11px;
  color:var(--light-grey);
  padding:2px 9px;
  cursor:pointer;
  font-family:inherit;
  transition:border-color .15s, color .15s;
}
.task__update-btn:hover {
  border-color:var(--purple);
  color:var(--purple);
}
.task__comment-box { display:none; margin-top:.5rem; }
.task__comment-box.open { display:block; }
.task--expanded .task__comment-box { display:block; }
.task__comment-input {
  width:100%;
  border:1.5px solid #e2e8f0;
  border-radius:8px;
  padding:.45rem .6rem;
  font-size:12.5px;
  font-family:inherit;
  resize:none;
  color:#374151;
  outline:none;
  transition:border-color .15s;
  background:#f8fafc;
}
.task__comment-input:focus {
  border-color:var(--purple);
  background:#fff;
}
.task__comment-actions {
  display:flex;
  justify-content:flex-end;
  gap:.4rem;
  margin-top:.4rem;
}
.task__comment-actions button {
  padding:4px 14px;
  border-radius:7px;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  border:none;
  font-family:inherit;
  transition:background .13s, opacity .13s;
}
.task__cc-cancel { background:#f1f5f9; color:#374151; }
.task__cc-cancel:hover { background:#e2e8f0; }
.task__cc-submit { background:var(--purple-gradient); color:#fff; }
.task__cc-submit:hover { opacity:.88; }

/* -- Inline comment edit -- */
.task__tl-entry { position:relative; }
.task--expanded .task__tl-entry:not(.task__tl-entry--editing) .task__tl-text {
  cursor:pointer;
  border-radius:6px;
  padding:2px 4px;
  margin:-2px -4px;
  transition:background .13s;
}
.task--expanded .task__tl-entry:not(.task__tl-entry--editing) .task__tl-text:hover {
  background:#f1f5f9;
}
.task__tl-entry--editing .task__tl-text { cursor:default; }
.task__tl-edit-input {
  width:100%;
  border:1.5px solid var(--purple);
  border-radius:7px;
  padding:.35rem .5rem;
  font-size:12.5px;
  font-family:inherit;
  resize:none;
  outline:none;
  background:#f8fafc;
  color:#374151;
  margin:.2rem 0;
  color:var(--text);
}
.task__tl-edit-actions {
  display:flex;
  gap:.35rem;
  justify-content:flex-end;
  margin-bottom:.2rem;
}
.task__tl-edit-actions button {
  padding:3px 12px;
  border-radius:7px;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  border:none;
  font-family:inherit;
  transition:opacity .13s, background .13s;
}
.task__tl-edit-save {
  background:transparent;
  color:#94a3b8;
  padding:3px 8px;
  border:1.5px solid #e2e8f0 !important;
}
.task__tl-edit-save:hover { background:#eef2ff; color:#6366f1; border-color:#c7d2fe !important; }
.task__tl-edit-cancel {
  background:transparent;
  color:#94a3b8;
  padding:3px 8px;
  border:1.5px solid #e2e8f0 !important;
}
.task__tl-edit-cancel:hover { background:#f8fafc; color:#374151; }
.task__tl-edit-delete {
  background:transparent;
  color:#94a3b8;
  padding:3px 8px;
  margin-right:auto;
  border:1.5px solid #e2e8f0 !important;
}
.task__tl-edit-delete:hover { background:#fef2f2; color:#dc2626; border-color:#fecaca !important; }
body.dark .task--expanded .task__tl-entry:not(.task__tl-entry--editing) .task__tl-text:hover {
  background:#2a2d3a;
}
body.dark .task__tl-edit-input {
  background:var(--surface);
  color:var(--text);
  border-color:var(--purple);
}
body.dark .task__tl-edit-save,
body.dark .task__tl-edit-cancel,
body.dark .task__tl-edit-delete {
  border-color:#3d3d55 !important;
  color:#64748b;
}
body.dark .task__tl-edit-save:hover { background:#1e2340; color:var(--purple); border-color:#4a5180 !important; }
body.dark .task__tl-edit-cancel:hover { background:#2a2d3a; color:var(--text); }
body.dark .task__tl-edit-delete:hover { background:#2d1515; color:#f87171; border-color:#7f1d1d !important; }

/* -- Task options dropdown -- */
.task__tags { position:relative; }
.task__dropdown {
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  background:var(--white);
  border:1px solid #e2e8f0;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  min-width:145px;
  z-index:50;
  overflow:hidden;
  display:none;
}
.task__dropdown.open { display:block; }
.task__dropdown button {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  background:transparent;
  border:none;
  padding:.55rem .9rem;
  font-size:12.5px;
  font-family:inherit;
  font-weight:500;
  color:#374151;
  cursor:pointer;
  text-align:left;
  transition:background .12s;
}
.task__dropdown button:hover { background:#f1f5f9; }
.task__dropdown button.danger { color:#DC2626; }
.task__dropdown button.danger:hover { background:#FEE2E2; }
.task__dropdown button i { width:13px; text-align:center; opacity:.75; }

/* inline edit mode */
.task__edit-wrap {
  margin:.4rem 0 .3rem;
  background:#fff;
  border:1.5px solid #e5e7eb;
  border-radius:10px;
  padding:8px 10px;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.task__edit-wrap__title {
  font-size:10px;
  font-weight:600;
  color:#9ca3af;
  text-transform:uppercase;
  letter-spacing:.6px;
  padding:0 2px 6px;
}
.task__edit-input {
  width:100%;
  border:1.5px solid #e2e8f0;
  border-radius:7px;
  padding:5px 9px;
  font-size:13px;
  font-weight:500;
  font-family:inherit;
  resize:none;
  outline:none;
  box-sizing:border-box;
  color:#111827;
  background:#f8fafc;
  transition:border-color .15s;
}
.task__edit-input:focus { border-color:var(--purple); background:#fff; }
.task__edit-actions {
  display:flex;
  gap:6px;
  justify-content:flex-end;
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid #f0f1f6;
}
.task__edit-actions button {
  padding:4px 14px;
  border-radius:7px;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  border:none;
  font-family:inherit;
  transition:opacity .13s, background .13s;
}
.task__edit-save   { background:var(--purple-gradient); color:#fff; }
.task__edit-cancel { background:#f0f1f6; color:var(--text); }
.task__edit-tag-select {
  width:100%;
  margin-bottom:6px;
}
/* -- Custom tag picker (modal + edit) -- */
.tag-picker {
  position:relative;
  width:100%;
  box-sizing:border-box;
}
.tag-picker__trigger {
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border:1.5px solid #e5e7eb;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  font-size:13px;
  font-family:inherit;
  color:#111827;
  text-align:left;
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
  height:38px;
}
.tag-picker__trigger:focus,
.tag-picker__trigger.open {
  border-color:#4a1a6b;
  box-shadow:0 0 0 3px rgba(74,26,107,.12);
  outline:none;
}
.tag-picker__label { flex:1; }
.tag-picker__arrow {
  font-size:10px;
  color:#9ca3af;
  transition:transform .15s;
}
.tag-picker__trigger.open .tag-picker__arrow { transform:rotate(180deg); }
.tag-picker__dropdown {
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  background:#fff;
  border:1.5px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
  padding:10px;
  z-index:900;
}
.tag-picker__dropdown.open { display:block; }
.tag-picker__list {
  max-height:180px;
  overflow-y:auto;
}
.tag-picker__row-item { cursor:pointer; }
.tag-picker__row-item--active { background:#f0f1ff; }
.tag-picker__row-item--active .tags-label { color:var(--purple); font-weight:600; }
/* Themes side-panel anchored to tag-picker, aligned with its dropdown */
.tag-picker .tags-themes {
  top: calc(100% + 4px);
  z-index: 910;
}

/* -- Board title options -- */
.board-title-wrap {
  display:flex;
  align-items:center;
  gap:.3rem;
}
.board-title-wrap h1 { margin:0; }
.board-options-wrap {
  position:relative;
  display:flex;
  align-items:center;
  margin-left:auto;
}
.board-dropdown {
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  background:var(--white);
  border:1px solid #e0e6ef;
  border-radius:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
  min-width:170px;
  z-index:100;
  overflow:hidden;
  display:none;
}
.board-dropdown.open { display:block; }
.board-dropdown button {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  background:transparent;
  border:none;
  padding:.5rem .85rem;
  font-size:12px;
  font-family:inherit;
  color:var(--text);
  cursor:pointer;
  text-align:left;
}
.board-dropdown button:hover { background:#EDF1FD; }
.board-dropdown button.danger { color:#DC2626; }
.board-dropdown button.danger:hover { background:#FEE2E2; }
.board-dropdown button i { width:13px; text-align:center; }
.board-dropdown__divider { height:1px; background:#f1f5f9; margin:3px 0; }
.board-dropdown button.fav-active { color:#dd6f1a; }
.board-dropdown button.fav-active i { color:#dd6f1a; }
.board-dropdown button.fav-active:hover { background:#fff7ed; }

/* -- Column heading dropdown -- */
.project-column-heading { position:relative; }
.col-dropdown {
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  background:var(--white);
  border:1px solid #e0e6ef;
  border-radius:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
  min-width:170px;
  z-index:60;
  overflow:hidden;
  display:none;
}
.col-dropdown.open { display:block; }
.col-dropdown button {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  background:transparent;
  border:none;
  padding:.5rem .85rem;
  font-size:12px;
  font-family:inherit;
  color:var(--text);
  cursor:pointer;
  text-align:left;
}
.col-dropdown button:hover { background:#EDF1FD; }
.col-dropdown button.danger { color:#DC2626; }
.col-dropdown button.danger:hover { background:#FEE2E2; }
.col-dropdown button i { width:13px; text-align:center; }
.nav-rename-input {
  border:1px solid var(--purple);
  border-radius:4px;
  padding:.1rem .4rem;
  font-size:13px;
  font-family:inherit;
  font-weight:600;
  color:var(--text);
  outline:none;
  width:100%;
  min-width:0;
  background:var(--white);
}
.col-rename-input {
  border:1px solid var(--purple);
  border-radius:4px;
  padding:.1rem .35rem;
  font-size:16px;
  font-family:inherit;
  font-weight:600;
  color:var(--text);
  outline:none;
  width:100%;
  min-width:0;
}
.project-info h1 {
  font-size:14px;
  cursor:text;
}
.board-title-input {
  border:none;
  border-bottom:2px solid var(--purple);
  background:transparent;
  font-size:inherit;
  font-family:inherit;
  font-weight:inherit;
  color:inherit;
  outline:none;
  padding:0;
  width:auto;
  min-width:8ch;
  max-width:40ch;
}

/* -- Archive column -- */
.project-column--archive {
  display:none;
  background:rgba(0,0,0,.03);
  border-radius:8px;
  padding:.5rem .75rem;
  opacity:.85;
}
.project-tasks.show-archive {
  grid-template-columns:repeat(5,1fr);
}
.project-tasks.show-archive .project-column--archive {
  display:block;
}
.btn-archive {
  background:transparent;
  border:1px solid #d9e0e9;
  border-radius:6px;
  padding:.3rem .8rem;
  font-size:12px;
  font-family:inherit;
  cursor:pointer;
  color:var(--text);
  margin-left:.75rem;
  transition:background .15s, border-color .15s, color .15s;
}
.btn-archive:hover, .btn-archive.active {
  background:var(--purple-gradient);
  color:#fff;
  border-color:var(--purple);
}

/* -- Save toast -- */
.save-toast {
  position:fixed;
  bottom:5.5rem;
  right:2rem;
  background:var(--purple-gradient);
  color:#fff;
  padding:.4rem 1rem;
  border-radius:6px;
  font-size:12px;
  font-family:inherit;
  opacity:0;
  transition:opacity .3s;
  z-index:300;
  pointer-events:none;
}
.save-toast.show { opacity:1; }

/* -- Login overlay -- */
.login-overlay {
  position:fixed;
  inset:0;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  transition:opacity .3s;
}
.login-overlay.hidden {
  opacity:0;
  pointer-events:none;
}
.login-card {
  background:var(--white);
  border-radius:16px;
  padding:2.5rem 2rem;
  width:100%;
  max-width:360px;
  box-shadow:0 8px 40px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  text-align:center;
}
.login-card__logo {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.25rem;
}
.login-card__logo i { color:#fff; font-size:22px; }
.login-card h2 { font-size:20px; margin:0; }
.login-card p { font-size:13px; color:rgb(130,130,130); margin:0; }
.btn-google {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  width:100%;
  padding:.7rem 1rem;
  border:1px solid #d9e0e9;
  border-radius:8px;
  background:var(--white);
  font-size:14px;
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  color:var(--text);
  transition:box-shadow .15s, border-color .15s;
  margin-top:.5rem;
}
.btn-google:hover {
  border-color:#7aaad8;
  box-shadow:0 2px 8px rgba(26,86,232,.10);
}
.btn-google img { width:20px; height:20px; }

/* Microsoft sign-in button */
.btn-microsoft {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  width:100%;
  padding:.7rem 1rem;
  border:1px solid #d9e0e9;
  border-radius:8px;
  background:var(--white);
  font-size:14px;
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  color:var(--text);
  transition:box-shadow .15s, border-color .15s;
}
.btn-microsoft:hover {
  border-color:#7aaad8;
  box-shadow:0 2px 8px rgba(26,86,232,.10);
}
.btn-microsoft svg { flex-shrink:0; }

/* Divider */
.login-divider {
  width:100%;
  display:flex;
  align-items:center;
  gap:.75rem;
  color:var(--light-grey);
  font-size:11px;
}
.login-divider::before,
.login-divider::after {
  content:'';
  flex:1;
  height:1px;
  background:#e5e9f0;
}

/* Email / password form */
.login-form {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.login-form form {
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.login-input {
  width:100%;
  border:1px solid #d9e0e9;
  border-radius:8px;
  padding:.65rem .85rem;
  font-size:13px;
  font-family:inherit;
  color:var(--text);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  background:var(--white);
}
.login-input:focus {
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(26,86,232,.15);
}
.btn-email-action {
  width:100%;
  padding:9px 0;
  border:none;
  border-radius:8px;
  background:linear-gradient(135deg,#4a1a6b 0%,#2d1052 100%);
  color:#fff;
  font-size:13px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:opacity .15s, box-shadow .15s;
  box-shadow:0 2px 10px rgba(74,26,107,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:.2rem;
}
.btn-email-action:hover { opacity:.9; box-shadow:0 4px 18px rgba(149,64,165,.45); }
.login-switch {
  font-size:12px;
  color:var(--light-grey);
  text-align:center;
  margin:0;
}
.login-switch__btn {
  background:none;
  border:none;
  color:var(--purple);
  font-size:12px;
  font-family:inherit;
  cursor:pointer;
  padding:0;
  font-weight:500;
}
.login-switch__btn:hover { text-decoration:underline; }
.login-error { font-size:12px; color:#DC2626; min-height:16px; text-align:center; }

html, body { height:100%; }
.app-shell {
  display:flex;
  height:100%;
  min-height:100vh;
  flex-direction:column;
}

/* -- Content area -- */
.app-content {
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
}
.app-content .app {
  flex:1;
  overflow:hidden;
  display:flex;
  min-width:0;
}


/* -- Modal todo list -- */
.modal-todo-wrap {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.modal-todo-list {
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:130px;
  overflow-y:auto;
}
.modal-todo-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 8px;
  border-radius:7px;
  background:#f8f9fc;
  border:1px solid #eef0f6;
  font-size:12.5px;
  color:#374151;
}
.modal-todo-item input[type=checkbox] {
  flex-shrink:0;
  width:14px;
  height:14px;
  accent-color:#4a1a6b;
  cursor:pointer;
}
.modal-todo-item span {
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.modal-todo-item__del {
  background:transparent;
  border:none;
  cursor:pointer;
  color:#c4c9d4;
  font-size:10px;
  padding:0 2px;
  display:flex;
  align-items:center;
  transition:color .12s;
  flex-shrink:0;
}
.modal-todo-item__del:hover { color:#ef4444; }
.modal-todo-input-row {
  display:flex;
  gap:6px;
}
.modal-todo-input {
  flex:1;
  border:1.5px solid #e5e7eb;
  border-radius:8px;
  padding:7px 11px;
  font-size:12.5px;
  font-family:inherit;
  outline:none;
  color:#374151;
  transition:border-color .15s, box-shadow .15s;
}
.modal-todo-input:focus {
  border-color:#4a1a6b;
  box-shadow:0 0 0 3px rgba(74,26,107,.12);
}
.modal-todo-add-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:none;
  background:linear-gradient(135deg,#4a1a6b,#2d1052);
  color:#fff;
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
  flex-shrink:0;
  transition:opacity .15s;
  box-shadow:0 2px 8px rgba(149,64,165,.25);
}
.modal-todo-add-btn:hover { opacity:.85; }

/* -- Card todo list -- */
.task__todos {
  margin:.4rem 0 .3rem;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.task__todo-item {
  display:flex;
  align-items:flex-start;
  gap:6px;
  font-size:12.5px;
  color:#374151;
  cursor:pointer;
  user-select:none;
  line-height:1.5;
}
.task__todo-cb {
  margin-top:3px;
  flex-shrink:0;
  width:13px;
  height:13px;
  accent-color:var(--purple);
  cursor:pointer;
}
.task__todo-text { flex:1; }
.task__todo-text--done {
  text-decoration:line-through;
  color:#94a3b8;
}
.task__todos-progress {
  font-size:10.5px;
  color:#94a3b8;
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:6px;
  padding-right:4px;
}
.task__todos-bar {
  flex:1;
  height:3px;
  background:#e2e8f0;
  border-radius:2px;
  overflow:hidden;
}
.task__todos-bar-fill {
  height:100%;
  background:var(--purple-gradient);
  border-radius:2px;
  transition:width .2s;
}

/* -- Card link -- */
.task__link {
  margin:.3rem 0 .2rem;
}

/* -- Card meta (deadline + assignee) -- */
.task__meta {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:.3rem 0 .2rem;
}
.task__deadline {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:500;
  padding:2px 7px;
  border-radius:20px;
  color:#6366f1;
  background:#eef0ff;
}
.task__deadline--overdue {
  color:#dc2626;
  background:#fef2f2;
}
.task__deadline i { font-size:9px; flex-shrink:0; }
.task__assignee {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:500;
  padding:2px 7px;
  border-radius:20px;
  color:#059669;
  background:#ecfdf5;
}
.task__deadline i, .task__assignee i { font-size:9px; flex-shrink:0; }
.task__link a {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:500;
  color:var(--purple);
  text-decoration:none;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  background:#f0f4ff;
  padding:2px 8px;
  border-radius:20px;
  transition:background .13s;
}
.task__link a:hover { background:#e0e8ff; text-decoration:none; }
.task__link a i { font-size:10px; flex-shrink:0; }