:root{
  --navy:#023A51; --green:#15D16C; --green-text:#15803D;
  --bg:#F7F8FA; --panel:#FFFFFF; --panel2:#F3F4F6;
  --border:#E4E7EB; --text:#1A1A1A; --muted:#4B5563; --muted2:#6B7280;
  --red:#DC2626; --amber:#B45309; --blue:#2563EB; --purple:#7C3AED;
  --red-soft:#FEE2E2; --amber-soft:#FEF3C7; --blue-soft:#DBEAFE; --purple-soft:#EDE9FE; --green-soft:#DCFCE7; --gray-soft:#F1F5F9;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:'Manrope',system-ui,sans-serif;color:var(--text)}
.mono{font-family:'IBM Plex Mono',monospace}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:8px}
a{color:var(--green-text);text-decoration:none}
button{font-family:inherit}

.app{display:flex;min-height:100vh}

/* SIDEBAR */
.sidebar{width:240px;flex:0 0 240px;background:var(--panel);border-right:1px solid var(--border);padding:28px 20px;display:flex;flex-direction:column;gap:32px;position:sticky;top:0;height:100vh;overflow-y:auto}
.navicon{display:inline-flex;align-items:center;justify-content:center;width:16px;flex:none}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:34px;height:34px;border-radius:9px;background:var(--green);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--navy);font-size:16px}
.brand .name{font-weight:700;font-size:14px;color:var(--text)}
.brand .sub{font-size:11px;color:var(--muted2)}
.section-label{font-size:11px;letter-spacing:.06em;color:var(--muted2);text-transform:uppercase;padding:0 10px;margin-bottom:6px}
.navlist{display:flex;flex-direction:column;gap:4px}
.navitem{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13px;border:none;cursor:pointer;width:100%;text-align:left;background:transparent;color:var(--muted);font-weight:500}
.navitem:hover{background:var(--panel2)}
.navitem.active{background:var(--green-soft);color:var(--green-text);font-weight:700}
.badge{margin-left:auto;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px}
.filterlist{display:flex;flex-direction:column;gap:2px}
.filteritem{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;font-size:13px;color:var(--muted);border:none;background:transparent;width:100%;cursor:pointer}
.filteritem:hover{background:var(--panel2)}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.user-card{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;background:var(--panel2)}
.avatar{border-radius:50%;color:var(--navy);font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}

/* MAIN */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;padding:18px 28px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--panel)}
.topbar h1{margin:0;font-size:20px;font-weight:800;color:var(--text)}
.topbar .lede{font-size:13px;color:var(--muted2);margin-top:2px}
.search{position:relative;flex:1 1 220px;max-width:320px}
.search span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted2)}
.search input{width:100%;padding:9px 12px 9px 32px;border-radius:9px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:13px;outline:none}
.toggle{display:flex;gap:4px;background:var(--panel2);border-radius:9px;padding:3px;border:1px solid var(--border)}
.toggle button{flex:1;padding:7px 14px;border-radius:7px;border:none;font-size:12px;font-weight:600;cursor:pointer;background:transparent;color:var(--muted2)}
.toggle button.active{background:var(--green);color:var(--navy);font-weight:700}
.iconbtn{position:relative;width:38px;height:38px;border-radius:9px;background:var(--panel2);border:1px solid var(--border);color:var(--text);font-size:16px;cursor:pointer}
.iconbtn .count{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 5px;line-height:1.3}
.primary-btn{padding:9px 16px;border-radius:9px;background:var(--green);color:var(--navy);border:none;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}

.reminder{margin:16px 28px 0;padding:10px 16px;border-radius:10px;background:var(--amber-soft);border:1px solid #FDE68A;display:flex;align-items:center;gap:10px;font-size:13px;color:#92400E}
.reminder .dismiss{margin-left:auto;background:none;border:none;color:#92400E;font-size:13px;cursor:pointer;text-decoration:underline}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:16px 28px 0}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.stat .head{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.stat .value{font-size:28px;font-weight:800;color:var(--text);margin-top:6px}
.stat .sub{font-size:12px;margin-top:4px}

.filterbar{display:flex;align-items:center;gap:10px;padding:18px 28px 0;flex-wrap:wrap}
.chip{padding:6px 13px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--panel);color:var(--muted)}
.chip.active{border-color:var(--green);background:var(--green-soft);color:var(--green-text)}
.sort-note{margin-left:auto;font-size:12px;color:var(--muted2)}
.sort-note span{color:var(--muted)}

/* LIST VIEW */
.listwrap{padding:16px 28px 32px}
.table{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.task-group{border-bottom:1px solid var(--border)}
.task-group:last-child{border-bottom:none}
.trow{display:grid;grid-template-columns:1.5fr 1.6fr 1fr .8fr 1fr 1.1fr 1fr 1.4fr;align-items:center;padding:14px 18px;border-bottom:none;font-size:13px}
.thead{padding:12px 18px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted2);border-bottom:1px solid var(--border);background:var(--panel2)}
.tcell-client{font-weight:600;color:var(--text)}
.expand-btn{background:none;border:none;cursor:pointer;color:var(--muted2);padding:2px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;transition:transform .15s,color .1s;flex-shrink:0;margin-left:auto}
.expand-btn:hover{color:var(--text);background:var(--border)}
.subtask-block{background:var(--panel2);border-top:1px solid var(--border)}
.subtask-inline-row{display:flex;align-items:center;gap:10px;padding:7px 18px 7px 48px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--border)}
.subtask-inline-row:last-child{border-bottom:none}
.subtask-check{display:inline-flex;align-items:center;cursor:pointer;color:var(--muted2);transition:color .1s}
.subtask-check:hover{color:var(--green-text)}
.subtask-check.done{color:var(--green-text)}
.tcell-task{color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px}
.assignee{display:flex;align-items:center;gap:7px}
.assignee .av{width:22px;height:22px;font-size:10px}
.assignee span.name{color:var(--muted)}
.pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;display:inline-block;border:none}
.type-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;margin-right:5px;flex-shrink:0;vertical-align:middle}
select.pill{appearance:none;cursor:pointer}
.progress-cell{display:flex;align-items:center;gap:8px}
.progress-track{flex:1;height:6px;border-radius:999px;background:var(--panel2);overflow:hidden;cursor:pointer}
.progress-fill{height:100%;border-radius:999px}
.progress-label{font-size:11px;color:var(--muted);width:30px}
.reason{font-size:12px}
.reason.muted{color:var(--muted2)}
.reason.flag{color:var(--amber);font-style:italic}
.empty{padding:40px;text-align:center;color:var(--muted2)}

/* MOBILE BOTTOM NAV — hidden by default, shown in media queries */
.mobile-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:56px;
  background:var(--panel);
  border-top:1px solid var(--border);
  z-index:200;
  align-items:stretch;
}
.mobile-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;text-decoration:none;color:var(--muted2);font-size:10px;font-weight:600;
  letter-spacing:.02em;padding:4px 0;transition:color .15s;
}
.mobile-nav a.active,.mobile-nav a:hover{color:var(--green-text)}
.mobile-nav a svg{flex:none}

/* BOARD VIEW */
.boardwrap{display:none;padding:16px 28px 32px;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.boardwrap.show{display:grid}
.column{background:var(--panel2);border:1px solid var(--border);border-radius:14px;padding:12px}
.column-head{display:flex;align-items:center;gap:8px;padding:4px 6px 12px}
.column-head .title{font-weight:700;font-size:13px;color:var(--text)}
.column-head .count{margin-left:auto;font-size:11px;color:var(--muted2)}
.cards{display:flex;flex-direction:column;gap:10px;min-height:20px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.card-client{font-size:11px;font-weight:700;color:var(--muted2)}
.card-task{font-size:13px;color:var(--text);margin-top:6px;line-height:1.35}
.card-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.card-bottom .av{width:20px;height:20px;font-size:9px}
.card-bottom .dl{font-size:11px}

.listwrap.hide, .boardwrap.hide{display:none}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal-overlay.show{display:flex}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:24px;width:100%;max-width:440px;box-shadow:0 20px 40px rgba(16,24,40,.12)}
.modal h2{margin:0 0 16px;font-size:16px;color:var(--text)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;color:var(--muted2)}
.field input, .field select, .field textarea{width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:13px;font-family:inherit}
.field textarea{resize:vertical;min-height:60px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.btn-secondary{padding:9px 16px;border-radius:9px;background:var(--panel);color:var(--muted);border:1px solid var(--border);font-weight:600;font-size:13px;cursor:pointer}

/* TASK DETAIL — ClickUp-style two-column panel */
.detail-overlay{position:fixed;inset:0;background:rgba(17,24,39,.5);display:none;align-items:center;justify-content:center;z-index:60;padding:24px}
.detail-overlay.show{display:flex}
.detail-modal{background:var(--panel);border:1px solid var(--border);border-radius:14px;width:100%;max-width:980px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 48px rgba(16,24,40,.18)}
.detail-topbar{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.detail-breadcrumb{font-size:12px;color:var(--muted2)}
.detail-breadcrumb b{color:var(--text);font-weight:600}
.detail-close{margin-left:auto;width:30px;height:30px;border-radius:8px;background:var(--panel2);border:1px solid var(--border);color:var(--muted2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}

.detail-title-row{padding:18px 24px 0}
.detail-title-input{width:100%;border:none;background:transparent;color:var(--text);font-size:21px;font-weight:800;padding:4px 0;outline:none;border-bottom:2px solid transparent}
.detail-title-input:focus{border-bottom-color:var(--green)}

.detail-body{display:flex;gap:0;overflow:hidden;flex:1;min-height:0}
.detail-main{flex:1.6;min-width:0;overflow-y:auto;padding:16px 24px 28px;display:flex;flex-direction:column;gap:24px}
.detail-sidebar{flex:1;max-width:260px;border-left:1px solid var(--border);overflow-y:auto;padding:18px 20px 28px;display:flex;flex-direction:column;gap:16px;background:var(--panel2)}

.detail-label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted2);font-weight:700;margin-bottom:8px}
.detail-textarea{width:100%;min-height:64px;border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:9px;padding:10px 12px;font-size:13px;font-family:inherit;resize:vertical;outline:none}
.detail-textarea:focus{border-color:var(--green);background:var(--panel)}
.detail-textarea::placeholder{color:var(--muted2)}

.subtask-progress-track{height:6px;border-radius:999px;background:var(--panel2);overflow:hidden;margin-bottom:10px}
.subtask-progress-fill{height:100%;border-radius:999px;background:var(--green);transition:width .2s}
.subtask-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:var(--panel);border:1px solid var(--border);margin-bottom:6px}
.subtask-check{width:17px;height:17px;border-radius:5px;border:2px solid var(--muted2);background:transparent;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;color:transparent;font-size:11px;font-weight:900}
.subtask-check.done{background:var(--green);border-color:var(--green);color:#fff}
.subtask-title{flex:1;font-size:13px;color:var(--text)}
.subtask-row.done{background:var(--panel2)}
.subtask-row.done .subtask-title{color:var(--muted2);text-decoration:line-through}
.subtask-linkbtn{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:12px;padding:2px 4px}
.subtask-links{margin:0 0 6px 27px;display:flex;flex-direction:column;gap:4px}
.subtask-link-row{display:flex;gap:8px;margin:0 0 8px 27px}
.subtask-link-row input{flex:1;padding:6px 9px;border-radius:7px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:11px}
.add-row{display:flex;gap:8px;margin-top:4px}
.add-row input{flex:1;padding:8px 11px;border-radius:8px;border:1px dashed var(--border);background:transparent;color:var(--text);font-size:13px}
.add-row input::placeholder{color:var(--muted2)}
.add-row button{white-space:nowrap}

.sidebar-field{display:flex;flex-direction:column;gap:5px}
.sidebar-field label{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted2);font-weight:700}
.sidebar-field select, .sidebar-field input{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:13px;font-family:inherit}
.sidebar-static{font-size:13px;color:var(--text);padding:4px 0}
.sidebar-divider{height:1px;background:var(--border);margin:2px 0}

/* ── TABLET (≤920px) ─────────────────────────────────── */
@media (max-width: 920px){
  .sidebar{display:none}
  .main{padding-bottom:64px} /* room for bottom nav */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 16px 0}
  .filterbar{padding:12px 16px 0}
  .listwrap{padding:12px 16px 24px}
  .topbar{padding:16px 16px 10px}
  .topbar h1{font-size:20px}

  /* tablet: show 4 cols — client, task, status, expand */
  .thead{padding:10px 14px;display:grid;grid-template-columns:1.2fr 1.6fr .9fr 32px}
  .trow{padding:12px 14px;display:grid;grid-template-columns:1.2fr 1.6fr .9fr 32px;gap:6px}
  /* hide assignee(3), priority(4), deadline(5), progress(6) */
  .thead > div:nth-child(3),
  .thead > div:nth-child(4),
  .thead > div:nth-child(5),
  .thead > div:nth-child(6),
  .trow  > div:nth-child(3),
  .trow  > div:nth-child(4),
  .trow  > div:nth-child(5),
  .trow  > div:nth-child(6){display:none}
  /* status(7) and expand(8) stay, collapse gap */
  .thead > div:nth-child(7){grid-column:3}
  .trow  > div:nth-child(7){grid-column:3}
  .thead > div:nth-child(8){grid-column:4;display:flex;justify-content:flex-end}
  .trow  > div:nth-child(8){grid-column:4;display:flex;justify-content:flex-end;align-items:center}

  .boardwrap.show{grid-template-columns:repeat(2,1fr)}
  .detail-body{flex-direction:column;overflow-y:auto}
  .detail-sidebar{max-width:none;border-left:none;border-top:1px solid var(--border)}

  /* bottom nav bar */
  .mobile-nav{display:flex}
}

/* ── MOBILE (≤600px) ─────────────────────────────────── */
@media (max-width: 600px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px 14px 0}
  .filterbar{padding:10px 14px 0;gap:7px}
  .listwrap{padding:10px 14px 20px}
  .topbar{padding:12px 14px 8px;flex-wrap:wrap;gap:8px}
  .topbar h1{font-size:18px}
  .topbar > div:first-child{flex:1 1 100%;min-width:0} /* title row full width */
  .search{flex:1 1 100%;max-width:none} /* search full width */
  .toggle{flex:none}
  .topbar .primary-btn{flex:none;font-size:12px;padding:8px 12px}

  /* mobile: card-style rows — show title + status below client */
  .thead{display:none}
  .trow{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    padding:12px 14px;
    gap:4px 8px;
  }
  /* CLIENT → row1 col1 */
  .trow > div:nth-child(1){grid-column:1;grid-row:1;font-size:13px}
  /* TASK → row2 col1 (full width) */
  .trow > div:nth-child(2){grid-column:1;grid-row:2;font-size:13px;font-weight:500;white-space:normal;overflow:visible;text-overflow:unset}
  /* ASSIGNEE hidden */
  .trow > div:nth-child(3){display:none}
  /* PRIORITY hidden */
  .trow > div:nth-child(4){display:none}
  /* DEADLINE hidden */
  .trow > div:nth-child(5){display:none}
  /* PROGRESS hidden */
  .trow > div:nth-child(6){display:none}
  /* STATUS → row1 col2, right-aligned */
  .trow > div:nth-child(7){grid-column:2;grid-row:1;display:flex;justify-content:flex-end;align-items:center}
  /* DELAY/EXPAND → row2 col2, right-aligned */
  .trow > div:nth-child(8){grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:flex-end;gap:6px}

  .boardwrap.show{grid-template-columns:1fr}
  .sort-note{font-size:11px}

  /* subtask rows */
  .subtask-inline-row{padding:7px 14px 7px 32px}
}

/* bottom nav — hidden on desktop, shown on tablet/mobile */