/*Tasks css*/
.pm-card {background: var(--surface);border-radius: var(--radius);padding: 16px;}
.pm-card-title { font-size: 20px; font-weight: 700; margin: 0; }
.pm-card-header { display:flex; align-items:center; justify-content: space-between; margin-bottom: 12px; }
.pm-actions { display:flex; justify-content: flex-start; margin-top: 8px; gap: 5px;}
.pm-list {list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction: column;gap: 8px;}
.pm-pill button { background: transparent; border: none; cursor: pointer; color: var(--text-muted); }
.pm-tags { display:flex; gap: 8px; flex-wrap: wrap; min-height: 34px; }
.pm-cards {display: grid;grid-template-columns: repeat(3, 1fr);gap: 15px 15px;padding: 5px 10px;height: 72vh;overflow: auto;scrollbar-width: none;padding-left: 0;}
.pm-cardx {min-width: 200px;background: linear-gradient(
226deg, var(--primary-dark), transparent);border-radius: 20px;padding: 10px;display:flex;box-shadow: var(--shadow);flex-direction: column;gap: 10px;}
.tm-cols { display:grid; grid-template-columns: 100px 160px 140px 1fr 2fr 120px; gap:8px; align-items:center; }

.pm-board-head {position:sticky;top:0;background:var(--surface);z-index:1;padding-bottom:6px;text-align: center;border-radius: 20px;}
.pm-col-h { font-size:12px; color:var(--text-muted); }
.pm-col-h--w { grid-column: 5; } /* visually align label with Title col */

.pm-rows { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.pm-row  { border:1px solid var(--muted); border-radius:10px; padding:10px; background:var(--bg); }
.pm-row-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }

.pm-col input { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--muted); border-radius:8px; padding:6px; }
.pm-caret { border:1px solid var(--muted); background:transparent; border-radius:8px; padding:2px 6px; cursor:pointer; }
.pm-empty { color:var(--text-muted); padding:6px 0; }
.pm-empty.sm { font-size:12px; }

/* --- Glow on Done (tasks & subtasks) --- */
.pm-row.is-done {
  outline: 2px solid rgba(16,185,129,.45);  /* emerald-500-ish */
  box-shadow: 0 0 0 2px rgba(16,185,129,.30), 0 0 18px rgba(16,185,129,.35);
  border-radius: 12px;
}
.pm-row.is-done .pm-title span { text-decoration: line-through; opacity:.85; }

/* small chips for delegates */
#pmDelegatesChips .pm-pill {
  background:#0b1020; border:1px solid #334155;
}

/* tiny helper for “Tasks” btn alignment on cards */
.pm-cardx .pm-actions { display:flex; gap:8px; justify-content:flex-end; }
/* --- Status glow variants for tasks/subtasks --- */
.pm-row[data-status] { border-radius: 10px; transition: box-shadow .2s ease, background-color .2s ease; }
.pm-row.status-todo,
.pm-row.status-notstarted  { box-shadow: 0 0 0 1px rgba(148,163,184,.55), 0 0 12px rgba(148,163,184,.342) inset;}
.pm-row.status-inprogress  { box-shadow: 0 0 0 1px var(--primary-light), 0 0 12px var(--primary-light) inset; }
.pm-row.status-blocked,
.pm-row.status-pause       { box-shadow: 0 0 0 1px rgba(239,68,68,.35), 0 0 12px rgba(239,68,68,.22) inset; }
.pm-row.status-done        { box-shadow: 0 0 0 1px var(--primary-dark), 0 0 12px var(--primary-dark) inset; filter: saturate(1.08); }

/* Subtle text glow on titles by status */
.pm-sub.is-done span,
.pm-row.status-todo .pm-title span,
.pm-row.status-notstarted .pm-title span { text-shadow: 0 0 6px rgba(240, 172, 45, 0.55); }
.pm-row.status-blocked .pm-title span,
.pm-row.status-pause .pm-title span     { text-shadow: 0 0 6px rgba(239,68,68,.65); }
.pm-row.status-done .pm-title span { text-shadow: 0 0 6px var(--primary-dark); }
.pm-row.status-inprogress .pm-title span { text-shadow: 0 0 6px var(--primary-light); }

.pm-row-actions { display:flex; gap:8px; justify-content:flex-end; }


.pm-row .pm-row-body { margin-top: 8px; }
.pm-row[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,.15) inset; }
/* Rebuilt PM pages (Projects, Delegate, Group & Organize) */
/* Step indicators (chips) */
.wizard-viewport{position:relative;overflow:hidden;transition:height .28s ease;}
.wizard-track{display:flex;will-change:transform;transition:transform .35s ease;}
.wizard-panel{flex:0 0 100%;}
@media (prefers-reduced-motion:reduce){
.wizard-viewport{transition:none}
.wizard-track{transition:none}
}
/* --- NEW STYLES FOR CHIPS --- */
.pm-list.chips {display:flex; flex-wrap:wrap; gap:2px; flex-direction:row; padding:0;}
.pm-chip.round { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background-color: #e2e8f0; color: #475569; font-weight: 500; cursor: default; }
.pm-chip.round .remove-chip { display: none; position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; border: none; background-color: rgba(0,0,0,0.5); color: white; font-size: 18px; cursor: pointer; }
.pm-chip.round:hover .remove-chip { display: flex; align-items: center; justify-content: center; }

.wizard-steps ol {display:flex;gap:.75rem;list-style:none;padding:0;margin: 0 0 .51rem;}
.wizard-steps li {
  padding: .25rem .5rem;
  border:1px solid var(--border, #dcdcdc);
  border-radius:999px;
  font-size: .8rem;
  color: var(--text-muted);
  opacity:.6;
}
.wizard-steps li.is-active { opacity:1; border: 2px solid var(--primary); }
.wizard-steps li.is-done   { opacity:.9; }

/* Slider (the JS also injects a minimal fallback) */
.wizard-viewport { position:relative; overflow:hidden; transition:height .28s ease; }
.wizard-track    { display:flex; will-change:transform; transition:transform .35s ease; }
.wizard-panel    {flex:0 0 100%;padding: 0 5px;}
.pm-group{display:flex;flex-direction: column;gap: 10px;}
.pm-creator {display:flex;flex-direction: column;gap: 6px;margin-bottom: 10px;}
.pm-field{display: grid;grid-template-columns: repeat(2, 1fr);gap: 5px;}
/* Actions row */
.wizard-actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:1rem; }

.pm-grid {display:grid;grid-template-columns: 1fr;scrollbar-width: none;transition: grid-template-columns .5s ease;}
@media (max-width: 980px) { .pm-grid { grid-template-columns: 1fr; } }
.pm-card--wide {grid-column: span 2;border-radius: 20px;padding: 10px;padding-bottom: 2px;background: var(--surface);}
.pm-card--wide.ubp{height: 91vh;overflow: auto;scrollbar-color: var(--primary-faded) transparent;scrollbar-width: thin;padding-bottom: 5px;}
.pm-card-title { font-size: 20px; font-weight: 700; margin: 0; }
.scrolling-text-wrapper {width: 110px;overflow: hidden;height: 18px}
.scrolling-content {font-weight: bold;white-space:nowrap;/* text-overflow: ellipsis; *//* text-wrap-mode: nowrap; */padding: 0px 5px;display: inline-block;}
.scrolling-content:hover {font-weight: bold;white-space:nowrap;padding: 0px 5px;animation: auto-scroll 2s linear infinite alternate;display: inline-block}
@keyframes auto-scroll {
  0%{transform: translateX(0)}
  100%{transform: translateX(calc(-100% + 100px))}
}
.pm-card-header { display:flex; align-items:center; justify-content: space-between; margin-bottom: 12px; }
.pm-field>span, .pm-creator>span { color: var(--text-muted); font-size: 12px; letter-spacing: .01em; }
.pm-form input, .pm-form textarea, .pm-share input, .pm-share select, .pm-group select {background: var(--bg);color: var(--text);border-radius: 8px;padding: 6px 7px;scrollbar-width: thin;border: 1px solid var(--muted);outline: none;}
.pm-form textarea { resize: vertical; }
.pm-actions { display:flex; justify-content: flex-start; margin-top: 8px; gap: 5px;}
.pm-invite-row { display:flex; gap: 8px; }
.pm-list {list-style:none;padding:0;margin: 0;display:flex;flex-direction: column;gap: 8px;}
.pm-pill {display:inline-flex;align-items:center;padding: 2px 6px;border-radius: 999px;background: #1e293b;font-size: 12px;justify-content: space-between;}
.pm-pill button { background: transparent; border: none; cursor: pointer; color: var(--text-muted); }
.pm-tags { display:flex; gap: 8px; flex-wrap: wrap; min-height: 34px; }
.pm-tag-input input { width: 100%; background: var(--bg); border: 1px solid var(--muted); border-radius: 8px; padding: 8px 10px; }
.pm-meta { color: var(--text-muted); font-size: 12px; display:flex; align-items:center; justify-content: space-between; }
.pm-progress {height: 6px;border-radius: 999px;background: var(--primary-faded);overflow: hidden;}
.pm-progress > i {display:block;height: 100%;width: var(--w,0%);background: var(--primary);}
.btn { cursor:pointer; }
.btn {
    background: linear-gradient(0deg, var(--primary) -50%, var(--primary-faded));
    color: var(
    --text);
    border-radius: 15px;
    font-size: 12px;
    height: 25px !important;
    padding: 0px 10px;
    cursor: pointer;
    border: none;
    background: var(--primary-faded);
    /* box-shadow: inset 0 0 4px .1px; */
}
.btn:disabled { opacity: .6; cursor: default; }
.icon-btn.sm {border: 1px solid var(--primary-faded);color: var(--text)}
.icon-btn.sm:hover {border: 2px solid var(--primary)}
#pmProjectDialog.sheet[open] {transform: none;overflow: hidden;max-height: 85vh;width: 35vw;}

/* --- Project Details Panel --- */
.pm-details       { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.pm-detail-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.pm-detail-title  { font-size:22px; margin:0; }
.pm-detail-meta   { color:var(--text-muted); display:flex; gap:12px; font-size:12px; margin-top:4px; flex-wrap:wrap; }
.pm-detail-actions{display:flex;gap:8px;max-width: 350px;flex-wrap: wrap;justify-content: end;}

.pm-split { display:grid; grid-template-columns: 280px 1fr; gap:16px; margin-top: 10px; }
@media (max-width: 980px){ .pm-split { grid-template-columns: 1fr; } }

.pm-side { display:grid; gap:12px; align-content:start; }
.pm-widgets { display:grid; grid-template-columns: repeat(2,minmax(120px,1fr)); gap:12px; }
.pm-widget  { background:var(--bg); border:1px solid var(--muted); border-radius:12px; padding:12px; text-align:center; }
.pm-w-num   { font-size:28px; font-weight:700; line-height:1.1; }
.pm-w-label { font-size:12px; color:var(--text-muted); }
.pm-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px }

.pm-board-head { position:sticky; top:0; background:var(--surface); z-index:1; padding-bottom:6px; }
.pm-cols {display:grid;grid-template-columns: repeat(4, 1fr);gap:8px;align-items: center;}
.pm-col-h { font-size:12px; color:var(--text-muted); }
.pm-col-h--w { grid-column: 5; } /* visually align label with Title col */

.pm-rows { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.pro-rows {display:flex;flex-direction:column;gap:8px;margin-top: -5px;overflow: hidden;overflow-y: scroll;padding: 7px;padding-right: 2px;max-height: 50vh;scrollbar-width: thin;scrollbar-color: var(--primary-faded) transparent;}
.pm-row  { border:1px solid var(--muted); border-radius:10px; padding:10px; background:var(--bg); }
.pm-row-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }

.pm-col select { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--muted); border-radius:8px; padding: 6px; }
.pm-col input { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--muted); border-radius:8px; padding:6px; }
.pm-files {font-size:12px;color:var(--text-muted);display: flex;flex-wrap: wrap;gap: 3px;}
.pm-filelist{display: flex;}
.pm-title { display:flex; align-items:center; gap:8px; }
.pm-caret { border:1px solid var(--muted); background:transparent; border-radius:8px; padding:2px 6px; cursor:pointer; }
.pm-subwrap { display:grid; gap:6px; justify-content: start; }
.pm-sub { display:flex; align-items:center; gap:8px; font-size:13px; }
.pm-empty { color:var(--text-muted); padding:6px 0; }
.pm-empty.sm { font-size:12px; }

.pm-updates { margin-top:14px; }
.pm-upd-editor { display:flex; gap:8px; margin:8px 0; }
.pm-upd-editor input { flex:1; border:1px solid var(--muted); border-radius:8px; padding:8px 10px; background:var(--bg); color:var(--text); }
.pm-upd-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.pm-upd { background:var(--bg); border:1px solid var(--muted); border-radius:10px; padding:10px; }
.pm-upd-meta { font-size:11px; color:var(--text-muted); margin-bottom:4px; }
.pm-sendlist { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); }
#pmInviteSendDialog.sheet { top: 50%}

/* --- Glow on Done (tasks & subtasks) --- */
.pm-row.is-done {
  outline: 2px solid rgba(16,185,129,.45);  /* emerald-500-ish */
  box-shadow: 0 0 0 2px rgba(16,185,129,.30), 0 0 18px rgba(16,185,129,.35);
  border-radius: 12px;
}
.pm-row.is-done .pm-title span { text-decoration: line-through; opacity:.85; }

.pm-sub input:checked + span {
  text-shadow: 0 0 6px rgba(16,185,129,.35);
}

/* small chips for delegates */
#pmDelegatesChips .pm-pill {
  background:#0b1020; border:1px solid #334155;
}

/* tiny helper for “Tasks” btn alignment on cards */
.pm-cardx .pm-actions { display:flex; gap:8px; justify-content:flex-end; }
/* --- Status glow variants for tasks/subtasks --- */
.pm-row[data-status] { border-radius: 10px; transition: box-shadow .2s ease, background-color .2s ease; }
.pm-row.status-todo        { box-shadow: 0 0 0 1px rgba(148,163,184,.55), 0 0 12px rgba(148,163,184,.342) inset;}
.pm-row.status-inprogress  { box-shadow: 0 0 0 1px var(--primary-light), 0 0 12px var(--primary-light) inset; }
.pm-row.status-paused       { box-shadow: 0 0 0 1px rgba(239,68,68,.35), 0 0 12px rgba(239,68,68,.22) inset; }
.pm-row.status-done        { box-shadow: 0 0 0 1px var(--primary-dark), 0 0 12px var(--primary-dark) inset; filter: saturate(1.08); }

/* Subtle text glow on titles by status */
.pm-sub.is-done span,
.pm-row.status-todo .pm-title span { text-shadow: 0 0 6px rgba(240, 172, 45, 0.55); }
.pm-row.status-pause .pm-title span { text-shadow: 0 0 6px rgba(239,68,68,.65); }
.pm-row.status-done .pm-title span { text-shadow: 0 0 6px var(--primary-dark); }
.pm-row.status-inprogress .pm-title span { text-shadow: 0 0 6px var(--primary-light); }

/* Multi-assignee control */
select[data-col="assignees"] { background: var(--surface, #0b1220); border:1px solid var(--border, #334155); border-radius: 8px; padding: 6px; color: var(--text, #e5e7eb); }
select[data-col="assignees"] option { padding: 4px 8px; }

.pm-row-actions { display:flex; gap:8px; justify-content:flex-end; }
.file-attachment .file-actions {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  gap: 5px;
  backdrop-filter:brightness(0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.file-attachment:hover .file-actions {
  visibility: visible;
  opacity: 1;
  transition: opacity .4s ease;
}
#ubpWaterfall .watrfall-segment{
  width: 14px;
  margin: 0 auto;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  transition: height .2s ease;
}

/* flip-to-edit card */
#pmProjectDetailWrap{
  perspective: 1200px;
}
#pmProjectDetail{
  position:relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform .5s ease-in;
}
#pmProjectDetail .ubp-back{
  position:absolute;
  inset:0;
  margin: -10px;
  margin-bottom: -6px;
  padding: 5px;
  height: fit-content;
  border-radius: 15px;
  scrollbar-width: none;
  backface-visibility:hidden;
  transform: rotateY(180deg);
  transition: transform .5s ease-in;
  backdrop-filter: var(--backdrop-2);
}
#pmProjectDetailWrap.is-editing #pmProjectDetail{
  transform: rotateY(180deg);
  transition: transform .5s ease-in;
}

/* --- Donut tooltip --- */
#pmTip {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  display: none;
  padding: 5px 5px;
  border-radius: 10px;
  font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* --- Sub‑task toggle button --- */
.pm-subtoggle {
  background: transparent;
  border: 1px solid var(--border, #334155);
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  cursor: pointer;
}
select, input[type="date"] {
  outline: none;
  border: 1px solid var(--dots); /* Subtle border */
  color: var(--text);
  background: var(--primary-faded);
  padding: 2px 4px 2px 5px;
  border-radius: 10px;
  font-size: .65rem;
  font-weight: bold;
  cursor: pointer;
  min-width: 110px; /* Give it some width */
  scrollbar-width: thin;
}
select:focus(:-internal-list-box){border-radius:10px}
select:focus, input[type="date"]:active {
  border: 1px solid var(--primary);
  background: var(--primary-faded);
}
/* --- All Tasks grid --- */
.tasks-grid { width: 100%; display: grid; grid-auto-rows: minmax(44px, auto); gap: 6px; }
.tg-row { display: grid; grid-template-columns: 1.2fr 2fr 1fr 1.6fr 1fr 1.6fr 1fr; gap: 8px; align-items: center; padding: 8px; border: 1px solid rgba(148,163,184,.25); border-radius: 12px; background: linear-gradient(180deg, rgba(15,23,42,.85), rgba(2,6,23,.7)); }
.tg-head { font-weight: 600; background: transparent; border: none; }
.tg-col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; }
.tg-filters input[type="search"] { flex: 1 1 240px; }

.tg-sublist { margin-top: 8px; padding: 8px; border: 1px dashed rgba(148,163,184,.25); border-radius: 10px; background: rgba(2,6,23,.35); }
.tg-sub { display: grid; grid-template-columns: 20px 1.4fr 1fr 1.2fr 28px; gap: 8px; align-items: center; margin-bottom: 6px; }
.tg-sub:last-child { margin-bottom: 0; }
.tg-sub-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-sub-del { background: transparent; border: 1px solid var(--border, #334155); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; }

.tg-actions .btn, .tg-sub-add .btn { padding: 4px 8px; }
/* status dot for sub-task modal */
.dot { font-size: 14px; line-height: 1; vertical-align: middle; color: var(--text-muted); }
.dot.ok { color: var(--success); }
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.modal-content {
  background-color: var(--surface);
  padding: 15px 20px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transform: scale(0.9);
  transition: transform 0.2s ease-in-out;
}

.modal-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.modal-buttons button {
  padding: 10px 20px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  font-weight: bold;
}

.modal-confirm-btn {
    background-color: #dc3545;
    color: white;
}

.modal-cancel-btn {
    background-color: #f0f0f0;
    color: #333;
}


/* ============= Project Module (merged PM + Tasks) ============= */

:root {
  --ubp-border: rgba(148,163,184,.25);
  --ubp-bg: var(--bg, #0b1020);
  --ubp-panel: var(--surface, #0f172a);
  --ubp-text: var(--text, #e5e7eb);
  --ubp-muted: var(--text-muted, #94a3b8);
  /* keep donut colors identical to your original */
  --chart-todo:#94a3b8; --chart-inprog:#60a5fa; --chart-blocked:#ef4444; --chart-done:#22c55e;
}

/* ---------- host panels ---------- */
.ubp-detail { display:flex; flex-direction:column; gap:12px; }
.ubp-head {display:flex;align-items:flex-start;justify-content:space-between;}
.ubp-title {margin:0;font-size: 21px;text-transform: capitalize;}
.ubp-meta {display:flex;gap:12px;background: var(--muted);padding: 1px 10px;border-radius: 10px;color:var(--ubp-muted);font-size:12px;flex-wrap:wrap;}
.ubp-head-actions { display:flex; gap:8px; flex-wrap:wrap; }
.ubp-btn {
  background: linear-gradient(0deg, var(--primary) -50%, var(--primary-faded, rgba(7,207,193,0.2)));
  color: var(--ubp-text);
  border: 0;
  border-radius: 20px;
  padding: 6px 10px;
  cursor: pointer;
}
.ubp-btn.ghost { background: transparent; border:1px solid var(--ubp-border); }
.ubp-donut-center{
    display: flex;
    position: absolute;
    margin-top: 75px;
    margin-left: 35px;
    gap: 5px;
    pointer-events: none;
}
/* ---------- tabs ---------- */
.ubp-tabs {display:flex;gap:6px;}
.ubp-tab {
  background:transparent;
  border:1px solid var(--ubp-border);
  margin-bottom: 4px;
  padding: 5px 10px;
  cursor:pointer;
  border-radius: 15px;
  color:var(--ubp-text);
  opacity:.85;
  transition: background .8s ease;
}
#ubpChatMessages .sender-strip{display:flex}
.ubp-tab.is-active {background: var(--primary-light);color: #000;opacity:1;transition: background 0.8s ease;}
.ubp-panel {background: transparent;border:1px solid var(--ubp-border);border-radius:12px;padding: 12px;position:relative;}
.ubp-edit-header{display:flex;position: sticky;top: -5px;justify-content: space-between;background: var(--bg);border-radius: 10px;padding: 0 10px;align-items: center;}
.ubp-edit{margin: 0;}
.ubp-edit-body{display: grid;grid-template-columns: 1fr 1fr;gap: 5px;}
.t-header{justify-content:space-between;align-items:center;display:flex;gap:8px;}
.t-body{display:flex;flex-direction:column;gap:8px;width: 25vw;}
.t-label{display:flex;align-items: flex-start;gap:8px;}
.cols2{display:grid;/* grid-template-columns: 1fr 1fr; */gap: 10px;}
.t-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;}
/* ---------- overview grid (2fr:1fr, no overflow) ---------- */
.ubp-overview-grid { display:grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap:12px; align-items:start; }
@media (max-width: 1040px){ .ubp-overview-grid { grid-template-columns: 1fr; } }

/* Status mix: donut + four quick metrics rows */
.ubp-status-mix {display:grid;grid-template-columns: 1fr 250px;gap: 5px;align-items: start;height: 26vh;}
.ubp-quick {display:grid;grid-template-rows: repeat(4, minmax(36px,auto));gap: 3px;}
.ubp-quick-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--ubp-border);
  border-radius: 20px;
  padding: 0px 8px;
  background: var(--ubp-bg);
  }

/* Weekly */
.ubp-weekly-wrap {border:1px dashed var(--ubp-border);border-radius:12px;padding:10px;padding-top: 2px;height: 33vh;}
.ubp-weekly-head {display:flex;align-items:center;justify-content:space-between;height: 5vh;margin-bottom:6px;}
.ubp-icon { background:transparent; border:1px solid var(--ubp-border); border-radius:7px; width:22px; height:22px; cursor:pointer; }
.ubp-empty { color:var(--ubp-muted); font-size:12px; }

/* ---------- chat (middle-only, reuses chat.css bubbles) ---------- */
.ubp-chat {
  display:flex;
  flex-direction:column;
  height: 63.6vh;
  border:1px solid var(--ubp-border);
  border-radius:12px;
  overflow:hidden;
  background: var(--ubp-panel);
}
.ubp-chat-feed {flex:1;overflow:auto;padding:10px 12px;display:flex;margin: 0;flex-direction: column;gap:8px;height: 19vh;overflow: auto;scrollbar-width: thin;}
.ubp-chat-composer {display:flex;gap:8px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;padding: 5px;align-items: center;background: var(--surface);}
.ubp-chat-composer input {flex:1;background:var(--bg);color:var(--ubp-text);border:1px solid var(--ubp-border);border-radius: 10px;padding:8px 10px;max-width: 20vw;height: 25px;}
.pm-due{ background:var(--surface); padding:2px 4px; border-radius:15px; border:var(--line); font-size:10px; font-weight:600;}
/* file-announce bubbles (hover overlay with actions) */
.msg .bubble.file-announce {position:relative;background: linear-gradient(45deg,var(--primary-faded), black);padding: 5px;border-radius: 10px;max-width: 20vw;overflow: clip;display: flex;flex-direction: column;}
.msg .bubble.file-announce .actions { position:absolute; inset:0; display:none; place-items:center;
  background:rgba(15,23,42,.6); border-radius:8px; }
.msg .bubble.file-announce:hover .actions { display:grid; }
.msg .bubble.file-announce .actions .icons { display:flex; gap:12px; }
.msg .bubble.file-announce .actions .icons i { font-size:18px; cursor:pointer; }

/* ---------- files ---------- */
.ubp-files-head { display:flex; gap:8px; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ubp-file-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:10px; }
.ubp-file-card {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid var(--ubp-border);
  border-radius:10px;
  padding:5px;
  background:var(--ubp-bg);
  overflow: hidden;
}
.ubp-file-card:hover{backdrop-filter:brightness(.1)}
.pm-file-overlay{opacity:0;position: absolute;top: 0;left: 0;width: 100%;display: flex;gap: 5px;border-radius: 10px;padding: 4px;justify-self: center;justify-content: center;}
.pm-file-overlay:hover{opacity:1;backdrop-filter: blur(2px) brightness(0.18);transition: opacity .5s ease;}
.pm-file-overlay button {font-size:10px}
.ubp-file-icon {width: 30px;height: 28px;border-radius:8px;display:grid;place-items:center;background: var(--ubp-border);}
.ubp-file-icon i{font-size:15px; color:var(--primary-light)}
.ubp-file-name {text-transform: capitalize; font-size:.79rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.ubp-drop-overlay { position:absolute; inset:8px; border:2px dashed var(--primary); border-radius:12px; display:grid; place-items:center; background:transparent; backdrop-filter:blur(3px); }
.ubp-drop-overlay[hidden] { display:none; }
.ubp-drop-overlay .inner { padding:10px 14px; border-radius:10px; background:var(--primary-dark) }
.ubp-metrics{padding:10px;background:var(--ubp-panel);border-radius:12px;display: grid;gap: 7px;border:1px solid var(--ubp-border);}
#ubpQuickTimeline{text-transform:capitalize; font-weight:500; font-size:10px}
.ubp-head-main{
  display: flex;
  gap: 20px;
  align-items: center;
}
.ubp-donut{width: 100%;height: 100%;display: grid;grid-template-columns: 80px 1fr;justify-items: center;}
.ubp-d-left{display:grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: 30px;gap: 5px;margin-right: -12px;align-items: center;}
.ubp-d-right{display:grid;grid-template-columns: 1fr}
/* ---------- tasks (rows kept identical to your look; one dropdown pill) ---------- */
.ubp .pm-rows { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.ubp .pm-row  {border:1px solid var(--ubp-border);border-radius:10px;padding:10px;background: transparent;}
.ubp .pm-row-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }

.ubp .pm-row[data-status] { border-radius: 10px; transition: box-shadow .2s ease, background-color .2s ease; }
.ubp .pm-row.status-todo        { box-shadow: 0 0 0 1px rgba(148,163,184,.55), 0 0 12px rgba(148,163,184,.342) inset; }
.ubp .pm-row.status-inprogress  { box-shadow: 0 0 0 1px var(--primary-light), 0 0 12px var(--primary-light) inset; }
.ubp .pm-row.status-pause     { box-shadow: 0 0 0 1px rgba(239,68,68,.35), 0 0 12px rgba(239,68,68,.22) inset; }
.ubp .pm-row.status-done        { box-shadow: 0 0 0 1px var(--primary-dark), 0 0 12px var(--primary-dark) inset; filter: saturate(1.08); }

.tm-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.tm-toolbar .tm-left, .tm-toolbar .tm-right { display:flex; align-items:center; gap:8px; }
.tm-cols { display:grid; grid-template-columns: 160px 1fr 180px 140px 80px 100px; gap:10px; align-items:center; }
.pm-col select, .pm-col input { width:100%; background:var(--bg); color:var(--ubp-text); border:1px solid var(--ubp-border); border-radius:8px; padding:8px 10px; }
.pm-title input { font-weight:600; }
.pm-row-actions { display:flex; gap:6px; justify-content:flex-end; }

/* right panel for task details */
.ubp-tasks-layout { display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:12px; }
@media (max-width: 1100px) { .ubp-tasks-layout {grid-template-columns: 1fr;} }
.ubp-task-detail { border:1px solid var(--ubp-border); border-radius:12px; background:var(--ubp-bg); display:flex; flex-direction:column; }
.ubp-task-detail[hidden] { display:none; }
.ubp-task-detail header { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ubp-border); padding:8px 10px; }
.ubp-task-detail .title { font-weight:600; }
.ubp-task-detail .body { display:grid; gap:10px; padding:10px; }
.ubp-task-detail .body label { display:grid; gap:4px; }
.ubp-task-detail .body .cols2 { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.ubp-task-detail footer { display:flex; gap:8px; justify-content:flex-end; border-top:1px solid var(--ubp-border); padding:8px 10px; }

/* ---------- details toggles ---------- */
.ubp-details-grid { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; }
@media (max-width: 980px){ .ubp-details-grid { grid-template-columns: 1fr; } }
.ubp-list { display:grid; gap:8px; }
.ubp-props { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; }
.ubp-add-form { margin-top:14px; border-top:1px dashed var(--ubp-border); padding-top:10px; }
.ubp-add-row { display:flex; gap:8px; align-items:center; }
.ubp-hint { color:var(--ubp-muted); font-size:12px; }
.ubp-toggles {display:grid;grid-template-columns: 1fr 1fr 1fr;gap:6px;width: 100%;margin-top:10px;justify-items: start;}
.toggle {display:flex;align-items: flex-start;gap: 5px;margin: 0;border: var(--line);background: var(--ubp-bg);border-radius: 20px;padding: 5px;flex-direction: row;}
#setColor{border-radius:20px;}
/* ---------- collapse marker + top grid collapse ---------- */
.ubp-grid-collapsed-marker {position:absolute;left:0;right:0;bottom: 0px;display:grid;place-items:center;pointer-events:none;}
.ubp-grid-toggle {
  pointer-events:auto;
  border:1px solid var(--ubp-border);
  border-bottom: 0;
  border-radius: 8px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background:var(--ubp-panel);
  width:34px;
  height:22px;
  display:grid;
  place-items:center;
}
/*
 * Styles for the Waterfall Chart
 */
.pm-conv-preview { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width: 20vw; }
/* The main container for the waterfall chart */
#ubpWaterfall {
  width: 160px;           /* Set the width */
  height: 160px;          /* Set the height */
  display: flex;          /* Use flexbox to stack the bars */
  flex-direction: column; /* Stack bars vertically */
  border-radius: 4px;     /* Optional: Rounded corners */
  overflow: hidden;       /* Hide anything that might overflow */
  background-color: var(--primary-faded); /* A light background for when there are no tasks */
}
#ubpWaterfall[hidden]{display: none;}
/* Each colored bar (segment) in the chart */
.waterfall-segment {
  width: 100%; /* Each segment should take the full width of the container */
  transition: height 0.3s ease-in-out; /* Smoothly animate height changes */
}

/* Style for the "No tasks" message */
#ubpWaterfall .ubp-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: #6b7280; /* Muted text color */
  font-size: 14px;
  text-align: center;
}
[data-route="/workspace/projects"] .pm-grid .pm-card.pm-card--wide[data-collapsed="1"]{
display:none}
[data-route="/workspace/projects"] .pm-grid .pm-card.pm-card--wide[data-collapsed="0"]{
  padding: 16px;
  transition: height .5s ease, padding .5s ease, overflow .5s ease;
  height: 91vh;
  overflow: clip;
}

.pm-top-split{display:grid;grid-template-columns: 2fr 1fr;gap: 0;align-items:start;}
@media (max-width: 980px){ .pm-top-split{grid-template-columns:1fr; } }

/*Project Grids*/
.pro-cards{
  border-radius: 10px;
  padding: 0 5px 0 0;
  min-height: 180px;
  height: 83vh;
  overflow: hidden;
}
/* Conversations panel */
.Pro-Conv{
  border-left: 1px solid var(--primary);
  padding: 7px 0 0 5px;
  min-height: 180px;
  height: 81.8vh;
  overflow: hidden;
}
.convohead{padding: 5px;display: flex;justify-content: center;font-size: 14px;border: var(--line);height: 48px;border-radius: 10px;align-items: center;}
.pm-conv-empty{ color: var(--muted, #94a3b8); padding: 8px 6px; font-size: 13px; }
.pm-conv-item{
  display: grid;
  grid-template-rows: auto auto;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.pm-conv-item:hover{ background: rgba(148,163,184,.08); }
.pm-conv-row1{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-conv-row2{ display:flex; justify-content:space-between; gap:8px; color:var(--muted, #94a3b8); font-size:12px; }
.pm-conv-preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 20vw;}
.pm-conv-time{ white-space:nowrap; }

/* Scale-in animation for details page, from click origin */
#pmProjectDetailWrap.anim-scale-in{
  animation: pmScaleIn .24s ease-out;
  transform-origin: var(--from-x, 50%) var(--from-y, 0%);
}
@keyframes pmScaleIn {
  from { transform: scale(.96); opacity: 0 }
  to   { transform: scale(1);   opacity: 1 }
}
/* --- PM Summary cards (top of grid) --- */
.pm-summary-cards{display:grid;grid-template-columns:repeat(3, minmax(140px,1fr));gap:10px;margin: 6px 0 8px;}
.pm-summary-cards .sum{background:var(--surface);border:var(--line);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.pm-summary-cards .sum .n{font-size:1.3rem;font-weight:700}
.pm-summary-cards .sum .k{color:var(--text-muted);font-size:.85rem}

/* --- Project card cover + counters --- */
.pm-cardx .pm-cover{height:110px;background:linear-gradient(135deg, rgba(99,102,241,.25), rgba(14,165,233,.2));border-radius:8px;display:grid;place-items:center;overflow:hidden}
.pm-cardx .pm-cover img{width:100%;height:100%;object-fit:cover}
.pm-cardx .pm-counters{display:flex;gap:8px;align-items:center;justify-content:flex-start;color:var(--text-muted);font-size:.85rem}
.pm-cardx .pm-counter{display:inline-flex;gap: 4px;align-items:center;background:rgba(255,255,255,.04);border:var(--line);padding: 1px 4px;font-size: 10px;border-radius:999px}
.pm-cardx.is-updated{box-shadow:0 0 0 2px rgba(250,204,21,.35), 0 0 18px rgba(250,204,21,.45); animation: glowPulse 1.4s ease-in-out infinite alternate;}
@keyframes glowPulse{ from{ box-shadow:0 0 0 2px rgba(250,204,21,.25), 0 0 10px rgba(250,204,21,.35);} to{ box-shadow:0 0 0 2px rgba(250,204,21,.45), 0 0 24px rgba(250,204,21,.6);} }