/* ============================================================
   TrackUp — Design Tokens
   ============================================================ */
:root{
  --primary:#0088FC;
  --primary-hover:#0079e0;
  --secondary:#00B6FF;
  --accent:#63D3FF;
  --primary-tint:#EAF5FF;
  --primary-tint-2:#DCEFFF;

  --bg:#F8FBFF;
  --surface:#FFFFFF;
  --text:#141414;
  --text-secondary:#6B7280;
  --text-tertiary:#9CA3AF;
  --border:#E6E6E6;
  --border-soft:#EEF1F4;

  --gray:#9CA3AF;
  --gray-tint:#F3F4F6;
  --blue:#0088FC;
  --blue-tint:#EAF5FF;
  --orange:#F59E0B;
  --orange-tint:#FEF3E2;
  --green:#10B981;
  --green-tint:#E7F9F1;
  --red:#EF4444;
  --red-tint:#FDECEC;

  --r-lg:16px;
  --r-md:12px;
  --r-sm:9px;
  --r-xs:6px;

  --shadow-1:0 1px 2px rgba(20,20,20,0.04), 0 1px 1px rgba(20,20,20,0.03);
  --shadow-2:0 6px 20px rgba(20,20,20,0.06);
  --shadow-focus:0 0 0 4px rgba(0,136,252,0.12);

  --ease:cubic-bezier(.4,0,.2,1);
  --dur:200ms;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:14px; color:var(--text);}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
::selection{background:var(--primary-tint-2);}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:4px;}
svg{display:block;}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#DCE2EA; border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

.icon{width:18px; height:18px; stroke:currentColor; stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 16px; border-radius:var(--r-sm);
  font-size:13.5px; font-weight:600; border:1px solid transparent;
  transition:all var(--dur) var(--ease); white-space:nowrap;
}
.btn .icon{width:16px; height:16px;}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-hover); transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,136,252,0.28);}
.btn-secondary{background:#fff; color:var(--text); border-color:var(--border);}
.btn-secondary:hover{border-color:#C9D2DC; background:#FAFCFF;}
.btn-ghost{background:transparent; color:var(--text-secondary);}
.btn-ghost:hover{background:var(--gray-tint); color:var(--text);}
.btn-sm{height:32px; padding:0 12px; font-size:13px; border-radius:var(--r-xs);}
.btn-danger-ghost{background:transparent; color:var(--red);}
.btn-danger-ghost:hover{background:var(--red-tint);}
.btn-icon{width:36px; height:36px; padding:0; border-radius:var(--r-sm); background:#fff; border:1px solid var(--border); color:var(--text-secondary);}
.btn-icon:hover{border-color:#C9D2DC; color:var(--text);}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none !important;}

/* ============================================================
   Login Screen
   ============================================================ */
#screen-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(600px 400px at 12% 8%, rgba(99,211,255,0.16), transparent 60%),
    radial-gradient(700px 500px at 88% 92%, rgba(0,182,255,0.12), transparent 60%),
    var(--bg);
  padding:24px;
}
.login-card{
  width:100%; max-width:400px; background:#fff; border:1px solid var(--border-soft);
  border-radius:20px; padding:40px 36px 32px; box-shadow:var(--shadow-2);
  animation:fadeUp .5s var(--ease);
}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
.login-logo{display:flex; align-items:center; gap:10px; margin-bottom:28px;}
.logo-mark{width:34px; height:34px; border-radius:9px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0;}
.logo-word{font-weight:600; font-size:16px; letter-spacing:-.2px;}
.logo-word span{color:var(--text-secondary); font-weight:500;}
.login-card h1{font-size:21px; font-weight:600; letter-spacing:-.3px; margin-bottom:6px;}
.login-card p.sub{color:var(--text-secondary); font-size:13.5px; margin-bottom:26px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:6px;}
.field input, .field select{
  width:100%; height:42px; border:1px solid var(--border); border-radius:var(--r-sm);
  padding:0 14px; background:#FCFDFF; transition:all var(--dur) var(--ease);
}
.field select{color:var(--text);}
.field input:focus, .field select:focus{outline:none; border-color:var(--primary); box-shadow:var(--shadow-focus); background:#fff;}
.field select.err, .field input.err{border-color:var(--red);}
.field-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.checkbox-row{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-secondary);}
.checkbox-row input{width:15px; height:15px; accent-color:var(--primary);}
.link-sm{font-size:13px; color:var(--primary); font-weight:500;}
.link-sm:hover{text-decoration:underline;}
.login-card .btn-primary{width:100%; height:42px; font-size:14px;}
.login-divider{display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--text-tertiary); font-size:12px;}
.login-divider::before,.login-divider::after{content:''; flex:1; height:1px; background:var(--border-soft);}
.sso-btn{width:100%; height:42px; border:1px solid var(--border); border-radius:var(--r-sm); background:#fff; display:flex; align-items:center; justify-content:center; gap:10px; font-size:13.5px; font-weight:500; transition:all var(--dur) var(--ease);}
.sso-btn:hover{border-color:#C9D2DC; background:#FAFCFF;}
.login-foot{text-align:center; margin-top:24px; font-size:12.5px; color:var(--text-tertiary);}

/* ============================================================
   App Shell
   ============================================================ */
#app{display:none; min-height:100vh;}
#app.active{display:flex;}

/* Sidebar */
.sidebar{
  width:236px; flex-shrink:0; background:#fff; border-right:1px solid var(--border-soft);
  height:100vh; position:sticky; top:0; display:flex; flex-direction:column; padding:20px 14px;
}
.sidebar-logo{display:flex; align-items:center; gap:10px; padding:6px 10px 22px;}
.nav-section-label{font-size:11px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.5px; padding:16px 10px 8px;}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--r-xs);
  color:var(--text-secondary); font-size:13.75px; font-weight:500; margin-bottom:2px;
  transition:all var(--dur) var(--ease); position:relative;
}
.nav-item .icon{width:18px; height:18px; color:var(--text-tertiary); transition:color var(--dur) var(--ease);}
.nav-item:hover{background:var(--gray-tint); color:var(--text);}
.nav-item:hover .icon{color:var(--text);}
.nav-item.active{background:var(--primary-tint); color:var(--primary); font-weight:600;}
.nav-item.active .icon{color:var(--primary);}
.nav-badge{margin-left:auto; background:var(--red); color:#fff; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:20px;}
.sidebar-bottom{margin-top:auto; padding-top:14px; border-top:1px solid var(--border-soft);}
.sidebar-user{display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--r-sm); transition:background var(--dur) var(--ease);}
.sidebar-user:hover{background:var(--gray-tint);}
.avatar{width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; flex-shrink:0;}
.avatar-sm{width:24px; height:24px; font-size:10.5px;}
.avatar-lg{width:56px; height:56px; font-size:20px;}
.sidebar-user-name{font-size:13px; font-weight:600; line-height:1.3;}
.sidebar-user-role{font-size:11.5px; color:var(--text-tertiary);}

/* Main column */
.main-col{flex:1; min-width:0; display:flex; flex-direction:column; min-height:100vh;}

/* Topbar */
.topbar{
  height:64px; flex-shrink:0; background:rgba(248,251,255,0.85); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:16px;
  padding:0 28px; position:sticky; top:0; z-index:20;
}
.search-box{
  flex:1; max-width:420px; height:38px; background:#fff; border:1px solid var(--border);
  border-radius:var(--r-sm); display:flex; align-items:center; gap:9px; padding:0 12px;
  transition:all var(--dur) var(--ease); color:var(--text-tertiary);
}
.search-box:focus-within{border-color:var(--primary); box-shadow:var(--shadow-focus); color:var(--text-secondary);}
.search-box input{flex:1; border:none; background:transparent; outline:none; font-size:13.5px; color:var(--text);}
.search-kbd{font-size:11px; color:var(--text-tertiary); border:1px solid var(--border); border-radius:5px; padding:1px 6px;}
.topbar-right{display:flex; align-items:center; gap:10px; margin-left:auto;}
.icon-btn{
  width:38px; height:38px; border-radius:var(--r-sm); background:transparent; border:1px solid transparent;
  display:flex; align-items:center; justify-content:center; color:var(--text-secondary); position:relative;
  transition:all var(--dur) var(--ease);
}
.icon-btn:hover{background:var(--gray-tint); color:var(--text);}
.dot-badge{position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--red); border:2px solid #fff;}
.profile-chip{display:flex; align-items:center; gap:8px; padding:5px 8px 5px 5px; border-radius:24px; border:1px solid var(--border); background:#fff; transition:all var(--dur) var(--ease);}
.profile-chip:hover{border-color:#C9D2DC;}
.profile-chip .icon{width:14px; height:14px; color:var(--text-tertiary);}

/* Content wrapper */
.content{flex:1; padding:28px 32px 60px; max-width:1360px; width:100%; margin:0 auto;}
.screen-inner{display:none; animation:fadeIn .25s var(--ease);}
.screen-inner.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.page-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; gap:16px; flex-wrap:wrap;}
.page-head h1{font-size:22px; font-weight:600; letter-spacing:-.3px;}
.page-head .sub{color:var(--text-secondary); font-size:13.5px; margin-top:4px;}
.page-actions{display:flex; gap:10px;}

/* ============================================================
   Cards / Widgets
   ============================================================ */
.card{background:#fff; border:1px solid var(--border-soft); border-radius:var(--r-lg); box-shadow:var(--shadow-1);}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;}
.stat-card{padding:20px 20px 18px; transition:all var(--dur) var(--ease);}
.stat-card:hover{box-shadow:var(--shadow-2); transform:translateY(-1px);}
.stat-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.stat-icon{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.stat-icon .icon{width:17px; height:17px;}
.stat-label{font-size:12.5px; color:var(--text-secondary); font-weight:500;}
.stat-value{font-size:26px; font-weight:700; letter-spacing:-.5px;}
.stat-trend{font-size:11.5px; color:var(--green); font-weight:600; display:flex; align-items:center; gap:3px; margin-top:6px;}
.stat-trend.down{color:var(--red);}

.dash-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:20px; align-items:start;}
.panel{padding:22px 22px 12px;}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.panel-head h3{font-size:15px; font-weight:600;}
.panel-head .link-sm{font-size:12.5px; font-weight:600;}

/* Task rows (dashboard mini list) */
.mini-task{display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--border-soft);}
.mini-task:last-child{border-bottom:none;}
.chk{width:18px; height:18px; border-radius:6px; border:1.75px solid #CBD3DC; flex-shrink:0; cursor:pointer; transition:all var(--dur) var(--ease); display:flex; align-items:center; justify-content:center; background:#fff;}
.chk:hover{border-color:var(--primary);}
.chk.checked{background:var(--primary); border-color:var(--primary);}
.chk.checked svg{width:11px; height:11px; stroke:#fff; stroke-width:3;}
.mini-task-name{font-size:13.5px; font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mini-task-name.done{color:var(--text-tertiary); text-decoration:line-through;}
.mini-task-meta{display:flex; align-items:center; gap:10px; flex-shrink:0;}

/* Tags: status / priority */
.tag{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:20px; white-space:nowrap;}
.tag-dot{width:6px; height:6px; border-radius:50%; flex-shrink:0;}
.tag-gray{background:var(--gray-tint); color:#6B7280;}
.tag-gray .tag-dot{background:var(--gray);}
.tag-blue{background:var(--blue-tint); color:var(--primary);}
.tag-blue .tag-dot{background:var(--blue);}
.tag-orange{background:var(--orange-tint); color:#B45309;}
.tag-orange .tag-dot{background:var(--orange);}
.tag-green{background:var(--green-tint); color:#047857;}
.tag-green .tag-dot{background:var(--green);}
.tag-red{background:var(--red-tint); color:#B91C1C;}
.tag-red .tag-dot{background:var(--red);}

.prio{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--text-secondary);}
.prio-flag{width:12px; height:12px;}
.prio-low .prio-flag{color:#9CA3AF;}
.prio-medium .prio-flag{color:#F59E0B;}
.prio-high .prio-flag{color:#EF4444;}

/* Activity feed */
.activity-item{display:flex; gap:11px; padding:11px 4px; border-bottom:1px solid var(--border-soft);}
.activity-item:last-child{border-bottom:none;}
.activity-text{font-size:13px; line-height:1.5;}
.activity-text b{font-weight:600;}
.activity-time{font-size:11.5px; color:var(--text-tertiary); margin-top:2px;}

/* Deadline list */
.deadline-item{display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--border-soft);}
.deadline-item:last-child{border-bottom:none;}
.deadline-date{width:42px; height:42px; border-radius:11px; background:var(--red-tint); color:var(--red); display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0;}
.deadline-date .d{font-size:14px; font-weight:700; line-height:1;}
.deadline-date .m{font-size:9px; font-weight:700; text-transform:uppercase; margin-top:1px;}
.deadline-date.ok{background:var(--blue-tint); color:var(--primary);}
.deadline-title{font-size:13px; font-weight:600;}
.deadline-sub{font-size:12px; color:var(--text-tertiary); margin-top:1px;}

/* ============================================================
   Toolbar (filters/search inside pages)
   ============================================================ */
.toolbar{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.chip-tabs{display:flex; align-items:center; background:#fff; border:1px solid var(--border); border-radius:var(--r-sm); padding:3px; gap:2px;}
.chip-tab{padding:7px 14px; font-size:12.75px; font-weight:600; color:var(--text-secondary); border-radius:8px; transition:all var(--dur) var(--ease);}
.chip-tab.active{background:var(--primary); color:#fff;}
.chip-tab:not(.active):hover{background:var(--gray-tint); color:var(--text);}
.select-box{height:38px; padding:0 12px; border:1px solid var(--border); border-radius:var(--r-sm); background:#fff; font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:6px;}
.select-box:hover{border-color:#C9D2DC;}
.toolbar-search{height:38px; width:220px; border:1px solid var(--border); border-radius:var(--r-sm); background:#fff; display:flex; align-items:center; gap:8px; padding:0 12px; color:var(--text-tertiary);}
.toolbar-search input{border:none; outline:none; background:transparent; flex:1; font-size:13px;}
.toolbar .spacer{flex:1;}

/* ============================================================
   Task table
   ============================================================ */
.task-table{width:100%; border-collapse:collapse;}
.task-table thead th{
  text-align:left; font-size:11.5px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase;
  letter-spacing:.4px; padding:0 14px 10px; border-bottom:1px solid var(--border-soft);
}
.task-table tbody tr{transition:background var(--dur) var(--ease); cursor:pointer;}
.task-table tbody tr:hover{background:#FAFCFF;}
.task-table tbody td{padding:13px 14px; border-bottom:1px solid var(--border-soft); font-size:13.5px; vertical-align:middle;}
.task-table tbody tr:last-child td{border-bottom:none;}
.task-name-cell{display:flex; align-items:center; gap:11px;}
.task-name-txt{font-weight:500;}
.task-name-txt .proj{display:block; font-size:11.5px; color:var(--text-tertiary); font-weight:400; margin-top:1px;}
.due-txt{color:var(--text-secondary); font-size:13px;}
.due-txt.overdue{color:var(--red); font-weight:600;}
.assignee-cell{display:flex; align-items:center; gap:8px;}
.avatar-stack{display:flex;}
.avatar-stack .avatar-sm{margin-left:-8px; border:2px solid #fff;}
.avatar-stack .avatar-sm:first-child{margin-left:0;}
.row-more{width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); opacity:0; transition:all var(--dur) var(--ease);}
.task-table tbody tr:hover .row-more{opacity:1;}
.row-more:hover{background:var(--gray-tint); color:var(--text);}

.table-card{padding:6px 8px 10px; overflow-x:auto;}

/* ============================================================
   Projects grid
   ============================================================ */
.projects-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.project-card{padding:20px; transition:all var(--dur) var(--ease); cursor:pointer;}
.project-card:hover{box-shadow:var(--shadow-2); transform:translateY(-2px); border-color:#D8E6F7;}
.proj-top{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px;}
.proj-icon{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#fff;}
.proj-name{font-size:15px; font-weight:600; margin-top:14px;}
.proj-desc{font-size:12.5px; color:var(--text-secondary); margin-top:4px; line-height:1.5; min-height:36px;}
.proj-progress-row{display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--text-tertiary); margin-bottom:6px; margin-top:16px;}
.progress-bar{height:6px; background:var(--gray-tint); border-radius:20px; overflow:hidden;}
.progress-bar-fill{height:100%; background:var(--primary); border-radius:20px; transition:width .5s var(--ease);}
.proj-foot{display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft);}

/* ============================================================
   Calendar
   ============================================================ */
.cal-layout{display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start;}
.cal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border-soft);}
.cal-head h3{font-size:16px; font-weight:600;}
.cal-nav{display:flex; align-items:center; gap:4px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr);}
.cal-dow{text-align:center; font-size:11px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; padding:12px 0; border-bottom:1px solid var(--border-soft);}
.cal-cell{min-height:96px; border-right:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); padding:8px; transition:background var(--dur) var(--ease); cursor:pointer;}
.cal-cell:nth-child(7n){border-right:none;}
.cal-cell:hover{background:#FAFCFF;}
.cal-cell.muted{color:var(--text-tertiary); background:#FCFDFE;}
.cal-cell.today .cal-daynum{background:var(--primary); color:#fff; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:7px;}
.cal-cell.selected{background:var(--primary-tint);}
.cal-daynum{font-size:12.5px; font-weight:600; margin-bottom:6px;}
.cal-dot{width:100%; font-size:10.5px; font-weight:600; padding:2px 6px; border-radius:5px; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.side-day-list{padding:20px;}
.side-day-list h4{font-size:13.5px; font-weight:600; margin-bottom:14px;}
.side-task{display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-soft);}
.side-task:last-child{border-bottom:none;}
.side-task .bar{width:3px; align-self:stretch; border-radius:3px; flex-shrink:0;}

/* ============================================================
   Reports
   ============================================================ */
.report-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:20px; margin-bottom:20px;}
.bar-chart{display:flex; align-items:flex-end; gap:14px; height:200px; padding:10px 4px 0;}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end;}
.bar-shape{width:100%; max-width:38px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,var(--secondary),var(--primary)); transition:height .6s var(--ease);}
.bar-label{font-size:11px; color:var(--text-tertiary); font-weight:600;}
.donut-wrap{display:flex; align-items:center; gap:26px; justify-content:center; padding:14px 0;}
.donut{width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.donut-center{width:98px; height:98px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.donut-center .num{font-size:22px; font-weight:700;}
.donut-center .lbl{font-size:10.5px; color:var(--text-tertiary); font-weight:600;}
.legend-item{display:flex; align-items:center; gap:9px; font-size:12.5px; margin-bottom:10px;}
.legend-item:last-child{margin-bottom:0;}
.legend-dot{width:9px; height:9px; border-radius:3px; flex-shrink:0;}
.legend-val{margin-left:auto; font-weight:600; color:var(--text);}
.team-perf-row{display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--border-soft);}
.team-perf-row:last-child{border-bottom:none;}
.team-perf-name{font-size:13px; font-weight:600; width:120px; flex-shrink:0;}
.team-perf-bar{flex:1; height:8px; background:var(--gray-tint); border-radius:20px; overflow:hidden;}
.team-perf-fill{height:100%; background:var(--primary); border-radius:20px;}
.team-perf-pct{font-size:12.5px; font-weight:600; color:var(--text-secondary); width:36px; text-align:right;}

/* ============================================================
   Notifications
   ============================================================ */
.notif-list{max-width:640px;}
.notif-group-label{font-size:12px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.4px; margin:20px 0 10px;}
.notif-group-label:first-child{margin-top:0;}
.notif-item{display:flex; gap:13px; padding:14px 16px; border-radius:var(--r-md); transition:background var(--dur) var(--ease); position:relative;}
.notif-item:hover{background:#fff; box-shadow:var(--shadow-1);}
.notif-item.unread{background:var(--primary-tint);}
.notif-item.unread:hover{background:#E2F1FF;}
.notif-icon{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.notif-body{flex:1;}
.notif-text{font-size:13.5px; line-height:1.5;}
.notif-text b{font-weight:600;}
.notif-time{font-size:11.5px; color:var(--text-tertiary); margin-top:3px;}
.notif-unread-dot{width:8px; height:8px; border-radius:50%; background:var(--primary); flex-shrink:0; margin-top:6px;}

/* ============================================================
   Settings
   ============================================================ */
.settings-layout{display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:start;}
.settings-nav{display:flex; flex-direction:column; gap:2px;}
.settings-nav-item{padding:9px 12px; border-radius:var(--r-xs); font-size:13.5px; font-weight:500; color:var(--text-secondary); transition:all var(--dur) var(--ease);}
.settings-nav-item:hover{background:var(--gray-tint); color:var(--text);}
.settings-nav-item.active{background:var(--primary-tint); color:var(--primary); font-weight:600;}
.settings-panel{padding:26px 28px;}
.settings-panel h3{font-size:16px; font-weight:600; margin-bottom:4px;}
.settings-panel .desc{font-size:13px; color:var(--text-secondary); margin-bottom:22px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.form-group label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px;}
.form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select, .form-group textarea{
  width:100%; height:40px; border:1px solid var(--border); border-radius:var(--r-sm); padding:0 12px; background:#FCFDFF;
  transition:all var(--dur) var(--ease);
}
.form-group input[type="checkbox"], .form-group input[type="radio"]{
  width:16px; height:16px; flex-shrink:0; accent-color:var(--primary); cursor:pointer;
}
.form-group textarea{height:80px; padding:10px 12px; resize:vertical;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none; border-color:var(--primary); box-shadow:var(--shadow-focus); background:#fff;}
.settings-divider{height:1px; background:var(--border-soft); margin:22px 0;}
.toggle-row{display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border-soft);}
.toggle-row:last-child{border-bottom:none;}
.toggle-title{font-size:13.5px; font-weight:600;}
.toggle-sub{font-size:12px; color:var(--text-secondary); margin-top:2px;}
.switch{width:40px; height:23px; border-radius:20px; background:var(--gray-tint); border:1px solid var(--border); position:relative; flex-shrink:0; transition:all var(--dur) var(--ease);}
.switch::after{content:''; position:absolute; width:17px; height:17px; border-radius:50%; background:#fff; top:2px; left:2px; box-shadow:0 1px 3px rgba(0,0,0,0.2); transition:all var(--dur) var(--ease);}
.switch.on{background:var(--primary); border-color:var(--primary);}
.switch.on::after{left:19px;}
.avatar-edit-row{display:flex; align-items:center; gap:16px; margin-bottom:24px;}

/* ============================================================
   Slide-over: Task Details
   ============================================================ */
.overlay-bg{position:fixed; inset:0; background:rgba(20,24,30,0.32); backdrop-filter:blur(2px); z-index:90; opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease);}
.overlay-bg.show{opacity:1; pointer-events:auto;}
.slideover{
  position:fixed; top:0; right:0; height:100vh; width:460px; max-width:92vw; background:#fff;
  box-shadow:-8px 0 32px rgba(20,24,30,0.12); z-index:91; transform:translateX(100%);
  transition:transform 280ms var(--ease); display:flex; flex-direction:column;
}
.slideover.show{transform:translateX(0);}
.slideover-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border-soft); flex-shrink:0;}
.slideover-head-left{display:flex; align-items:center; gap:10px;}
.slideover-body{flex:1; overflow-y:auto; padding:22px;}
.slideover-foot{padding:16px 22px; border-top:1px solid var(--border-soft); display:flex; gap:10px; flex-shrink:0;}
.so-title{font-size:18px; font-weight:600; margin-bottom:6px; line-height:1.35;}
.so-meta-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0;}
.so-meta-item label{display:block; font-size:11px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.4px; margin-bottom:7px;}
.so-section{margin-bottom:22px;}
.so-section h4{font-size:12.5px; font-weight:600; color:var(--text-secondary); margin-bottom:9px; display:flex; align-items:center; gap:6px;}
.so-desc{font-size:13.5px; color:var(--text); line-height:1.6;}
.checklist-item{display:flex; align-items:center; gap:10px; padding:8px 0;}
.checklist-item span{font-size:13.5px;}
.checklist-item span.done{color:var(--text-tertiary); text-decoration:line-through;}
.attach-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--border-soft); border-radius:var(--r-sm); margin-bottom:8px;}
.attach-icon{width:32px; height:32px; border-radius:8px; background:var(--blue-tint); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.attach-name{font-size:12.75px; font-weight:600;}
.attach-size{font-size:11px; color:var(--text-tertiary);}
.comment-item{display:flex; gap:10px; margin-bottom:16px;}
.comment-bubble{background:var(--gray-tint); border-radius:var(--r-md); padding:10px 13px; font-size:13px; line-height:1.5;}
.comment-name{font-size:12.5px; font-weight:600; margin-bottom:3px;}
.comment-time{font-size:11px; color:var(--text-tertiary); margin-top:4px;}
.comment-input-row{display:flex; gap:10px; align-items:flex-start; margin-top:6px;}
.comment-input{flex:1; border:1px solid var(--border); border-radius:var(--r-sm); padding:9px 12px; font-size:13px; resize:none; height:38px; transition:all var(--dur) var(--ease);}
.comment-input:focus{outline:none; border-color:var(--primary); box-shadow:var(--shadow-focus);}

/* ============================================================
   Quick Add modal
   ============================================================ */
.modal-bg{position:fixed; inset:0; background:rgba(20,24,30,0.32); backdrop-filter:blur(2px); z-index:95; display:none; align-items:flex-start; justify-content:center; padding-top:100px;}
.modal-bg.show{display:flex;}
.modal-box{width:520px; max-width:92vw; background:#fff; border-radius:18px; box-shadow:var(--shadow-2); animation:fadeUp .22s var(--ease); overflow:hidden;}
.modal-head{padding:18px 22px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; justify-content:space-between;}
.modal-head h3{font-size:15px; font-weight:600;}
.modal-body{padding:20px 22px;}
.modal-foot{padding:14px 22px; border-top:1px solid var(--border-soft); display:flex; justify-content:flex-end; gap:10px;}

/* ============================================================
   Misc
   ============================================================ */
.dropdown-menu{position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid var(--border-soft); border-radius:var(--r-md); box-shadow:var(--shadow-2); width:220px; padding:8px; z-index:60; display:none;}
.dropdown-menu.show{display:block;}
.dropdown-menu-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-xs); font-size:13px; font-weight:500; color:var(--text); transition:background var(--dur) var(--ease);}
.dropdown-menu-item:hover{background:var(--gray-tint);}
.dropdown-menu-item .icon{width:16px; height:16px; color:var(--text-tertiary);}
.dropdown-divider{height:1px; background:var(--border-soft); margin:6px 0;}
.pos-rel{position:relative;}

.empty-state{text-align:center; padding:50px 20px; color:var(--text-tertiary);}
.empty-state .icon{width:38px; height:38px; margin:0 auto 14px; color:#CBD5E0;}
.empty-state p{font-size:13.5px;}

/* Toasts — used to simulate outbound email/notification events */
.toast-stack{position:fixed; bottom:22px; right:22px; z-index:200; display:flex; flex-direction:column; gap:10px; width:340px; max-width:88vw;}
.toast{background:#fff; border:1px solid var(--border-soft); border-radius:var(--r-md); box-shadow:var(--shadow-2); padding:13px 15px; display:flex; gap:11px; align-items:flex-start; animation:toastIn .25s var(--ease);}
@keyframes toastIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
.toast-icon{width:30px; height:30px; border-radius:9px; background:var(--blue-tint); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.toast-title{font-size:13px; font-weight:600;}
.toast-sub{font-size:12px; color:var(--text-secondary); margin-top:2px; line-height:1.4;}

/* Integration cards */
.integration-card{display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--border-soft); border-radius:var(--r-md); margin-bottom:12px;}
.integration-logo{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--gray-tint);}
.integration-info{flex:1;}
.integration-name{font-size:13.75px; font-weight:600;}
.integration-desc{font-size:12px; color:var(--text-secondary); margin-top:2px;}
.integration-status{font-size:11.5px; font-weight:600; color:var(--green); display:flex; align-items:center; gap:5px; margin-top:2px;}
.integration-status .dot{width:6px; height:6px; border-radius:50%; background:var(--green);}

/* Drive picker */
.drive-file-row{display:flex; align-items:center; gap:11px; padding:10px 8px; border-radius:var(--r-sm); transition:background var(--dur) var(--ease); cursor:pointer;}
.drive-file-row:hover{background:var(--gray-tint);}
.drive-file-icon{width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}

/* Forgot-password stepper */
.otp-boxes{display:flex; gap:9px; margin-bottom:6px;}
.otp-boxes input{width:44px; height:48px; text-align:center; font-size:18px; font-weight:600; border:1px solid var(--border); border-radius:var(--r-sm); background:#FCFDFF;}
.otp-boxes input:focus{outline:none; border-color:var(--primary); box-shadow:var(--shadow-focus); background:#fff;}
.demo-banner{background:var(--orange-tint); border:1px dashed #F2C88A; border-radius:var(--r-sm); padding:11px 13px; font-size:12px; color:#92400E; margin:14px 0; line-height:1.5;}
.demo-banner b{font-weight:700;}

#mobileMenuBtn{display:none;}
.sidebar-backdrop{display:none;}

@media (max-width:1180px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .dash-grid{grid-template-columns:1fr;}
  .projects-grid{grid-template-columns:repeat(2,1fr);}
  .cal-layout{grid-template-columns:1fr;}
  .report-grid{grid-template-columns:1fr;}
  .settings-layout{grid-template-columns:1fr;}
}
@media (max-width:860px){
  #mobileMenuBtn{display:flex; flex-shrink:0;}
  .sidebar{position:fixed; top:0; left:0; z-index:60; transform:translateX(-100%); transition:transform var(--dur) var(--ease); box-shadow:var(--shadow-2); height:100vh;}
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop.show{display:block; position:fixed; inset:0; background:rgba(20,24,30,0.32); z-index:55;}
  .content{padding:20px 16px 60px;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .projects-grid{grid-template-columns:1fr;}
  .search-box{max-width:none;}
  .form-row{grid-template-columns:1fr;}
  .topbar{padding:0 16px; gap:10px;}
  .page-head{flex-direction:column; align-items:flex-start;}
  .page-actions{width:100%;}
  .page-actions .btn{flex:1;}
}
@media (max-width:520px){
  .stat-grid{grid-template-columns:1fr;}
  .login-card{padding:32px 22px 26px;}
  .search-box input{font-size:13px;}
  .search-kbd{display:none;}
  .toolbar{flex-wrap:wrap;}
  .modal-box{max-width:94vw;}
  .slideover{width:100%; max-width:100vw;}
}

/* ============================================================
   Additions for production build — user mgmt, pagination, misc
   ============================================================ */
.empty-state .btn{margin-top:14px;}
.um-toolbar{display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap;}
.um-toolbar input, .um-toolbar select{height:36px; border:1px solid var(--border); border-radius:var(--r-sm); padding:0 12px; background:#fff;}
.um-table{width:100%; border-collapse:collapse;}
.um-table th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--text-tertiary); padding:10px 12px; border-bottom:1px solid var(--border-soft);}
.um-table td{padding:11px 12px; border-bottom:1px solid var(--border-soft); font-size:13px; vertical-align:middle;}
.status-pill{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:600;}
.status-active{background:var(--green-tint); color:#047857;}
.status-invited{background:var(--orange-tint); color:#B45309;}
.status-deactivated,.status-suspended{background:var(--gray-tint); color:#6B7280;}
.status-deleted{background:var(--red-tint); color:#B91C1C;}
.pagination{display:flex; align-items:center; gap:8px; justify-content:flex-end; margin-top:14px; font-size:12.5px; color:var(--text-secondary);}
.pagination button{height:28px; padding:0 10px; border:1px solid var(--border); border-radius:6px; background:#fff;}
.pagination button:disabled{opacity:.4; cursor:not-allowed;}
.dropdown-menu-item.danger{color:var(--red);}
.field-hint{font-size:11.5px; color:var(--text-tertiary); margin-top:5px;}
.field.err input{border-color:var(--red);}
.settings-inline-msg{font-size:12.5px; padding:8px 12px; border-radius:8px; margin-bottom:12px;}
.settings-inline-msg.success{background:var(--green-tint); color:#047857;}
.settings-inline-msg.error{background:var(--red-tint); color:#B91C1C;}
.checklist-add-row{display:flex; gap:8px; margin-top:8px;}
.checklist-add-row input{flex:1; height:32px; border:1px solid var(--border); border-radius:7px; padding:0 10px; font-size:13px;}
.comment-input-row textarea{resize:vertical;}