:root{
  --bg:#F5F6F4;
  --surface:#FFFFFF;
  --surface-alt:#EEF1EC;
  --ink:#14181A;
  --ink-muted:#5B625E;
  --ink-faint:#9BA097;
  --border:#DDE1DA;
  --border-strong:#C7CCC2;
  --primary:#1F6F5C;
  --primary-ink:#0F3F34;
  --primary-tint:#E3EEEA;
  --primary-a:#2A9178;
  --primary-b:#164F41;
  --ring-a:#1FBE8F;
  --ring-b:#0B5A45;

  --p-sormeh:#B5476B;
  --p-amir:#2E6A8E;
  --p-meysam:#7C4FA0;

  --pri-high:#C0392B;
  --pri-medium:#B6791A;
  --pri-low:#3E7D52;

  --st-notstarted:#7C8178;
  --st-progress:#2F6FB0;
  --st-completed:#1F6F5C;

  --danger:#B3261E;
  --clr-overdue:#C0392B;
  --clr-duetoday:#C4680A;
  --clr-dueweek:#A8880A;
  --clr-inprogress:#2F6FB0;
  --clr-completed:#1F6F5C;
  --type-specific:#1F6F5C;
  --type-general:#6B4FA0;
  --radius-sm:6px;
  --radius-md:10px;
  --shadow-modal:0 12px 32px rgba(20,24,26,0.18);
  --shadow-card:0 1px 2px rgba(20,24,26,0.05);
  --shadow-lift:0 14px 30px rgba(20,24,26,0.10);
  --glow-primary:0 0 0 rgba(0,0,0,0);
  --ring-track-a:#D6DAD2;
  --ring-track-b:#E7EAE2;
  --scrim:rgba(20,24,26,0.42);
  --shadow-ring:drop-shadow(0 10px 16px rgba(20,24,26,0.16));
  --ring-face-shadow:inset 0 2px 5px rgba(20,24,26,0.10), inset 0 -1px 2px rgba(255,255,255,0.6);
}

:root[data-theme="dark"]{
  --bg:#0F1517;
  --surface:#182022;
  --surface-alt:#1F2829;
  --ink:#EDF2EF;
  --ink-muted:#9CA8A3;
  --ink-faint:#69756F;
  --border:#283132;
  --border-strong:#394344;
  --primary:#3FBE96;
  --primary-ink:#B7F0DC;
  --primary-tint:rgba(63,190,150,0.16);
  --primary-a:#57D2AA;
  --primary-b:#1D7C61;
  --ring-a:#5EEBC0;
  --ring-b:#1C8266;

  --p-sormeh:#E37EA2;
  --p-amir:#63AEE0;
  --p-meysam:#B693EA;

  --pri-high:#F0776B;
  --pri-medium:#E3AC53;
  --pri-low:#69C48E;

  --st-notstarted:#8B9793;
  --st-progress:#63AEE0;
  --st-completed:#3FBE96;

  --danger:#F0776B;
  --clr-overdue:#F0776B;
  --clr-duetoday:#F2A65A;
  --clr-dueweek:#E3C15B;
  --clr-inprogress:#63AEE0;
  --clr-completed:#3FBE96;
  --type-specific:#3FBE96;
  --type-general:#B693EA;
  --shadow-modal:0 24px 56px rgba(0,0,0,0.55);
  --shadow-card:0 1px 2px rgba(0,0,0,0.4);
  --shadow-lift:0 18px 38px rgba(0,0,0,0.5);
  --glow-primary:0 0 26px rgba(63,190,150,0.28);
  --ring-track-a:#26302F;
  --ring-track-b:#313C3B;
  --scrim:rgba(4,8,9,0.62);
  --shadow-ring:drop-shadow(0 12px 22px rgba(0,0,0,0.55));
  --ring-face-shadow:inset 0 2px 6px rgba(0,0,0,0.5), inset 0 -1px 2px rgba(255,255,255,0.05);
}

*{box-sizing:border-box;}
html,body{height:100%;}
html{color-scheme:light;}
html[data-theme="dark"]{color-scheme:dark;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body, .sidebar, .topbar, .task-card, .person-card, .stat-tile, .hero-card,
.chip, .nav-item, .badge, .search-box, .ghost-btn, .btn-secondary,
.field input, .field select, .field textarea, .empty-state,
.progress-track, .stack-bar, .avatar{
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
}
button{font-family:inherit;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--primary-tint);}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

/* ---------- layout ---------- */
.hidden{display:none;}

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

.sidebar{
  width:var(--sidebar-w,230px);
  flex:none;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:22px 14px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.sidebar-resizer{
  flex:none;width:8px;margin-left:-4px;position:sticky;top:0;height:100vh;
  z-index:20;cursor:col-resize;touch-action:none;
}
.sidebar-resizer:hover,body.sidebar-resizing .sidebar-resizer{background:linear-gradient(to right,transparent 3px,var(--border) 3px,var(--border) 5px,transparent 5px);}
body.sidebar-resizing{cursor:col-resize;user-select:none;}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 8px 22px 8px;
}
.brand-mark{
  width:30px;height:30px;border-radius:8px;
  background:var(--primary);
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.brand-mark svg{width:16px;height:16px;stroke:#fff;}
.brand-mark img{width:100%;height:100%;object-fit:cover;border-radius:8px;}
.brand-mark-letter{font-family:'Space Grotesk';font-weight:700;font-size:15px;color:#fff;}
.brand-name{
  font-family:'Space Grotesk';font-weight:700;font-size:16px;color:var(--ink);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.brand-switcher{position:relative;}
.brand-switchable{cursor:pointer;border-radius:var(--radius-sm);}
.brand-switchable:hover{background:var(--surface-alt);}
.brand-chevron{width:14px;height:14px;stroke:var(--ink-faint);flex:none;}
.company-switch-panel{
  position:absolute;top:calc(100% - 14px);left:8px;right:8px;z-index:20;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lift);padding:6px;
}
.company-switch-item{margin:0;}
.company-switch-btn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:8px;border-radius:6px;border:none;background:none;
  font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;text-align:left;
}
.company-switch-btn:hover{background:var(--surface-alt);}
.company-switch-item.active .company-switch-btn{background:var(--primary-tint);color:var(--primary-ink);}
.company-switch-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.nav-section-label{
  font-size:11px;
  color:var(--ink-faint);
  padding:14px 10px 6px 10px;
  font-weight:600;
}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;
  border-radius:var(--radius-sm);
  color:var(--ink-muted);
  cursor:pointer;
  border:1px solid transparent;
  font-size:13.5px;
  font-weight:500;
  background:none;
  width:100%;
  text-align:left;
  overflow:hidden;
}
.nav-item:hover{background:var(--surface-alt);color:var(--ink);}
.nav-item.active{background:var(--primary-tint);color:var(--primary-ink);font-weight:600;}
.nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-label-admin{font-weight:700;}
.nav-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.nav-item svg{width:16px;height:16px;flex:none;stroke:currentColor;}
.nav-count{
  flex:none;
  font-size:11.5px;
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.nav-item.active .nav-count{color:var(--primary-ink);}

.nav-person-row{display:flex;align-items:center;gap:4px;}
.nav-person-row .nav-item{flex:1;min-width:0;}
.person-action-btn{
  flex:none;width:22px;height:22px;border-radius:5px;
  border:1px solid transparent;background:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink-faint);
}
.person-action-btn:hover{background:var(--surface-alt);color:var(--ink);}
.person-action-btn svg{width:12px;height:12px;stroke:currentColor;}

.nav-item-add{
  color:var(--ink-faint);
  border:1px dashed var(--border-strong);
}
.nav-item-add:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-tint);}
.nav-item-add svg{width:14px;height:14px;}

.sidebar-footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.signed-in-as{font-size:12px;color:var(--ink-muted);padding:2px 4px 6px 4px;}
.signed-in-as strong{color:var(--ink);}
.role-badge{
  font-size:9px;padding:1px 6px;border-radius:999px;
  background:var(--primary-tint);color:var(--primary-ink);
  margin-left:5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
}

.theme-select-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface);
}
.theme-select-row .label{font-size:12.5px;color:var(--ink-muted);font-weight:500;}
.theme-select{display:flex;gap:2px;background:var(--surface-alt);border-radius:8px;padding:2px;}
.theme-opt{
  width:26px;height:24px;border-radius:6px;
  border:none;background:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink-faint);
}
.theme-opt:hover{color:var(--ink);}
.theme-opt.active{
  background:linear-gradient(135deg,var(--primary-a),var(--primary-b));
  color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.theme-opt svg{width:14px;height:14px;stroke:currentColor;flex:none;}

.profile-divider{height:1px;background:var(--border);margin:18px 0;}
.ghost-btn{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink-muted);
  font-size:12.5px;
  cursor:pointer;
}
.ghost-btn:hover{border-color:var(--border-strong);color:var(--ink);}
.ghost-btn svg{width:14px;height:14px;stroke:currentColor;flex:none;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}

.topbar{
  display:flex;align-items:center;gap:16px;
  padding:18px 32px;
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  position:sticky;top:0;z-index:5;
}
.topbar h1{font-size:19px;}
.topbar .sub{color:var(--ink-muted);font-size:12.5px;margin-top:2px;}
.topbar-spacer{flex:1;}
.topbar-title-row{display:flex;align-items:center;gap:12px;}
.topbar-avatar{width:38px;height:38px;font-size:15px;border:none;}
.search-box{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:7px 10px;
  width:230px;
  margin:0;
}
.search-box svg{width:15px;height:15px;stroke:var(--ink-faint);flex:none;}
.search-box input{
  border:none;outline:none;background:none;
  font-size:13px;width:100%;color:var(--ink);
}
.search-box input::placeholder{color:var(--ink-faint);}
.search-box input[type="search"]{-webkit-appearance:none;appearance:none;}
.search-box input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}

.notif-wrap{position:relative;}
.bell-btn{
  position:relative;
  width:36px;height:36px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink-muted);
}
.bell-btn:hover{border-color:var(--border-strong);color:var(--ink);}
.bell-btn svg{width:16px;height:16px;stroke:currentColor;}
.bell-dot{
  position:absolute;top:6px;right:7px;
  width:7px;height:7px;border-radius:50%;
  background:var(--pri-high);
  box-shadow:0 0 0 2px var(--surface);
}
.notif-panel{
  display:none;
  position:absolute;top:calc(100% + 8px);right:0;z-index:40;
  width:300px;max-height:360px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lift);padding:10px;
}
.notif-panel.open{display:block;}
.notif-head{font-size:12.5px;font-weight:700;padding:4px 6px 8px 6px;color:var(--ink);}
.notif-item{padding:8px 8px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--ink);}
.notif-item:hover{background:var(--surface-alt);}
.notif-item.unread{font-weight:600;}
.notif-item .t{color:var(--ink-faint);font-size:11px;margin-top:2px;font-weight:400;}
.notif-empty{font-size:12.5px;color:var(--ink-faint);padding:14px 8px;text-align:center;}

.btn-primary{
  display:flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,var(--primary-a),var(--primary-b));
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  padding:9px 14px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  box-shadow:var(--glow-primary);
  transition:transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);}
.btn-primary svg{width:15px;height:15px;stroke:#fff;}

.btn-secondary{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);
  font-size:13px;color:var(--ink-muted);cursor:pointer;
}
.btn-secondary:hover{border-color:var(--border-strong);color:var(--ink);}
.btn-secondary svg{width:15px;height:15px;stroke:currentColor;flex:none;}

.view-root{padding:26px 32px 60px 32px;max-width:1180px;}

/* ---------- overview hero ---------- */
.hero-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:18px;
  margin-bottom:26px;
}
.hero-card{
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:24px;
  display:flex;
  align-items:center;
  gap:22px;
  box-shadow:var(--shadow-card);
}
.hero-card::before{
  content:'';
  position:absolute;
  width:240px;height:240px;
  top:-90px;left:-90px;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--primary) 40%, transparent) 0%, transparent 68%);
  opacity:0.5;
  pointer-events:none;
}
.ring-wrap{
  position:relative;width:120px;height:120px;flex:none;
  filter:var(--shadow-ring);
}
.ring-wrap svg{width:120px;height:120px;display:block;overflow:visible;}
.ring-label{
  position:absolute;width:78px;height:78px;top:50%;left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:var(--ring-face-shadow);
}
.ring-num{font-family:'Space Grotesk';font-weight:700;font-size:24px;line-height:1;}
.ring-tag{font-size:10px;color:var(--ink-muted);margin-top:2px;}
.hero-text .hero-kicker{font-size:12.5px;color:var(--ink-muted);margin-bottom:4px;}
.hero-text .hero-title{font-size:16px;font-weight:600;}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.stat-row-5{grid-template-columns:repeat(5,1fr);}
.stat-tile{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:18px 20px;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:var(--shadow-card);
}
.stat-tile .num{font-family:'Space Grotesk';font-size:26px;font-weight:700;}
.stat-tile .label{font-size:12.5px;color:var(--ink-muted);margin-top:4px;}
.stat-tile.warn .num{color:var(--pri-high);}

/* ---------- person summary cards ---------- */
.section-heading{
  display:flex;align-items:baseline;justify-content:space-between;
  margin:30px 0 14px 0;
}
.section-heading h2{font-size:15.5px;}
.section-heading .hint{font-size:12px;color:var(--ink-faint);}

.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.person-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:18px;
  box-shadow:var(--shadow-card);
}
.person-card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.avatar{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk';font-weight:700;font-size:13px;color:#fff;
  flex:none;
  background-size:cover;background-position:center;
}
.person-card-head .pname{font-weight:600;font-size:14.5px;}
.person-card-head .ptotal{margin-left:auto;font-size:12px;color:var(--ink-muted);}

.breakdown-label{font-size:11px;color:var(--ink-faint);margin:10px 0 6px 0;font-weight:600;}
.stack-bar{
  display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--surface-alt);
}
.stack-seg{height:100%;}
.legend-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.legend-item{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-muted);}
.legend-dot{width:7px;height:7px;border-radius:50%;flex:none;}

.empty-note{
  font-size:12px;color:var(--ink-faint);
  padding:10px 0 2px 0;
}

/* ---------- filter bar ---------- */
.filter-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:16px;
}
.filter-chips{display:contents;}
.chip-group{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  font-size:12.5px;
  color:var(--ink-muted);
  cursor:pointer;
}
.chip:hover{border-color:var(--border-strong);color:var(--ink);}
.chip.active{background:linear-gradient(135deg,var(--primary-a),var(--primary-b));color:#fff;border-color:transparent;}
.filter-divider{width:1px;height:20px;background:var(--border);margin:0 4px;}
.sort-select{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:999px;
  padding:6px 10px;
  font-size:12.5px;
  color:var(--ink-muted);
}

/* ---------- task list ---------- */
.task-list{display:flex;flex-direction:column;gap:10px;}
.task-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--border-strong);
  border-radius:var(--radius-md);
  display:flex;
  align-items:stretch;
  position:relative;
  box-shadow:var(--shadow-card);
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.task-card:hover{border-color:var(--border-strong);}
.task-card.overdue{border-left-color:var(--pri-high);}
.task-card.completed{border-color:var(--st-completed);border-width:2px 2px 2px 3px;}

/* ---------- "working now" indicator ---------- */
@keyframes workPulse{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--flash-color, var(--st-progress)) 85%, transparent), var(--shadow-card); }
  50%{ box-shadow:0 0 0 11px color-mix(in srgb, var(--flash-color, var(--st-progress)) 0%, transparent), var(--shadow-card); }
}
.task-card.working{
  border-color:var(--flash-color, var(--st-progress));
  border-width:2px;
  animation:workPulse 1.3s ease-in-out infinite;
}
@keyframes workDotBlink{ 0%,100%{opacity:1;} 50%{opacity:0.2;} }
.work-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--st-progress);
  animation:workDotBlink 1.1s ease-in-out infinite;
  margin-right:4px;
  vertical-align:middle;
}
.work-toggle-big{
  position:absolute;top:50%;right:16px;transform:translateY(-50%);
  width:44px;height:44px;flex:none;border-radius:50%;
  border:2px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--ink-faint);
  box-shadow:var(--shadow-card);
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.work-toggle-big:hover{border-color:var(--st-progress);color:var(--st-progress);transform:translateY(-50%) scale(1.05);}
.work-toggle-big.active{
  background:var(--st-progress);
  border-color:var(--st-progress);
  color:#fff;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--st-progress) 18%, transparent), var(--shadow-lift);
}
.work-toggle-big svg{width:18px;height:18px;stroke:currentColor;flex:none;}

.task-card-body{
  flex:1;min-width:0;
  padding:16px 18px;
  position:relative;
}
.task-card-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr 128px 110px 130px auto;
  gap:14px;
  align-items:center;
  padding-right:84px;
}

.task-main .t-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.task-main .t-title{font-weight:600;font-size:14px;}
.t-meta-row{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}

.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:600;
  white-space:nowrap;
}
.badge-dot{width:6px;height:6px;border-radius:50%;flex:none;}

.t-dates{font-size:12px;color:var(--ink-muted);}
.t-dates .row{display:flex;gap:6px;margin-bottom:3px;}
.t-dates .row span:first-child{flex:0 0 34px;color:var(--ink-faint);}
.t-dates .row span:last-child{flex:1;min-width:0;text-align:right;}
.t-dates .overdue-tag{color:var(--pri-high);font-weight:600;}

.t-assign{font-size:12px;color:var(--ink-muted);}
.t-assign .who{font-weight:600;color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:3px;}

.t-time-badge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10.5px;font-weight:500;color:var(--ink-faint);
  white-space:nowrap;
}
.t-time-badge svg{width:11px;height:11px;stroke:currentColor;flex:none;}
.t-time-total{display:flex;margin-top:4px;}

/* Multiple assignees: a compact popover list instead of growing the card. */
.t-assign-to{position:relative;}
.task-card:has(.assignee-pop-panel:not(.hidden)){z-index:50;}
.assignee-pop-btn{
  display:flex;align-items:center;gap:4px;
  border:1px solid var(--border);background:var(--surface);
  border-radius:var(--radius-sm);padding:5px 8px;
  font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;
}
.assignee-pop-btn:hover{border-color:var(--border-strong);}
.assignee-pop-btn svg{width:12px;height:12px;stroke:var(--ink-faint);flex:none;}
.assignee-pop-panel{
  position:absolute;top:calc(100% + 4px);right:0;z-index:20;width:200px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lift);max-height:220px;overflow-y:auto;padding:6px;
}
.assignee-pop-panel.hidden{display:none;}
.assignee-pop-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 8px;border-radius:6px;font-size:12.5px;color:var(--ink);
}
.assignee-pop-item.is-working{font-weight:600;}
.assignee-pop-item .who-name{
  display:flex;align-items:center;gap:6px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.t-actions{display:flex;gap:4px;margin-right:14px;}
.icon-btn{
  width:28px;height:28px;border-radius:6px;
  border:1px solid transparent;
  background:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink-faint);
}
.icon-btn:hover{background:var(--surface-alt);color:var(--ink);}
.icon-btn svg{width:14px;height:14px;stroke:currentColor;}
.icon-btn.danger:hover{color:var(--pri-high);background:color-mix(in srgb, var(--pri-high) 14%, var(--surface));}

.task-icon-btn{
  width:28px;height:28px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-tint);
  border:1px solid var(--border-strong);
  padding:0;
  cursor:pointer;
  transition:transform .15s ease, background-color .2s ease;
}
.task-icon-btn:hover{transform:scale(1.08);background:color-mix(in srgb, var(--primary) 16%, var(--primary-tint));}
.task-icon-glyph{
  width:100%;height:100%;display:block;
  background-color:color-mix(in srgb, var(--primary-a) 85%, white);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.task-icon-glyph.glyph-edit{-webkit-mask-image:url('../img/task-icon-edit.png');mask-image:url('../img/task-icon-edit.png');}
.task-icon-glyph.glyph-message{-webkit-mask-image:url('../img/task-icon-message.png');mask-image:url('../img/task-icon-message.png');}
.task-icon-btn.unread{animation:task-icon-blink 1.1s ease-in-out infinite;}
@keyframes task-icon-blink{
  0%, 100% {box-shadow:0 0 0 0 transparent;}
  50% {box-shadow:0 0 0 1.5px var(--pri-high);}
}

/* ---------- task card description (click to expand) ---------- */
.task-card-desc{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .28s ease, opacity .2s ease;
}
.task-card.expanded .task-card-desc{
  max-height:400px;
  opacity:1;
}
.task-card-desc-inner{
  margin-top:14px;
  padding-top:14px;
  padding-right:18px;
  border-top:1px solid var(--border);
}
.task-card-desc-label{
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:6px;
}
.task-card-desc-text{font-size:13px;line-height:1.55;color:var(--ink-muted);white-space:pre-wrap;}
.task-card-desc-text.empty{color:var(--ink-faint);font-style:italic;}

.expand-indicator{
  position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  color:var(--ink-faint);opacity:0;pointer-events:none;
  transition:opacity .15s ease, transform .25s ease;
}
.expand-indicator svg{width:14px;height:14px;stroke:currentColor;}
.task-card:hover .expand-indicator{opacity:.6;}
.task-card.expanded .expand-indicator{opacity:.8;transform:translateX(-50%) rotate(180deg);}

/* ---------- vertical progress strip ---------- */
.progress-side{
  flex:none;width:10px;
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  overflow:hidden;
}
.progress-side.has-progress{background:var(--surface-alt);}
.progress-side-fill{
  width:100%;
  opacity:0.85;
}

/* ---------- person edit modal ---------- */
.person-photo-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.who-username{font-size:13px;color:var(--ink-faint);font-family:'Space Grotesk';}

.member-companies-list{display:flex;flex-direction:column;gap:6px;}
.member-company-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--border);font-size:13px;color:var(--ink-muted);
}

/* ---------- photo / logo picker (shared by profile photo and company logo) ---------- */
.person-photo-preview{
  width:56px;height:56px;flex:none;border:1px solid var(--border);
  background:var(--surface-alt);display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;color:#fff;font-size:20px;
  font-family:'Space Grotesk';font-weight:700;overflow:hidden;
}
.person-photo-preview.shape-circle{border-radius:50%;}
.person-photo-preview.shape-square{border-radius:var(--radius-sm);}
.person-photo-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}

/* ---------- priority box ---------- */
.priority-box{
  width:56px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid;
  border-radius:6px;
  padding:2px 0;
  font-size:10.5px;font-weight:700;
  text-align:center;
  background:none;
}

/* ---------- misc sections ---------- */
.section-divider{
  display:flex;align-items:center;gap:10px;
  margin:22px 0 12px 0;font-size:12px;font-weight:700;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.03em;
}
.section-divider::after{content:'';flex:1;height:1px;background:var(--border);}

.empty-state{
  text-align:center;
  padding:60px 20px;
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-md);
  color:var(--ink-muted);
}
.empty-state .es-title{font-family:'Space Grotesk';font-weight:600;font-size:15px;color:var(--ink);margin-bottom:6px;}
.empty-state button, .empty-state a{margin-top:14px;}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;max-width:360px;}
.field label{font-size:12px;font-weight:600;color:var(--ink-muted);}
.field input, .field select, .field textarea{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px 10px;
  font-size:13px;
  font-family:inherit;
  color:var(--ink);
  background:var(--surface);
  width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--primary);}
.field input[type="checkbox"], .field input[type="radio"]{
  width:auto;flex:none;border:none;padding:0;background:none;
}
.field-error{font-size:11.5px;color:var(--danger);}
.field-pair{display:flex;gap:12px;}
.field-pair > .field{flex:1;min-width:0;}

.form-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:24px;
  max-width:420px;
  box-shadow:var(--shadow-card);
}
.form-actions{display:flex;gap:10px;margin-top:8px;}

.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:24px;
}
.auth-card{
  width:100%;max-width:360px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:28px 26px;
  box-shadow:var(--shadow-lift);
}
.auth-error{
  background:color-mix(in srgb, var(--danger) 12%, var(--surface));
  color:var(--danger);
  border-radius:var(--radius-sm);
  padding:8px 10px;
  font-size:12.5px;
  margin-bottom:14px;
}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:var(--scrim);
  display:flex;align-items:flex-start;justify-content:center;
  padding:44px 16px;overflow-y:auto;z-index:50;
}
.modal-overlay.hidden{display:none;}
.modal{
  background:var(--surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-modal);
  width:100%;max-width:560px;
  padding:26px 28px 24px 28px;
}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.modal-head h3{font-size:16.5px;}
.modal-close{
  width:28px;height:28px;border-radius:6px;border:none;background:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-faint);
}
.modal-close:hover{background:var(--surface-alt);color:var(--ink);}
.modal-close svg{width:16px;height:16px;stroke:currentColor;}

.modal-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;flex-wrap:wrap;}
.modal-tab{
  padding:8px 10px;border:none;background:none;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--ink-muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.modal-tab:hover{color:var(--ink);}
.modal-tab.active{color:var(--primary);border-bottom-color:var(--primary);}
.modal-tab:disabled{color:var(--ink-faint);cursor:not-allowed;}

.modal-tab-panel{display:none;}
.modal-tab-panel.active{display:block;}
.modal-hint{font-size:12px;color:var(--ink-faint);font-style:italic;margin-bottom:12px;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-grid .field{max-width:none;margin-bottom:0;}
.field.span-2{grid-column:1 / -1;}
.field textarea{resize:vertical;min-height:56px;}

.chip-group label.chip{position:relative;display:inline-flex;align-items:center;gap:0;cursor:pointer;}
.chip-group label.chip input{position:absolute;opacity:0;width:1px;height:1px;}
.chip-group label.chip:has(input:checked){background:linear-gradient(135deg,var(--primary-a),var(--primary-b));color:#fff;border-color:transparent;}

.people-select{position:relative;}
.people-select-trigger{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:8px 10px;font-size:13px;font-family:inherit;
  background:var(--surface);color:var(--ink);cursor:pointer;
}
.people-select-trigger:hover{border-color:var(--border-strong);}
.people-select-trigger.placeholder{color:var(--ink-faint);}
.people-select-trigger svg{width:16px;height:16px;stroke:currentColor;color:var(--ink-muted);flex-shrink:0;transition:transform .15s ease;}
.people-select.open .people-select-trigger svg{transform:rotate(180deg);}
.people-select.open .people-select-trigger{border-color:var(--primary);}

.people-select-panel{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lift);padding:6px;max-height:220px;overflow-y:auto;
}
.people-select.open .people-select-panel{display:block;}

.people-select-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;color:var(--ink);}
.people-select-row:hover{background:var(--surface-alt);}
.people-select-row input{width:auto;flex:0 0 auto;margin:0;padding:0;border-radius:3px;}
.people-select-row.locked{cursor:default;}
.people-select-row.locked:hover{background:none;}
.people-select-row.locked input{accent-color:var(--primary);}
.people-select-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

.progress-track{height:8px;background:var(--surface-alt);border-radius:5px;overflow:hidden;}
.progress-fill{height:100%;border-radius:5px;}
.progress-auto-note{font-size:11px;color:var(--ink-faint);margin-top:6px;font-style:italic;}

.toggle-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-muted);margin:8px 0;}

.report-presets{display:flex;gap:8px;margin-bottom:14px;}
.report-presets button{flex:1;}
.report-presets button.active{background:var(--primary-tint);color:var(--primary-ink);border-color:transparent;font-weight:600;}
.report-daterange{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

.settings-section-label{
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-faint);margin:16px 0 8px;
}
.settings-section-label:first-child{margin-top:0;}

.modal-footer{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--border);
}
.footer-actions{display:flex;gap:8px;}
.btn-danger-text{
  background:none;border:none;color:var(--danger);font-size:12.5px;cursor:pointer;
  display:flex;align-items:center;gap:6px;padding:0;
}
.btn-danger-text svg{width:13px;height:13px;stroke:currentColor;}

/* ---------- photo/logo crop dialog ---------- */
.crop-modal{max-width:420px;}
.crop-stage{
  position:relative;width:100%;aspect-ratio:1/1;
  overflow:hidden;border-radius:var(--radius-sm);
  background:#15181a;
  touch-action:none;cursor:grab;user-select:none;
}
.crop-stage:active{cursor:grabbing;}
.crop-stage img{
  position:absolute;top:0;left:0;
  max-width:none;pointer-events:none;user-select:none;
}
.crop-mask{
  position:absolute;inset:10%;pointer-events:none;
  box-shadow:0 0 0 2000px rgba(10,12,11,0.62);
  border:2px solid rgba(255,255,255,0.85);
}
.crop-mask.shape-circle{border-radius:50%;}
.crop-mask.shape-square{border-radius:10px;}

.crop-zoom-row{display:flex;align-items:center;gap:10px;margin-top:16px;}
.crop-zoom-row svg{width:16px;height:16px;stroke:var(--ink-faint);flex:none;}
.crop-zoom-row input[type="range"]{flex:1;accent-color:var(--primary);}

/* ---------- checklist tab ---------- */
.checklist-progress-note{font-size:12px;color:var(--ink-faint);margin-bottom:10px;}
.checklist-items{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.checklist-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.checklist-check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;flex:1;min-width:0;}
.checklist-check span.done{text-decoration:line-through;color:var(--ink-faint);}
.checklist-add-row{display:flex;gap:8px;}
.checklist-add-row input{
  flex:1;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:8px 10px;font-size:13px;font-family:inherit;color:var(--ink);background:var(--surface);
}
.checklist-add-row input:focus{border-color:var(--primary);}

/* ---------- attachments tab ---------- */
.attachment-drop{
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border-strong);border-radius:var(--radius-sm);
  padding:18px;font-size:12.5px;color:var(--ink-muted);cursor:pointer;margin-bottom:14px;
}
.attachment-drop:hover{border-color:var(--primary);color:var(--primary);}
.attachment-drop.dragover{border-color:var(--primary);color:var(--primary);background:var(--primary-tint);}
.attachments-list{display:flex;flex-direction:column;gap:8px;}
.attachment-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);
}
.attachment-name{font-size:13px;font-weight:600;color:var(--primary);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.attachment-meta{font-size:11.5px;color:var(--ink-faint);white-space:nowrap;}

/* ---------- activity tab ---------- */
.comments-list, .history-list{
  scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent;
}
.comments-list::-webkit-scrollbar, .history-list::-webkit-scrollbar{width:6px;}
.comments-list::-webkit-scrollbar-track, .history-list::-webkit-scrollbar-track{background:transparent;}
.comments-list::-webkit-scrollbar-thumb, .history-list::-webkit-scrollbar-thumb{
  background-color:var(--border-strong);border-radius:999px;
}
.comments-list::-webkit-scrollbar-thumb:hover, .history-list::-webkit-scrollbar-thumb:hover{background-color:var(--primary);}
.comments-list{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;max-height:240px;overflow-y:auto;}
.comment-row{padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);}
.comment-row.internal{background:var(--surface-alt);}
.comment-head{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:4px;}
.comment-date{color:var(--ink-faint);}
.comment-text{font-size:13px;white-space:pre-wrap;}
.mention{color:var(--primary);font-weight:600;}
.comment-form textarea{
  width:100%;margin-bottom:8px;min-height:56px;resize:vertical;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:8px 10px;font-size:13px;font-family:inherit;color:var(--ink);background:var(--surface);
}
.comment-form textarea:focus{border-color:var(--primary);}

.comment-row .link-btn{margin-top:6px;font-size:11.5px;}
.reply-list{margin-top:10px;padding-left:14px;border-left:2px solid var(--border);display:flex;flex-direction:column;gap:8px;}
.comment-reply .comment-text{font-size:12.5px;}
.reply-form{margin-top:8px;}
.reply-form textarea{
  width:100%;margin-bottom:6px;min-height:44px;resize:vertical;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:7px 9px;font-size:12.5px;font-family:inherit;color:var(--ink);background:var(--surface);
}
.reply-form textarea:focus{border-color:var(--primary);}

.mention-dropdown{
  position:fixed;z-index:60;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lift);max-height:160px;overflow-y:auto;
}
.mention-dropdown div{padding:6px 10px;font-size:12.5px;cursor:pointer;color:var(--ink);}
.mention-dropdown div:hover{background:var(--surface-alt);}

/* ---------- history tab ---------- */
.history-list{display:flex;flex-direction:column;gap:10px;max-height:320px;overflow-y:auto;}
.history-row{font-size:12.5px;color:var(--ink-muted);}
.history-date{color:var(--ink-faint);}

/* ---------- statistics page ---------- */
.stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:20px;
}
.chart-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:22px;
  box-shadow:var(--shadow-card);
}
.chart-card.span-2{grid-column:1 / -1;}
.chart-card-head{
  display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px;
  margin-bottom:16px;
}
.chart-card-head h3{font-size:14.5px;}
.chart-card-head .hint{font-size:11.5px;color:var(--ink-faint);}

.donut-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.donut-legend{display:flex;flex-direction:column;gap:9px;flex:1;min-width:150px;}
.donut-legend-item{display:grid;grid-template-columns:9px 1fr auto auto;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-muted);}
.donut-legend-item .legend-dot{width:9px;height:9px;}
.donut-legend-item .dl-label{color:var(--ink);font-weight:500;}
.donut-legend-item .dl-value{font-variant-numeric:tabular-nums;color:var(--ink-faint);}
.donut-legend-item .dl-pct{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;width:36px;text-align:right;}

.bar-chart-list{display:flex;flex-direction:column;gap:13px;}
.bar-row{display:grid;grid-template-columns:118px 1fr 48px;align-items:center;gap:12px;}
.bar-label{font-size:12.5px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-track{height:11px;background:var(--surface-alt);border-radius:6px;overflow:hidden;}
.bar-fill{height:100%;border-radius:6px;}
.bar-value{font-size:12px;color:var(--ink-muted);text-align:right;font-variant-numeric:tabular-nums;}

/* ---------- audit log page ---------- */
.audit-list{display:flex;flex-direction:column;}
.audit-row{padding:12px 4px;border-bottom:1px solid var(--border);}
.audit-row:last-child{border-bottom:none;}
.audit-main{font-size:13px;color:var(--ink);}
.audit-meta{font-size:12px;color:var(--ink-faint);margin-top:2px;}
.link-btn{
  background:none;border:none;color:var(--primary);font-weight:600;
  font-size:inherit;cursor:pointer;padding:0;
}
.link-btn:hover{color:var(--primary-ink);text-decoration:underline;}

/* ---------- infinite-scroll "load more" sentinel ---------- */
.load-more-sentinel{display:flex;align-items:center;justify-content:center;padding:18px 0;}
.load-more-spinner{
  font-size:12.5px;color:var(--ink-faint);font-style:italic;
  display:flex;align-items:center;gap:8px;
}
.load-more-spinner::before{
  content:"";width:14px;height:14px;border-radius:50%;
  border:2px solid var(--border-strong);border-top-color:var(--primary);
  animation:loadMoreSpin .7s linear infinite;
}
@keyframes loadMoreSpin{to{transform:rotate(360deg);}}

/* ---------- super admin ---------- */
.profile-summary{display:flex;align-items:center;gap:10px;padding:4px 2px;}
.profile-summary-name{font-size:13px;font-weight:600;color:var(--ink);}
.avatar-sm{width:28px;height:28px;font-size:12px;}

.sa-list-head{display:flex;justify-content:flex-end;margin-bottom:12px;color:var(--ink-muted);font-size:12.5px;}

.sa-company-list{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:18px;}
.sa-company-card{
  display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:20px;box-shadow:var(--shadow-card);color:inherit;text-decoration:none;
}
.sa-company-card:hover{border-color:var(--border-strong);}
.sa-company-card-head{display:flex;align-items:center;gap:14px;}
.sa-company-logo{
  width:52px;height:52px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:'Space Grotesk';font-weight:700;font-size:20px;color:#fff;
}
.sa-company-logo img{width:100%;height:100%;object-fit:cover;}
.sa-company-name{font-weight:700;font-size:16.5px;}
.sa-company-sub{font-size:13px;color:var(--ink-muted);}
.sa-company-card-head .sa-action-btn{margin-left:auto;}
.sa-company-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;}
.sa-company-avatars{display:flex;}
.sa-company-avatars .avatar{margin-left:-8px;border:2px solid var(--surface);}
.sa-company-avatars .avatar:first-child{margin-left:0;}
.sa-company-empty{font-size:12px;color:var(--ink-faint);}
.sa-company-admins{font-size:12.5px;color:var(--ink-muted);}

.sa-company-add{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  border:1.5px dashed var(--border-strong);border-radius:var(--radius-md);
  padding:20px;color:var(--ink-faint);background:none;cursor:pointer;font-size:14px;font-weight:600;
}
.sa-company-add:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-tint);}
.sa-company-add svg{width:16px;height:16px;stroke:currentColor;}

.sa-action-btn{
  flex:none;width:32px;height:32px;border-radius:8px;
  border:1px solid transparent;background:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink-faint);
}
.sa-action-btn:hover{background:var(--surface-alt);color:var(--ink);border-color:var(--border);}
.sa-action-btn svg{width:17px;height:17px;stroke:currentColor;}

.sa-table-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:20px;max-width:860px;}
.sa-table-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.sa-table-head h3{font-size:15px;}
.sa-table-head .search-box{max-width:280px;}
.sa-table{width:100%;border-collapse:collapse;}
.sa-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint);font-weight:700;padding:10px;border-bottom:1px solid var(--border);}
.sa-table td{padding:13px 10px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle;}
.sa-table tr:last-child td{border-bottom:none;}
.sa-employee-name{display:flex;align-items:center;gap:10px;font-weight:600;}
.sa-muted{color:var(--ink-muted);}
.sa-row-actions{display:flex;gap:6px;justify-content:flex-end;}
.role-badge-member{background:var(--surface-alt);color:var(--ink-muted);}

.password-input-wrap{position:relative;}
.password-input-wrap input{padding-right:34px;}
.password-toggle-btn{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:none;background:none;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink-faint);
}
.password-toggle-btn:hover{background:var(--surface-alt);color:var(--ink);}
.password-toggle-btn svg{width:16px;height:16px;stroke:currentColor;}

/* ---------- mobile-only chrome (hidden on desktop) ---------- */
.mobile-only, .drawer-close, .nav-scrim, .bottom-nav{display:none;}

@keyframes sheetUp{
  from{transform:translateY(32px);opacity:.5;}
  to{transform:none;opacity:1;}
}

/* ---------- responsive: tablet ---------- */
@media (max-width: 1100px){
  .hero-grid{grid-template-columns:1fr;}
  .people-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stat-row-5{grid-template-columns:repeat(3,minmax(0,1fr));}

  /* Task card: fold the desktop columns into a compact grid instead of hiding them. */
  .task-card-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
    grid-template-areas:
      "main  main  main"
      "dates dates actions"
      "by    to    to";
    gap:10px 0;
    padding-right:0;
  }
  .task-main{grid-area:main;min-width:0;}
  .task-card-row:has(.work-toggle-big) .task-main{padding-right:56px;}
  .t-title{min-width:0;overflow-wrap:anywhere;}
  .t-dates{grid-area:dates;display:flex;flex-wrap:wrap;gap:2px 16px;align-self:center;}
  .t-dates .row{margin:0;gap:5px;}
  .t-dates .row span:first-child{flex:none;}
  .t-dates .row span:last-child{text-align:left;}
  .t-actions{grid-area:actions;justify-content:flex-end;}
  .t-assign{grid-area:by;min-width:0;align-self:stretch;padding-top:10px;border-top:1px solid var(--border);}
  .t-assign.t-assign-to{grid-area:to;padding-left:12px;}
  .t-assign > div:first-child{font-size:11px;color:var(--ink-faint);margin-bottom:2px;}
  .work-toggle-big{top:0;right:0;transform:none;}
  .work-toggle-big:hover{transform:scale(1.05);}
  .task-card-desc-inner{padding-right:0;}
}

/* ---------- responsive: phone ---------- */
@media (max-width: 860px){
  .mobile-only{display:flex;}
  .app{display:block;min-height:100dvh;}
  .sidebar-resizer{display:none;}

  /* sidebar becomes a slide-in drawer */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:60;
    width:min(86vw,320px);height:100dvh;
    padding:calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    border-right:none;box-shadow:var(--shadow-modal);
    transform:translateX(-105%);visibility:hidden;
    transition:transform .26s cubic-bezier(.32,.72,0,1), visibility 0s linear .26s;
    overscroll-behavior:contain;
  }
  body.nav-open .sidebar{
    transform:none;visibility:visible;
    transition:transform .26s cubic-bezier(.32,.72,0,1), visibility 0s;
  }
  body.nav-open{overflow:hidden;}
  .nav-scrim{
    display:block;position:fixed;inset:0;z-index:55;background:var(--scrim);
    opacity:0;pointer-events:none;transition:opacity .26s ease;
  }
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto;}
  .drawer-close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:calc(14px + env(safe-area-inset-top));right:10px;z-index:2;
    width:38px;height:38px;border-radius:var(--radius-sm);border:none;background:none;
    color:var(--ink-faint);cursor:pointer;
  }
  .drawer-close:active{background:var(--surface-alt);}
  .drawer-close svg{width:18px;height:18px;stroke:currentColor;}
  .brand{padding:4px 46px 18px 8px;}
  .company-switch-btn{padding:12px 10px;font-size:14px;}
  .nav-item{padding:11px 12px;font-size:15px;}
  .nav-item svg{width:18px;height:18px;}
  .nav-count{font-size:12.5px;}
  .nav-section-label{font-size:11.5px;}
  .person-action-btn{width:38px;height:38px;border-radius:8px;}
  .person-action-btn svg{width:16px;height:16px;}
  .theme-opt{width:40px;height:32px;}
  .theme-opt svg{width:16px;height:16px;}
  .ghost-btn{padding:12px;font-size:14px;}
  .sidebar-footer{gap:8px;}

  /* topbar */
  .topbar{
    padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left));
    gap:8px;flex-wrap:wrap;
  }
  .topbar-title-row{flex:1;min-width:0;gap:10px;}
  .topbar-title-row > div{min-width:0;}
  .topbar h1{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .topbar .sub{display:none;}
  .topbar-spacer{display:none;}
  .topbar-avatar{width:32px;height:32px;font-size:13px;}
  .topbar-add-btn{display:none;}
  .bell-btn{width:40px;height:40px;flex:none;}
  .bell-btn svg{width:18px;height:18px;}
  .bell-dot{top:8px;right:9px;}
  .topbar .search-box{display:none;}
  .topbar.search-open .search-box{display:flex;order:10;flex:1 0 100%;width:auto;min-height:42px;padding:0 12px;}
  .topbar.search-open [data-search-toggle]{border-color:var(--primary);color:var(--primary);}
  .topbar .btn-primary, .topbar .btn-secondary{min-height:40px;padding:0 12px;flex:none;}
  .topbar .btn-label{display:none;}
  .topbar-back-btn{order:-1;}
  .topbar-menu-btn{order:20;}

  /* notifications: full-width panel under the topbar */
  .notif-wrap{position:static;}
  .notif-panel{
    top:calc(100% + 6px);left:10px;right:10px;width:auto;
    max-height:min(70dvh,520px);padding:8px;border-radius:14px;
  }
  .notif-item{padding:12px 10px;font-size:13.5px;}
  .notif-item .t{font-size:12px;}

  /* bottom tab bar */
  body.has-bottom-nav .view-root{padding-bottom:calc(100px + env(safe-area-inset-bottom));}
  .bottom-nav{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:6px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
    background:color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border-top:1px solid var(--border);
  }
  .bn-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:50px;padding:4px 2px;border:none;background:none;border-radius:12px;
    font-family:inherit;font-size:10.5px;font-weight:600;color:var(--ink-faint);
    cursor:pointer;white-space:nowrap;overflow:hidden;
    -webkit-tap-highlight-color:transparent;
  }
  .bn-item svg{width:22px;height:22px;stroke:currentColor;flex:none;}
  .bn-item.active{color:var(--primary);}
  .bn-item:active{background:var(--surface-alt);}
  .bn-add{
    justify-self:center;width:58px;height:58px;margin-top:-26px;
    border:5px solid var(--bg);border-radius:20px;
    background:linear-gradient(135deg,var(--primary-a),var(--primary-b));
    background-clip:padding-box;
    color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
    box-shadow:0 8px 18px color-mix(in srgb, var(--primary) 30%, transparent);
    -webkit-tap-highlight-color:transparent;
    transition:transform .12s ease;
  }
  .bn-add svg{width:22px;height:22px;stroke:#fff;}
  .bn-add:active{transform:scale(.94);}

  /* page layout */
  .view-root{padding:16px calc(14px + env(safe-area-inset-right)) 40px calc(14px + env(safe-area-inset-left));}
  .section-heading{flex-wrap:wrap;gap:2px 10px;margin:26px 0 12px;}
  .empty-state{padding:40px 18px;}

  /* dashboard */
  .hero-grid{gap:12px;margin-bottom:8px;}
  .hero-card{padding:18px;gap:18px;}
  .ring-wrap, .ring-wrap svg{width:96px;height:96px;}
  .ring-label{width:62px;height:62px;}
  .ring-num{font-size:20px;}
  .hero-text .hero-title{font-size:15px;}
  .stat-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .stat-row-5{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stat-row-5 > :last-child{grid-column:1 / -1;}
  .stat-tile{padding:14px 12px;}
  .stat-tile .num{font-size:22px;line-height:1.2;}
  .stat-tile .label{font-size:12px;margin-top:2px;}
  .people-grid{grid-template-columns:1fr;gap:12px;}
  .person-card{padding:16px;}

  /* task list filters: one swipeable row of chips */
  .filter-bar{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px;margin-bottom:14px;}
  .filter-bar .topbar-spacer{display:none;}
  .filter-chips{
    display:flex;align-items:center;gap:8px;
    overflow-x:auto;scrollbar-width:none;
    margin:0 -14px;padding:2px 14px;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
  }
  .filter-chips::-webkit-scrollbar{display:none;}
  .filter-chips .chip-group{flex-wrap:nowrap;}
  .filter-divider{flex:none;}
  .chip{padding:8px 14px;font-size:13px;white-space:nowrap;}
  .sort-select{align-self:flex-start;min-height:38px;padding:6px 12px;font-size:16px;}
  .section-divider{margin:20px 0 10px;}

  /* task cards */
  .task-card-body{padding:14px 14px 24px;}
  .task-main .t-title-row{flex-wrap:nowrap;align-items:flex-start;}
  .task-main .t-title{font-size:15px;line-height:1.35;}
  .priority-box{margin-top:1px;}
  .work-toggle-big:hover{transform:none;}
  .icon-btn{width:38px;height:38px;border-radius:8px;}
  .icon-btn svg{width:16px;height:16px;}
  .task-icon-btn{width:32px;height:32px;}
  .t-actions{gap:4px;margin-right:10px;}
  .task-card.expanded .task-card-desc{max-height:2400px;}
  .task-card-desc-text{font-size:14px;}
  .progress-side{width:6px;}
  .assignee-pop-btn{padding:7px 10px;font-size:13px;}
  .assignee-pop-panel{width:min(240px,70vw);}
  .assignee-pop-item{padding:9px 8px;font-size:13.5px;}

  /* statistics */
  .stats-grid{grid-template-columns:1fr;gap:12px;margin-top:12px;}
  .chart-card{padding:16px;}
  .donut-wrap{gap:18px;}
  .donut-wrap svg{width:104px;height:104px;flex:none;}
  .donut-legend{min-width:140px;}
  .donut-legend-item{font-size:13px;}
  .bar-row{grid-template-columns:minmax(0,92px) 1fr 40px;gap:10px;}

  /* audit log */
  .audit-row{padding:12px 0;}
  .audit-main{font-size:14px;}
  .audit-meta .link-btn{text-align:left;}

  /* forms: 16px inputs stop iOS from zooming the page on focus */
  .field{max-width:none;}
  .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea,
  .checklist-add-row input, .comment-form textarea, .reply-form textarea,
  .search-box input, .people-select-trigger{font-size:16px;}
  .field input:not([type="checkbox"]):not([type="radio"]), .field select,
  .checklist-add-row input, .people-select-trigger{min-height:44px;}
  .field input[type="date"]{display:block;-webkit-appearance:none;appearance:none;}
  .field input[type="date"]::-webkit-date-and-time-value{text-align:left;}
  .modal input[type="checkbox"], .form-card input[type="checkbox"], .task-card input[type="checkbox"]{
    width:20px;height:20px;flex:none;accent-color:var(--primary);
  }
  .field-pair{flex-direction:column;gap:0;}
  .form-card{max-width:none;padding:18px;}
  .form-actions > *{flex:1;justify-content:center;min-height:46px;}
  .toggle-row{font-size:14px;min-height:36px;}
  .person-photo-row{flex-wrap:wrap;}
  .password-toggle-btn{width:38px;height:38px;}
  .password-input-wrap input{padding-right:44px;}

  /* modals become bottom sheets */
  body:has(.modal-overlay:not(.hidden)){overflow:hidden;}
  .modal-overlay{padding:env(safe-area-inset-top) 0 0;align-items:flex-end;overflow:hidden;}
  .modal{
    max-width:none !important;
    max-height:calc(100dvh - 12px - env(safe-area-inset-top));
    overflow-y:auto;overscroll-behavior:contain;
    border-radius:18px 18px 0 0;
    padding:0 calc(18px + env(safe-area-inset-right)) 0 calc(18px + env(safe-area-inset-left));
    animation:sheetUp .26s cubic-bezier(.32,.72,0,1);
  }
  .modal > :last-child:not(.modal-footer):not(:has(> .modal-footer:last-child)){
    margin-bottom:calc(18px + env(safe-area-inset-bottom));
  }
  .modal-head{
    position:sticky;top:0;z-index:4;background:var(--surface);
    margin:0;padding:22px 0 12px;gap:10px;
  }
  .modal-head::before{
    content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:2px;background:var(--border-strong);
  }
  .modal-head h3{font-size:17px;min-width:0;overflow-wrap:anywhere;}
  .modal-close{width:38px;height:38px;margin-right:-8px;flex:none;}
  .modal-close svg{width:18px;height:18px;}
  .modal-hint{font-size:12.5px;}
  .modal-tabs{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 -18px 16px;padding:0 18px;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
    mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
  }
  .modal-tabs::-webkit-scrollbar{display:none;}
  .modal-tab{white-space:nowrap;padding:11px 12px;font-size:14px;flex:none;}
  .modal-footer{
    position:sticky;bottom:0;z-index:4;background:var(--surface);
    flex-direction:column-reverse;align-items:stretch;gap:4px;
    margin-top:18px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));
  }
  .modal-footer > span:empty{display:none;}
  .footer-actions{gap:10px;}
  .footer-actions > *{flex:1 1 0;min-width:0;}
  .footer-actions > form{display:flex;}
  .footer-actions > form > button{width:100%;}
  .footer-actions .btn-primary, .footer-actions .btn-secondary{justify-content:center;min-height:46px;font-size:15px;}
  .modal-footer .btn-danger-text{justify-content:center;padding:10px;font-size:14px;}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;}

  /* task modal tabs */
  .comments-list, .history-list{max-height:none;overflow:visible;}
  .comment-text{font-size:14px;}
  .comment-row .link-btn{padding:6px 0;font-size:13px;}
  .comment-form .btn-primary{width:100%;justify-content:center;min-height:44px;}
  .reply-form .btn-secondary{min-height:40px;}
  .history-row{font-size:13.5px;}
  .checklist-row{min-height:44px;}
  .checklist-check{font-size:14.5px;gap:12px;padding:6px 0;}
  .checklist-add-row .btn-secondary{min-height:44px;}
  .attachment-drop{padding:22px 16px;font-size:14px;text-align:center;}
  .attachment-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;padding:10px 12px;}
  .attachment-row .attachment-name{grid-column:1;font-size:14px;}
  .attachment-row .attachment-meta{grid-column:1;grid-row:2;white-space:normal;}
  .attachment-row .icon-btn{grid-column:2;grid-row:1 / span 2;align-self:center;}
  .people-select-row{padding:11px 10px;font-size:15px;}
  .people-select-panel{max-height:min(300px,45dvh);}
  .report-presets button{justify-content:center;min-height:42px;}
  .report-daterange{gap:12px;}

  /* super admin */
  .sa-list-head{justify-content:flex-start;}
  .sa-company-list{grid-template-columns:1fr;gap:12px;}
  .sa-company-card{padding:16px;}
  .sa-action-btn{width:40px;height:40px;}
  .sa-table-card{padding:14px;}
  .sa-table-head{flex-direction:column;align-items:stretch;gap:12px;}
  .sa-table-head .search-box{max-width:none;width:auto;min-height:44px;}
  .sa-table thead{display:none;}
  .sa-table, .sa-table tbody{display:block;}
  .sa-table tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name actions" "user role";
    align-items:center;gap:0 10px;padding:12px 0;border-bottom:1px solid var(--border);
  }
  .sa-table tr:last-child{border-bottom:none;}
  .sa-table td{display:block;padding:0;border:none;}
  .sa-table td:nth-child(1){grid-area:name;min-width:0;}
  .sa-table td:nth-child(2){grid-area:user;padding-left:38px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .sa-table td:nth-child(3){grid-area:role;justify-self:end;}
  .sa-table td.sa-row-actions{grid-area:actions;display:flex;}

  /* sign-in */
  .auth-wrap{min-height:100dvh;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));}
  .auth-card{padding:24px 20px;}
  .auth-card .btn-primary{min-height:46px;font-size:15px;}
}

/* ---------- responsive: small phones ---------- */
@media (max-width: 380px){
  .form-grid{grid-template-columns:1fr;}
  .stat-tile{padding:12px 10px;}
  .stat-tile .num{font-size:20px;}
  .stat-tile .label{font-size:11.5px;}
  .bn-item{font-size:10px;}
  .t-assign.t-assign-to{padding-left:8px;}
}

/* ---------- touch devices: no hover-only affordances ---------- */
@media (hover: none){
  .expand-indicator{opacity:.5;}
  .btn-primary:hover{transform:none;filter:none;}
}