/* WorkTrack — Global Styles v4 (ClickUp/Monday.com inspired) */

/* ── OLD APP REDIRECT OVERLAY ── */
body:has(.nav-item):not(:has(.nav-link)) > * { display: none !important; }
body:has(.nav-item):not(:has(.nav-link)) {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
  min-height: 100vh !important; display: flex !important;
  align-items: center !important; justify-content: center !important; flex-direction: column !important;
}
body:has(.nav-item):not(:has(.nav-link))::before {
  content: '🔄  WorkTrack — App Updated'; display: block;
  font-family: 'Segoe UI', system-ui, sans-serif; font-size: 1.8rem; font-weight: 800;
  color: #fff; margin-bottom: 16px; text-align: center;
}
body:has(.nav-item):not(:has(.nav-link))::after {
  content: 'This URL is outdated. Please use:\A\A https://8c650ec1-d33c-411a-9333-1f4aa435fcba.vip.gensparksite.com';
  white-space: pre; display: block; font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 1rem; color: #c7d2fe; text-align: center; line-height: 2;
  padding: 20px 40px; background: rgba(255,255,255,0.08);
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.15); max-width: 600px;
}

/* ── DESIGN TOKENS ── */
:root {
  /* Brand */
  --primary: #7c3aed;
  --primary-light: #ede9fe;
  --primary-dark: #5b21b6;
  --accent: #4f46e5;

  /* Surfaces */
  --bg: #f0f2f5;
  --bg-2: #e4e6ea;
  --card: #ffffff;
  --card-hover: #f8f9fa;

  /* Borders */
  --border: #dfe1e6;
  --border-light: #ebecf0;

  /* Text */
  --text: #172b4d;
  --text-2: #344563;
  --text-muted: #5e6c84;
  --text-faint: #97a0af;

  /* Sidebar */
  --sidebar-bg: #1a1523;
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 52px;
  --topbar-h: 52px;

  /* Status Colors */
  --red: #ef4444;
  --green: #22c55e;
  --yellow: #eab308;
  --blue: #3b82f6;
  --purple: #8b5cf6;
  --orange: #f97316;
  --teal: #14b8a6;
  --pink: #ec4899;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
  --shadow-md: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 20px 25px rgba(0,0,0,.1), 0 10px 10px rgba(0,0,0,.04);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Page Layout */
  --page-pad-x: 24px;
  --page-pad-y: 20px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIDEBAR — collapsible vertical nav
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 210;                  /* above topbar (200) so brand shows in top-left corner */
  overflow: hidden;
  transition: width .2s cubic-bezier(.4,0,.2,1);
  box-shadow: 2px 0 8px rgba(0,0,0,.15);
  flex-shrink: 0;
}
.sidebar:hover { overflow-y: auto; }
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* ── Sidebar: Collapse toggle button (inside brand bar) ── */
.sidebar-collapse-btn {
  margin-left: auto;           /* push to the right edge of the brand bar */
  flex-shrink: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(199,210,254,.8);
  width: 26px; height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .65rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s, transform .2s;
}
.sidebar-collapse-btn:hover {
  background: rgba(255,255,255,.16);
  color: #fff;
  border-color: rgba(255,255,255,.25);
}
body.sidebar-collapsed .sidebar-collapse-btn {
  transform: rotate(180deg);   /* chevron flips to point right when collapsed */
}

/* ── Sidebar: Brand/Logo ── */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  height: var(--topbar-h);     /* occupies exactly the same height as the topbar */
  padding: 0 12px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
}
.sidebar-logo {
  width: 30px; height: 30px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: #fff;
}
.sidebar-title {
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: -.01em;
}

/* ── Sidebar: Nav links ── */
.sidebar-nav {
  flex: 1;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.sidebar-section-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(199,210,254,.3);
  padding: 10px 6px 3px;
  white-space: nowrap;
  overflow: hidden;
}
/* Horizontal divider between nav sections */
.nav-section-divider {
  height: 1px;
  background: rgba(199,210,254,.12);
  margin: 8px 6px;
  border-radius: 1px;
}
body.sidebar-collapsed .nav-section-divider {
  margin: 6px 4px;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  color: rgba(199,210,254,.7);
  font-size: .82rem;
  font-weight: 500;
  transition: all .12s;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.nav-link:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.nav-link.active {
  background: rgba(124,58,237,.25);
  color: #c4b5fd;
  font-weight: 600;
}
.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: #7c3aed;
  border-radius: 0 3px 3px 0;
}
.nav-link i {
  font-size: .8rem;
  width: 15px;
  text-align: center;
  flex-shrink: 0;
}
.nav-link span {
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .15s;
}

/* ── Sidebar: User section ── */
.sidebar-user {
  padding: 8px 8px 10px;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  overflow: hidden;
}
.sidebar-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
}
.sidebar-user-name {
  font-size: .77rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size: .66rem;
  color: rgba(199,210,254,.45);
  text-transform: capitalize;
  white-space: nowrap;
}
.btn-logout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(255,255,255,.05);
  color: rgba(199,210,254,.65);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.btn-logout:hover {
  background: rgba(239,68,68,.18);
  color: #fca5a5;
  border-color: rgba(239,68,68,.25);
}

/* ── COLLAPSED STATE ── */
body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }


body.sidebar-collapsed .sidebar-title,
body.sidebar-collapsed .sidebar-section-label,
body.sidebar-collapsed .nav-link span,
body.sidebar-collapsed .sidebar-user-name,
body.sidebar-collapsed .sidebar-user-role,
body.sidebar-collapsed .btn-logout span { display: none; }

body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0 8px; gap: 0; }
body.sidebar-collapsed .sidebar-nav { padding: 8px 4px; }
body.sidebar-collapsed .nav-link { padding: 8px; justify-content: center; gap: 0; }
body.sidebar-collapsed .sidebar-user { padding: 6px 4px 8px; }
body.sidebar-collapsed .sidebar-user-info { justify-content: center; margin-bottom: 5px; }
body.sidebar-collapsed .btn-logout { padding: 7px; }
body.sidebar-collapsed .sidebar-toggle { justify-content: center; padding: 12px 4px 4px; }
body.sidebar-collapsed .sidebar-toggle button i { transform: rotate(180deg); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MAIN CONTENT WRAPPER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.main-content {
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .2s, width .2s;
  box-sizing: border-box;
}
body.sidebar-collapsed .main-content {
  margin-left: var(--sidebar-collapsed-width);
  width: calc(100% - var(--sidebar-collapsed-width));
}

/* ── PAGE CONTAINER ── */
.page-container {
  width: 100%;
  padding: 24px 28px;
  box-sizing: border-box;
  flex: 1;
}

/* ── PAGE HEADER ── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 36px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.page-header-left { display: flex; flex-direction: column; gap: 3px; }
.page-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.page-title i { font-size: .9rem; color: var(--primary); }
.page-subtitle { color: var(--text-muted); font-size: .82rem; margin-top: 2px; font-weight: 500; }
.page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   QUICK ADD BAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.quick-add-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--card);
  border: 1.5px dashed var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  flex-wrap: nowrap;
  overflow-x: auto;
}
.quick-add-icon {
  color: var(--primary);
  font-size: .85rem;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.quick-add-input {
  flex: 1 1 220px;
  min-width: 160px;
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  color: var(--text);
  background: var(--bg);
  outline: none;
  height: 32px;
  transition: border .15s;
}
.quick-add-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(124,58,237,.1); }
.quick-add-select {
  flex: 0 0 15%;
  min-width: 100px;
  max-width: 180px;
  padding: 5px 24px 5px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .78rem;
  color: var(--text-2);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%235e6c84'/%3E%3C/svg%3E") no-repeat right 7px center;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  height: 32px;
  box-sizing: border-box;
}
.quick-add-date {
  flex: 0 0 130px;
  min-width: 110px;
  padding: 5px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .78rem;
  color: var(--text-2);
  background: var(--bg);
  outline: none;
  height: 32px;
  cursor: pointer;
}
.quick-add-date:focus,.quick-add-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(124,58,237,.1); }
@media (max-width: 768px) {
  .quick-add-bar { flex-wrap: wrap; }
  .quick-add-input { flex: 1 1 100%; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FILTER TOOLBAR — always single row
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.filter-bar, .toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  flex-wrap: nowrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 7px 12px;
  box-shadow: none;
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
}
.filter-bar::-webkit-scrollbar, .toolbar::-webkit-scrollbar { height: 3px; }
.filter-bar::-webkit-scrollbar-thumb, .toolbar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

/* Search inside filter bar */
.filter-bar .search-input,
.filter-bar .form-control.search-input,
.toolbar .toolbar-search input {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 240px;
  padding: 6px 10px 6px 30px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .81rem;
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition: border .15s, box-shadow .15s;
  height: 32px;
}
.filter-bar .search-input:focus,
.toolbar .toolbar-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(124,58,237,.1);
}

/* Selects inside filter bar */
.filter-bar select,
.filter-bar .filter-select,
.filter-bar .form-control.filter-select,
.toolbar select,
.toolbar .filter-select {
  padding: 6px 26px 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .81rem;
  color: var(--text-2);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%235e6c84'/%3E%3C/svg%3E") no-repeat right 8px center;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  transition: border .15s;
  white-space: nowrap;
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
  max-width: 180px;
  height: 34px;
  box-sizing: border-box;
}
.filter-bar select:focus,
.filter-bar .filter-select:focus,
.toolbar select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(124,58,237,.1);
}

/* Date inputs inside filter bar */
.filter-bar input[type="date"] {
  padding: 5px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  color: var(--text-2);
  background: var(--bg);
  outline: none;
  height: 32px;
  flex-shrink: 0;
}
.filter-bar input[type="date"]:focus {
  border-color: var(--primary);
}

/* Toolbar btn / divider */
.toolbar-divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  font-size: .79rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text-2);
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
  height: 32px;
}
.toolbar-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.toolbar-btn.active { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* ── Toolbar search container ── */
.toolbar-search {
  position: relative;
  flex: 1;
  min-width: 140px;
  max-width: 240px;
}
.toolbar-search i {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .75rem;
  pointer-events: none;
}
.toolbar-search input {
  width: 100%;
  padding: 6px 10px 6px 28px;
}

/* Filter bar label */
.filter-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARDS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.card-header h3 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-body { padding: 18px; }
.btn-link {
  color: var(--primary);
  font-size: .77rem;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 5px;
}
.btn-link:hover { background: var(--primary-light); }

/* ── STAT CARDS ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.stats-grid.four-col { grid-template-columns: repeat(4, 1fr); }
.stats-grid.three-col { grid-template-columns: repeat(3, 1fr); }

.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .15s;
  min-height: 0;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.stat-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  color: #fff;
  flex-shrink: 0;
}
.stat-info { min-width: 0; }
.stat-num { font-size: 1.25rem; font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -.02em; }
.stat-label { font-size: .68rem; color: var(--text-muted); margin-top: 2px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.stat-body { min-width: 0; }

/* Icon backgrounds */
.bg-blue   { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.bg-green  { background: linear-gradient(135deg,#22c55e,#16a34a); }
.bg-red    { background: linear-gradient(135deg,#ef4444,#dc2626); }
.bg-yellow { background: linear-gradient(135deg,#f59e0b,#d97706); }
.bg-purple { background: linear-gradient(135deg,#8b5cf6,#7c3aed); }
.bg-orange { background: linear-gradient(135deg,#f97316,#ea580c); }
.bg-gray   { background: linear-gradient(135deg,#9ca3af,#6b7280); }
.bg-indigo { background: linear-gradient(135deg,#6366f1,#4f46e5); }
.bg-teal   { background: linear-gradient(135deg,#14b8a6,#0d9488); }
.bg-pink   { background: linear-gradient(135deg,#ec4899,#db2777); }

/* ── DASHBOARD GRID ── */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.dashboard-grid.two-col { grid-template-columns: 1fr 1fr; }
.card-wide { grid-column: 1/-1; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLE  (single authoritative .data-table definition)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.table-wrap, .table-responsive { overflow-x: auto; }
.data-table {
  table-layout: auto;      /* browser distributes width from content — no fixed cols */
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  color: var(--text);
}
.data-table th {
  padding: 7px 10px;
  background: var(--bg);
  color: var(--text-muted);
  font-weight: 700;
  font-size: .69rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 2px solid var(--border);
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
.data-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  color: var(--text-2);
  font-size: .81rem;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: #f5f3ff; }
/* Row overdue highlight */
.row-overdue td { background: #fff5f5 !important; }
.row-overdue:hover td { background: #fee2e2 !important; }
/* Subtask row */
.subtask-row td { background: #f9fafb; }
.subtask-row:hover td { background: #f3f0ff !important; }
/* Subtask toggle */
.subtask-toggle-btn {
  background: none; border: 1px solid var(--border); padding: 2px 6px;
  color: var(--text-muted); font-size: .63rem; border-radius: 4px;
  cursor: pointer; transition: all .12s;
}
.subtask-toggle-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
/* Sub-task button */
.subtask-btn:hover { background: #f5f3ff; color: #8b5cf6; }
/* Progress snippet */
.task-desc-preview {
  font-size: .70rem; color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px;
}
/* Group header rows */
.task-group-header     { background: var(--bg) !important; }
.task-group-header:hover { background: var(--bg) !important; }
.task-group-cell       { padding: 7px 10px !important; }
.task-group-inner      { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.group-collapse-btn    { background: none; border: none; padding: 2px 5px; color: var(--text-muted); font-size: .71rem; border-radius: 4px; cursor: pointer; }
.group-collapse-btn:hover { background: var(--border); color: var(--text); }
.group-project-dot     { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.group-project-name    { font-size: .82rem; font-weight: 700; color: var(--text); }
.group-task-count      { font-size: .71rem; color: var(--text-muted); background: var(--border); padding: 1px 7px; border-radius: 10px; margin-left: 4px; }

/* ── Inline edit rows ── */
tr.inline-edit-row td { vertical-align: top; padding: 10px 14px; background: #faf8ff; }
tr.inline-edit-row:hover td { background: #f3f0ff !important; }
tr.inline-edit-row .form-control {
  height: 32px; padding: 5px 9px; font-size: .81rem;
  border-color: #c4b5fd; background: #fff;
}
tr.inline-edit-row textarea.form-control { height: auto; min-height: 60px; }
tr.inline-edit-row:first-of-type td { border-top: 2px solid var(--primary); }
tr.inline-edit-row:last-of-type td { border-bottom: 2px solid var(--primary); }

/* ── Row Number Column ── */
.row-num-cell {
  width: 42px;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Sub-task Hierarchy ── */
tr.subtask-row td {
  background: #f9faff;
}
tr.subtask-row:hover td {
  background: #eef2ff !important;
}
tr.subtask-row td:first-child {
  border-left: 3px solid #7c3aed;
  padding-left: 10px;
}
tr.subtask-row .row-num-cell {
  color: #7c3aed;
  font-size: .82rem;
}

/* ↳ symbol inside subtask row num cell */
.subtask-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  color: #7c3aed;
  font-weight: 700;
  line-height: 1;
}

/* horizontal dash connecting to title */
.subtask-indent-bar {
  display: inline-block;
  width: 14px;
  height: 2px;
  background: #c4b5fd;
  border-radius: 2px;
  margin-right: 6px;
  margin-bottom: 2px;
  vertical-align: middle;
}

/* "N sub-tasks" pill badge shown on parent row title */
.subtask-count-badge {
  display: inline-block;
  font-size: .66rem;
  background: #ede9fe;
  color: #6d28d9;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 7px;
  font-weight: 600;
  vertical-align: middle;
  letter-spacing: .2px;
}

/* Add sub-task button (sitemap icon) */
.subtask-btn {
  color: #7c3aed !important;
  background: #ede9fe !important;
  border: 1px solid #c4b5fd !important;
}
.subtask-btn:hover {
  background: #ddd6fe !important;
  border-color: #a78bfa !important;
}

/* Parent row top separator so groups feel distinct */
tr.parent-row td {
  border-top: 1px solid var(--border);
}
tr.parent-row:first-of-type td {
  border-top: none;
}

/* ── Table Clarity Enhancements (applied via specificity above) ── */

/* ── Inline Edit — field label & spacing ── */
tr.inline-edit-row label.edit-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
tr.inline-edit-row td {
  padding: 10px 14px 12px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: var(--radius);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .14s;
  white-space: nowrap;
  line-height: 1.4;
}
.btn-primary {
  background: linear-gradient(135deg,#7c3aed,#4f46e5);
  color: #fff;
  box-shadow: 0 2px 6px rgba(124,58,237,.25);
}
.btn-primary:hover {
  opacity: .92;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124,58,237,.3);
}
.btn-secondary {
  background: var(--card);
  color: var(--text-2);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-2); border-color: #c1c7d0; }
.btn-danger { background: #ef4444; color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-sm { padding: 5px 11px; font-size: .77rem; }
.btn-xs { padding: 3px 8px; font-size: .72rem; border-radius: var(--radius-sm); }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-size: .77rem;
  transition: all .12s;
  background: none;
}
.btn-icon:hover { background: var(--bg-2); }
.btn-edit { color: var(--blue); }
.btn-edit:hover { background: #eff6ff; }
.btn-delete { color: #ef4444; }
.btn-delete:hover { background: #fef2f2; }
.btn-approve { color: #16a34a; }
.btn-approve:hover { background: #f0fdf4; }
.btn-reject { color: #ef4444; }
.btn-reject:hover { background: #fef2f2; }
.action-buttons { display: flex; align-items: center; gap: 2px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FORMS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.form-control {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .82rem;
  color: var(--text);
  outline: none;
  transition: border .15s, box-shadow .15s;
  background: var(--card);
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,.08);
}
input[type="color"].form-control { padding: 3px 6px; height: 34px; }
select.form-control { cursor: pointer; }
select.form-control[multiple] { height: 90px; resize: vertical; }
textarea.form-control { resize: vertical; }
.form-group { margin-bottom: 14px; }
.form-group label, .form-label {
  display: block;
  font-size: .73rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.quick-form { padding: 16px 18px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MODAL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.modal-content {
  background: var(--card);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.modal-content.modal-lg { max-width: 680px; }
.modal-content.modal-xl { max-width: 900px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-header h2 {
  font-size: .95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 4px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
}
.modal-close:hover { color: var(--text); background: var(--bg-2); }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--card);
}
.modal-content form { padding: 16px 20px; }
.modal-body { padding: 16px 20px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BADGES & STATUS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .69rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-blue   { background: #eff6ff; color: #1d4ed8; }
.badge-green  { background: #f0fdf4; color: #15803d; }
.badge-red    { background: #fef2f2; color: #b91c1c; }
.badge-orange { background: #fff7ed; color: #c2410c; }
.badge-yellow { background: #fefce8; color: #92400e; }
.badge-purple { background: #f5f3ff; color: #5b21b6; }
.badge-gray   { background: var(--bg-2); color: var(--text-muted); }
.badge-teal   { background: #f0fdfa; color: #0d9488; }

.code-badge {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .71rem;
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .69rem;
  font-weight: 600;
  white-space: nowrap;
}
.status-todo       { background: #f3f4f6; color: #6b7280; }
.status-in-progress{ background: #eff6ff; color: #1d4ed8; }
.status-review     { background: #f5f3ff; color: #5b21b6; }
.status-done       { background: #f0fdf4; color: #15803d; }
.status-blocked    { background: #fef2f2; color: #b91c1c; }
.status-cancelled  { background: #f3f4f6; color: #9ca3af; }
.status-active     { background: #f0fdf4; color: #15803d; }
.status-inactive   { background: #fef2f2; color: #b91c1c; }
.status-on-hold    { background: #fefce8; color: #92400e; }
.status-completed  { background: #f0fdf4; color: #15803d; }
.status-pending    { background: #fff7ed; color: #c2410c; }
.status-approved   { background: #f0fdf4; color: #15803d; }
.status-rejected   { background: #fef2f2; color: #b91c1c; }

/* Priority chips */
.priority-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-size: .69rem;
  font-weight: 700;
}
.priority-critical { background: #fef2f2; color: #b91c1c; border-left: 3px solid #ef4444; }
.priority-high     { background: #fff7ed; color: #c2410c; border-left: 3px solid #f97316; }
.priority-medium   { background: #eff6ff; color: #1d4ed8; border-left: 3px solid #3b82f6; }
.priority-low      { background: #f0fdf4; color: #15803d; border-left: 3px solid #22c55e; }

/* Category pill */
.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MEMBER / AVATAR CELLS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.member-cell { display: flex; align-items: center; gap: 7px; }
.avatar, .member-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  flex-shrink: 0;
}
.avatar.xs, .member-avatar.xs { width: 22px; height: 22px; font-size: .58rem; }
.avatar.sm, .member-avatar.sm { width: 26px; height: 26px; font-size: .62rem; }
.avatar.lg, .member-avatar.lg { width: 36px; height: 36px; font-size: .77rem; }
.avatar.xl, .member-avatar.xl { width: 48px; height: 48px; font-size: .9rem; }
.avatar-stack { display: flex; }
.avatar-stack .avatar,
.avatar-stack .member-avatar { margin-right: -7px; border: 2px solid #fff; }
.member-name { font-weight: 600; font-size: .82rem; color: var(--text); }
.member-info .member-sub { font-size: .71rem; color: var(--text-muted); margin-top: 1px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROGRESS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.progress-bar-wrap {
  background: var(--border);
  border-radius: 4px;
  height: 5px;
  overflow: hidden;
  flex: 1;
  min-width: 50px;
}
.progress-bar {
  background: linear-gradient(90deg,#7c3aed,#4f46e5);
  height: 100%;
  border-radius: 4px;
  transition: width .3s;
}
.progress-inline { display: flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--text-muted); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TAGS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tag {
  display: inline-flex;
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-size: .65rem;
  font-weight: 600;
  margin: 1px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TASK ROW / WORKLOAD / HEALTH
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.task-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
}
.task-row:last-child { border-bottom: none; }
.task-info { flex: 1; min-width: 0; }
.task-title { font-weight: 600; font-size: .82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-meta { font-size: .71rem; color: var(--text-muted); margin-top: 1px; }
/* .task-title-cell base — overridden per-table in tasks-table and data-table sections below */
.task-title-cell { max-width: none; word-break: break-word; }

.workload-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-light); }
.workload-row:last-child { border-bottom: none; }
.workload-info { flex: 1; min-width: 0; }
.workload-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

.health-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-light); }
.health-row:last-child { border-bottom: none; }
.project-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.project-info { flex: 1; min-width: 0; }
.project-name { font-weight: 600; font-size: .82rem; margin-bottom: 2px; }
.pct { font-size: .77rem; font-weight: 700; color: var(--text-muted); width: 32px; text-align: right; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REMINDERS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.reminder-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-light); }
.reminder-row:last-child { border-bottom: none; }
.reminder-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--primary-light); display: flex; align-items: center; justify-content: center; color: var(--primary); flex-shrink: 0; }
.reminder-title { font-weight: 600; font-size: .82rem; }
.reminder-card { background: var(--bg); border-radius: var(--radius); padding: 12px; margin-bottom: 8px; border: 1px solid var(--border); }
.reminder-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.reminder-actions { display: flex; gap: 4px; }
.reminder-meta { font-size: .71rem; color: var(--text-muted); margin-top: 4px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   QUICK LINKS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.quick-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 8px; padding: 12px 16px; }
.quick-link-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 8px; border-radius: var(--radius); border: 2px solid; background: var(--card);
  text-decoration: none; color: var(--text); font-size: .77rem; font-weight: 600;
  transition: all .14s; position: relative;
}
.quick-link-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.quick-link-item i { font-size: 1.15rem; }
.ql-delete { position: absolute; top: 4px; right: 4px; background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: .65rem; padding: 2px; border-radius: 3px; }
.ql-delete:hover { color: #ef4444; background: #fef2f2; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tabs, .tabs-bar { display: flex; gap: 2px; margin-bottom: 18px; border-bottom: 2px solid var(--border); }
.tab, .tab-btn {
  padding: 10px 18px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all .14s;
  display: flex; align-items: center; gap: 6px;
}
.tab.active, .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab:hover:not(.active), .tab-btn:hover:not(.active) { color: var(--text); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CLOCK
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.clock-display {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

/* ── World Clocks Row ── */
.world-clocks-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .world-clocks-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .world-clocks-row { grid-template-columns: 1fr; }
}
.world-clock-card {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border-radius: 12px;
  padding: 14px 16px 12px;
  color: #fff;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(99,102,241,.3);
  transition: transform .15s, box-shadow .15s;
}
.world-clock-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99,102,241,.2);
}
.world-clock-card.wc-night {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
}
.wc-city {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(199,210,254,.7);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.wc-time {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #fff;
  margin-bottom: 4px;
}
.wc-date {
  font-size: .75rem;
  color: rgba(199,210,254,.8);
  font-weight: 500;
  margin-bottom: 6px;
}
.wc-tz {
  display: inline-block;
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  background: rgba(255,255,255,.12);
  color: rgba(199,210,254,.9);
  padding: 2px 7px;
  border-radius: 8px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MISC UTILITIES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.loading-spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 20px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-muted); font-size: .82rem; padding: 40px 20px; text-align: center;
}
.empty-state i { font-size: 2rem; opacity: .3; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted  { color: var(--text-muted); }
.text-red    { color: #ef4444; }
.text-orange { color: #f97316; }
.text-green  { color: #16a34a; }
.text-blue   { color: #2563eb; }
.text-bold   { font-weight: 700; }
.desc-cell   { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOAST
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.toast {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: .82rem;
  font-weight: 600;
  display: flex; align-items: center; gap: 7px;
  box-shadow: var(--shadow-md);
  animation: slideUp .2s ease;
  border: 1px solid transparent;
  max-width: 320px;
}
.toast-success { background: #f0fdf4; color: #15803d; border-color: #86efac; }
.toast-error   { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
.toast-info    { background: #eff6ff; color: #1d4ed8; border-color: #93c5fd; }
@keyframes slideUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TEAM PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.member-card {
  background: var(--card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  margin-bottom: 8px;
  overflow: hidden;
  transition: box-shadow .15s;
}
.member-card:hover { box-shadow: var(--shadow-sm); }
.member-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background .12s;
}
.member-card-header:hover { background: var(--bg); }
.member-card-actions { display: flex; gap: 5px; margin-left: auto; flex-shrink: 0; }
.member-expand-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-muted); font-size: .74rem; font-weight: 600;
  cursor: pointer; transition: all .14s;
}
.member-expand-btn:hover { background: var(--primary-light); border-color: #c4b5fd; color: var(--primary); }
.member-expand-btn.open { background: var(--primary-light); border-color: #c4b5fd; color: var(--primary); }
.member-card-body { display: none; border-top: 1px solid var(--border); padding: 20px 18px; background: #fafbff; }
.member-card-body.open { display: block; }

.perf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.perf-stat {
  background: var(--card);
  border-radius: var(--radius);
  padding: 10px 12px;
  text-align: center;
  border: 1px solid var(--border);
}
.perf-stat-num { font-size: 1.25rem; font-weight: 800; line-height: 1; }
.perf-stat-num.green { color: #16a34a; }
.perf-stat-num.blue  { color: #2563eb; }
.perf-stat-num.orange{ color: #d97706; }
.perf-stat-num.red   { color: #dc2626; }
.perf-stat-label { font-size: .64rem; color: var(--text-muted); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }

.perf-bar-row { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.perf-bar-wrap { flex: 1; background: var(--border); border-radius: 5px; height: 7px; overflow: hidden; }
.perf-bar { height: 100%; border-radius: 5px; transition: width .4s; }
.perf-bar.green { background: linear-gradient(90deg,#16a34a,#22c55e); }
.perf-bar.orange { background: linear-gradient(90deg,#d97706,#f59e0b); }
.perf-bar.red { background: linear-gradient(90deg,#dc2626,#ef4444); }
.perf-bar-pct { font-size: .8rem; font-weight: 700; color: var(--text-2); min-width: 34px; text-align: right; }

.task-section-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 7px;
  display: flex; align-items: center; gap: 5px;
}
.member-task-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  margin-bottom: 4px;
  background: var(--card);
  border: 1px solid var(--border);
}
.member-task-item:hover { background: var(--bg-2); }
.task-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-todo        { background: #94a3b8; }
.dot-in-progress { background: #3b82f6; }
.dot-review      { background: #8b5cf6; }
.dot-done        { background: #22c55e; }
.dot-blocked     { background: #ef4444; }
.task-name { font-size: .79rem; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-due { font-size: .7rem; color: var(--text-muted); white-space: nowrap; }
.task-due.overdue { color: #ef4444; font-weight: 600; }
.task-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.no-tasks-msg { font-size: .78rem; color: var(--text-faint); padding: 8px 0; font-style: italic; }

.has-login-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .67rem; padding: 2px 7px; border-radius: 10px;
  background: #d1fae5; color: #065f46; font-weight: 600;
}
.no-login-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .67rem; padding: 2px 7px; border-radius: 10px;
  background: var(--bg-2); color: var(--text-muted); font-weight: 600;
}
.login-section {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 10px;
}
.login-section-title {
  font-size: .77rem; font-weight: 700; color: #0369a1;
  margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ADMIN PERMISSIONS GRID
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.perm-grid {
  display: grid;
  grid-template-columns: 200px repeat(8,1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.perm-grid-header { display: contents; }
.perm-grid-header > div {
  background: var(--bg);
  padding: 8px 4px;
  font-size: .67rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.perm-grid-header > div:first-child { text-align: left; padding-left: 12px; }
.perm-row { display: contents; }
.perm-row > div {
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  font-size: .81rem;
}
.perm-row > div:first-child { justify-content: flex-start; padding-left: 12px; font-weight: 500; }
.perm-row:last-child > div { border-bottom: none; }
.perm-row > div:hover { background: var(--bg); }
.perm-toggle { width: 17px; height: 17px; cursor: pointer; accent-color: var(--primary); }

.user-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 10px; font-size: .67rem; font-weight: 600; }
.badge-super   { background: #fef3c7; color: #92400e; }
.badge-admin   { background: #ede9fe; color: #5b21b6; }
.badge-manager { background: #dbeafe; color: #1e40af; }
.badge-hr      { background: #fce7f3; color: #9d174d; }
.badge-finance { background: #d1fae5; color: #065f46; }
.badge-employee{ background: var(--bg-2); color: var(--text-muted); }
.badge-inactive{ background: #fee2e2; color: #991b1b; }
.perm-save-btn { padding: 3px 10px; font-size: .73rem; }
.search-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CATEGORY MANAGEMENT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.category-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  transition: all .12s;
}
.category-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.category-icon-preview {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  color: #fff;
  flex-shrink: 0;
}
.category-info { flex: 1; min-width: 0; }
.category-name { font-weight: 600; font-size: .84rem; color: var(--text); }
.category-desc { font-size: .72rem; color: var(--text-muted); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION DIVIDER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-heading {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1200px) {
  :root { --sidebar-width: 200px; }
  .stats-grid.four-col { grid-template-columns: repeat(2, 1fr); }
  .perf-stats { grid-template-columns: repeat(2, 1fr); }
  .task-section-grid { grid-template-columns: 1fr; }
  .dashboard-grid.two-col { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --page-pad-x: 16px; --page-pad-y: 14px; }
  .filter-bar, .toolbar { flex-wrap: wrap; }
  .filter-bar .search-input, .toolbar .toolbar-search { max-width: 100%; flex: 1 1 100%; }
  .filter-bar select, .filter-bar .filter-select, .filter-bar .form-control.filter-select,
  .toolbar select, .toolbar .filter-select {
    flex: 0 0 20%; width: 20%; min-width: 90px; max-width: none;
  }
}
@media (max-width: 768px) {
  body.sidebar-visible .sidebar { display: flex; }
  .sidebar { display: none; }
  .main-content { margin-left: 0 !important; }
  body.sidebar-collapsed .main-content { margin-left: 0; }
  .page-container { padding: 14px 14px; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid.four-col { grid-template-columns: repeat(2, 1fr); }
  .filter-bar, .toolbar { flex-wrap: wrap; }
  .filter-bar select, .filter-bar .filter-select, .filter-bar .form-control.filter-select,
  .toolbar select, .toolbar .filter-select {
    flex: 0 0 20%; width: 20%; min-width: 80px; max-width: none;
  }
  .perf-stats { grid-template-columns: repeat(2, 1fr); }
  .task-section-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FIXED TOP BAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: #1a1523;                          /* matches sidebar-bg exactly */
  border-bottom: 1px solid rgba(255,255,255,.07); /* same as sidebar brand divider */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 calc(var(--sidebar-width) + 16px);
  z-index: 195;                                  /* below sidebar (210) so sidebar brand overlaps top-left */
  transition: padding-left .2s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);        /* stronger shadow — dark bar over light content */
  gap: 12px;
}
body.sidebar-collapsed .topbar { padding-left: calc(var(--sidebar-collapsed-width) + 16px); }

.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-brand { font-size: .92rem; font-weight: 700; color: #fff; letter-spacing: .02em; }
.topbar-menu-btn {
  display: none; /* shown on mobile */
  background: none; border: none;
  color: rgba(199,210,254,.7); font-size: 1rem; padding: 6px;
  border-radius: 6px;
}
.topbar-menu-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

.topbar-icon-btn {
  position: relative;
  background: none; border: none;
  color: rgba(199,210,254,.7); font-size: .95rem;
  padding: 7px 9px; border-radius: 8px;
  transition: background .15s, color .15s;
}
.topbar-icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

.topbar-user { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 8px; }
.topbar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
}
.topbar-user-name { font-size: .82rem; font-weight: 600; color: rgba(199,210,254,.85); }

/* Push page-container down to avoid topbar overlap */
.main-content { padding-top: var(--topbar-h); }

/* ── NOTIFICATION BADGE ── */
.notif-badge {
  position: absolute; top: 3px; right: 3px;
  background: #ef4444; color: #fff;
  font-size: .6rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  pointer-events: none;
}
.notif-wrapper { position: relative; }

/* ── NOTIFICATION PANEL ── */
.notif-panel {
  position: fixed;
  top: calc(var(--topbar-h) + 6px); right: 16px;  /* fixed to viewport, just below topbar */
  width: 340px; max-height: 460px;
  background: #ffffff;                              /* solid white — no transparency */
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
  z-index: 2000;                                    /* above sidebar(210), modals(1000), everything */
  flex-direction: column;
  overflow: hidden;
}
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: .85rem; font-weight: 700; color: var(--text);
  flex-shrink: 0;
}
#notif-list { overflow-y: auto; flex: 1; }
.notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); }
.notif-unread { background: var(--primary-light); }
.notif-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; flex-shrink: 0; margin-top: 2px;
}
.notif-content { flex: 1; min-width: 0; }
.notif-title { font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.notif-body { font-size: .76rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-time { font-size: .7rem; color: var(--text-muted); margin-top: 3px; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 6px; }
.notif-loading, .notif-empty { text-align: center; padding: 24px; color: var(--text-muted); font-size: .84rem; }
.notif-empty i { font-size: 1.6rem; display: block; margin-bottom: 6px; color: #22c55e; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DASHBOARD — COLLAPSIBLE SECTIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dashboard-section {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; margin-bottom: 16px; overflow: hidden;
}
.ds-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; cursor: pointer; user-select: none;
  font-size: .88rem; font-weight: 700; color: var(--text);
  transition: background .12s;
}
.ds-header:hover { background: var(--bg); }
.ds-chevron { font-size: .78rem; color: var(--text-muted); transition: transform .2s; }
.ds-body { padding: 0 16px 16px; }

.collapsible-card .collapsible-header { cursor: pointer; user-select: none; transition: background .12s; border-radius: 12px 12px 0 0; }
.collapsible-card .collapsible-header:hover { background: var(--bg); }
.card-chevron { font-size: .75rem; color: var(--text-muted); transition: transform .2s; flex-shrink: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CAT FILTER BUTTON ACTIVE STATE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cat-filter-btn.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TASKS PAGE — COMPACT STICKY LAYOUT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Outer card — normal card, no height tricks needed */
.tasks-card {
  border-radius: var(--radius-md);
}

/* Sticky filter bar — sticks to top of the viewport when page scrolls */
.tasks-filter-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--card-bg, #fff);
}

/* Scrollable table wrapper — fixed height, independent scroll */
.tasks-table-wrap {
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  overflow-x: auto;
}

/* Sticky thead — sticks inside .tasks-table-wrap scroll container */
.tasks-compact-table thead.tasks-thead-sticky th {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--bg, #f0f2f5);
  border-bottom: 2px solid var(--border, #dfe1e6);
}

/* Compact row heights */
.tasks-compact-table tbody tr td {
  padding: 5px 10px;
  font-size: .80rem;
  line-height: 1.35;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .topbar { padding-left: 16px; }
  .topbar-menu-btn { display: flex; }
  .topbar-brand { display: none; }
  .topbar-user-name { display: none; }
  .notif-panel { right: 8px; width: calc(100vw - 16px); max-width: 340px; }
  .tasks-table-wrap { max-height: calc(100vh - 240px); }
}



/* ═══════════════════════════════════════════════════════════════════
   TASKS PAGE — PROFESSIONAL TK-* DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════════ */

/* ── PAGE HEADER ── */
.tk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 10px;
  border-bottom: 1px solid var(--border-light, #ebecf0);
}
.tk-header-left { display: flex; align-items: center; gap: 12px; }
.tk-header-right { display: flex; align-items: center; gap: 8px; }
.tk-title-wrap { display: flex; align-items: center; gap: 10px; }
.tk-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text, #172b4d);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tk-title i { color: var(--primary, #7c3aed); font-size: 1.1rem; }
.tk-count-badge {
  background: var(--primary-light, #ede9fe);
  color: var(--primary, #7c3aed);
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  min-width: 28px;
  text-align: center;
}

/* ── HEADER BUTTONS ── */
.tk-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border, #dfe1e6);
  background: #fff;
  color: var(--text-2, #344563);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.tk-btn-ghost:hover {
  background: var(--bg, #f0f2f5);
  border-color: var(--primary, #7c3aed);
  color: var(--primary, #7c3aed);
}
.tk-btn-ghost.active {
  background: var(--primary-light, #ede9fe);
  border-color: var(--primary, #7c3aed);
  color: var(--primary, #7c3aed);
}
.tk-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  background: var(--primary, #7c3aed);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.tk-btn-primary:hover { background: #6d28d9; transform: translateY(-1px); }
.tk-btn-primary:active { transform: translateY(0); }

/* ── STAT PILLS ROW ── */
.tk-stat-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px 20px;
  background: var(--bg, #f0f2f5);
  border-bottom: 1px solid var(--border-light, #ebecf0);
  flex-wrap: wrap;
}
.tk-stat-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border-light, #ebecf0);
  border-radius: 8px;
  padding: 7px 12px;
  min-width: 80px;
  flex: 1;
  cursor: default;
  transition: box-shadow .15s, transform .15s;
  position: relative;
  overflow: hidden;
}
.tk-stat-pill::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}
.tk-stat-all::before    { background: #7c3aed; }
.tk-stat-prog::before   { background: #f59e0b; }
.tk-stat-done::before   { background: #10b981; }
.tk-stat-overdue::before{ background: #ef4444; }
.tk-stat-todo::before   { background: #8b5cf6; }
.tk-stat-pct::before    { background: #6366f1; }
.tk-stat-pill:hover     { box-shadow: 0 2px 8px rgba(0,0,0,.08); transform: translateY(-1px); }
.tk-stat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tk-stat-num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #172b4d);
  line-height: 1;
}
.tk-stat-lbl {
  font-size: .72rem;
  color: var(--text-muted, #5e6c84);
  white-space: nowrap;
  font-weight: 500;
}

/* ── FILTER TOOLBAR ── */
.tk-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: #fff;
  border-bottom: 1px solid var(--border-light, #ebecf0);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.tk-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 220px;
}
.tk-search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted, #5e6c84);
  font-size: .8rem;
  pointer-events: none;
}
.tk-search-input {
  width: 100%;
  padding: 7px 12px 7px 30px;
  border: 1.5px solid var(--border, #dfe1e6);
  border-radius: 8px;
  font-size: .82rem;
  color: var(--text, #172b4d);
  background: var(--bg, #f0f2f5);
  transition: border .15s, box-shadow .15s;
  outline: none;
}
.tk-search-input:focus {
  border-color: var(--primary, #7c3aed);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.tk-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.tk-select {
  padding: 7px 28px 7px 10px;
  border: 1.5px solid var(--border, #dfe1e6);
  border-radius: 8px;
  font-size: .80rem;
  color: var(--text-2, #344563);
  background: var(--bg, #f0f2f5)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235e6c84'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  background-size: 8px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border .15s, box-shadow .15s;
  outline: none;
  max-width: 150px;
}
.tk-select:focus {
  border-color: var(--primary, #7c3aed);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.tk-btn-apply {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  background: var(--primary, #7c3aed);
  color: #fff;
  font-size: .80rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.tk-btn-apply:hover { background: #6d28d9; }
.tk-btn-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--border, #dfe1e6);
  background: #fff;
  color: var(--text-muted, #5e6c84);
  font-size: .8rem;
  cursor: pointer;
  transition: all .15s;
}
.tk-btn-clear:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* ── TABLE WRAPPER ── */
.tk-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  min-height: 300px;
  max-height: calc(100vh - 200px);
  background: #fff;
}

/* ── TABLE STRUCTURE ── */
.tk-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .82rem;
}

/* ── TABLE HEADER ── */
.tk-table thead tr {
  background: var(--bg, #f0f2f5);
}
.tk-table thead {
  position: sticky;
  top: 0;
  z-index: 20;
}
.tk-th {
  padding: 6px 12px;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted, #5e6c84);
  border-bottom: 2px solid var(--border, #dfe1e6);
  white-space: nowrap;
  background: var(--bg, #f0f2f5);
  user-select: none;
}
.tk-th-num    { width: 36px; text-align: center; }
.tk-th-proj   { width: 9%; min-width: 80px; }
.tk-th-title  { width: 25%; min-width: 140px; }
.tk-th-desc   { width: 25%; min-width: 100px; }
.tk-th-cat    { width: 9%; min-width: 72px; }
.tk-th-center { width: 44px; text-align: center; }
.tk-th-status { width: 90px; }
.tk-th-prog   { width: 90px; }
.tk-th-due    { width: 68px; }
.tk-th-actions{ width: 68px; }

/* Desc cell: truncated with ellipsis, muted style */
.tk-td-desc   { max-width: 0; }
.tk-task-desc-cell {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
  color: var(--text-muted, #8b949e);
  cursor: default;
}

/* Multi-assignee overlapping avatar stack */
.tk-avatar-stack {
  display: flex;
  align-items: center;
}
.tk-avatar-stack .tk-avatar,
.tk-avatar-stack .tk-avatar-sm {
  margin-left: -6px;
  border: 2px solid var(--bg-card, #fff);
  position: relative;
  flex-shrink: 0;
}
.tk-avatar-stack .tk-avatar:first-child,
.tk-avatar-stack .tk-avatar-sm:first-child {
  margin-left: 0;
}

/* ── TABLE BODY ROWS ── */
.tk-row {
  border-bottom: 1px solid var(--border-light, #ebecf0);
  transition: background .1s;
}
.tk-row:hover { background: #f8f7ff; }
.tk-row:hover .tk-act-btn { opacity: 1; }
.tk-row-overdue { background: #fff8f8 !important; }
.tk-row-overdue:hover { background: #fff0f0 !important; }
.tk-row-sub {
  background: #fafafa;
  border-left: 3px solid var(--border-light, #ebecf0);
}
.tk-row-sub:hover { background: #f5f3ff; }

/* ── TABLE CELLS ── */
.tk-td {
  padding: 6px 10px;
  vertical-align: middle;
  color: var(--text, #172b4d);
}
.tk-td-num    { width: 36px; text-align: center; }
.tk-td-title  { width: 35%; min-width: 180px; }
.tk-td-proj   { width: 13%; min-width: 100px; }
.tk-td-cat    { width: 12%; min-width: 90px; }
.tk-td-center { width: 46px; text-align: center; }
.tk-td-status { width: 110px; }
.tk-td-prog   { width: 110px; }
.tk-td-due    { width: 80px; }
.tk-td-actions{ width: 80px; }

/* ── ROW NUMBER / EXPAND BUTTON ── */
.tk-row-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg, #f0f2f5);
  color: var(--text-muted, #5e6c84);
  font-size: .72rem;
  font-weight: 600;
}
.tk-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--border, #dfe1e6);
  background: #fff;
  color: var(--primary, #7c3aed);
  font-size: .65rem;
  cursor: pointer;
  transition: all .15s;
}
.tk-expand-btn:hover {
  background: var(--primary-light, #ede9fe);
  border-color: var(--primary, #7c3aed);
}

/* ── TASK TITLE CELL ── */
.tk-task-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tk-task-title {
  font-size: .84rem;
  font-weight: 500;
  color: var(--text, #172b4d);
  line-height: 1.35;
  word-break: break-word;
}
.tk-task-parent {
  font-weight: 700;
  color: var(--text, #172b4d);
}
.tk-child-count {
  display: inline-block;
  font-size: .65rem;
  background: var(--primary-light, #ede9fe);
  color: var(--primary, #7c3aed);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

/* Sub-task indent wrapper */
.tk-sub-title-wrap { padding-left: 20px; }
.tk-sub-indent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.tk-sub-bar {
  display: inline-block;
  width: 2px; height: 16px;
  background: #d1d5db;
  border-radius: 2px;
}

/* ── TAGS ── */
.tk-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.tk-tag {
  display: inline-block;
  font-size: .65rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

/* ── PROJECT CHIP ── */
.tk-proj-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 130px;
  font-size: .76rem;
  color: var(--text-2, #344563);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: color-mix(in srgb, var(--pc, #6366f1) 8%, transparent);
  padding: 2px 7px 2px 4px;
  border-radius: 6px;
}
.tk-proj-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── CATEGORY CHIP ── */
.tk-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid;
  white-space: nowrap;
  font-weight: 500;
}
.tk-cat-chip i { font-size: .62rem; }

/* ── ASSIGNEE AVATAR ── */
.tk-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  cursor: default;
  border: 2px solid rgba(255,255,255,.8);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.tk-avatar-sm { width: 24px; height: 24px; font-size: .58rem; }

/* ── PRIORITY BADGE ── */
.tk-prio-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
.tk-prio-sm { font-size: .68rem; padding: 2px 7px; }
.tk-prio-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── STATUS BADGE ── */
.tk-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.tk-status-sm { font-size: .68rem; padding: 2px 7px; }
.tk-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── PROGRESS BAR ── */
.tk-prog-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}
.tk-prog-bar {
  flex: 1;
  height: 6px;
  background: #e9ecef;
  border-radius: 10px;
  overflow: hidden;
  min-width: 50px;
}
.tk-prog-fill {
  height: 100%;
  border-radius: 10px;
  transition: width .3s ease;
}
.tk-prog-pct {
  font-size: .70rem;
  color: var(--text-muted, #5e6c84);
  min-width: 28px;
  text-align: right;
  font-weight: 600;
}

/* ── DUE DATE ── */
.tk-due {
  font-size: .78rem;
  color: var(--text-2, #344563);
  white-space: nowrap;
}
.tk-due-overdue {
  color: #dc2626;
  font-weight: 600;
}
.tk-due-overdue i { margin-right: 2px; font-size: .7rem; }
.tk-empty {
  color: #d1d5db;
  font-size: .80rem;
}

/* ── ACTION BUTTONS ── */
.tk-actions {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: flex-end;
}
.tk-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border-light, #ebecf0);
  background: #fff;
  color: var(--text-muted, #5e6c84);
  font-size: .72rem;
  cursor: pointer;
  opacity: 0;
  transition: all .15s;
}
.tk-act-btn:hover {
  background: var(--primary-light, #ede9fe);
  border-color: var(--primary, #7c3aed);
  color: var(--primary, #7c3aed);
  opacity: 1 !important;
}
.tk-act-del:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* ── LOADING CELL ── */
.tk-loading-cell {
  padding: 40px;
  text-align: center;
  color: var(--text-muted, #5e6c84);
}

/* ── EMPTY STATE ── */
.tk-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-muted, #5e6c84);
  gap: 12px;
}
.tk-empty-state i {
  font-size: 2.5rem;
  color: #d1d5db;
}
.tk-empty-state p {
  font-size: .9rem;
  margin: 0;
}

/* ── GROUP HEADER ROW ── */
.tk-group-header td {
  padding: 8px 12px;
  background: var(--bg, #f0f2f5);
  font-size: .76rem;
  font-weight: 700;
  color: var(--text-2, #344563);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-top: 2px solid var(--border, #dfe1e6);
  cursor: pointer;
}
.tk-group-header:hover td { background: #e8e6f0; }

/* ── RESPONSIVE ADJUSTMENTS ── */
@media (max-width: 1100px) {
  .tk-stat-row { gap: 6px; }
  .tk-stat-pill { min-width: 80px; padding: 8px 10px; }
  .tk-stat-num { font-size: 1rem; }
}
@media (max-width: 768px) {
  .tk-header { padding: 14px 16px 12px; flex-wrap: wrap; gap: 10px; }
  .tk-toolbar { padding: 10px 16px; }
  .tk-search-wrap { flex: 1 1 100%; }
  .tk-stat-row { padding: 12px 16px; gap: 6px; }
  .tk-stat-pill { flex: 1 1 calc(33% - 6px); min-width: 0; }
  .tk-table-wrap { max-height: calc(100vh - 180px); }
  .tk-select { max-width: 120px; }
}


/* ════════════════════════════════════════════════════════════
   MULTI-SELECT DROPDOWN (tk-ms-*)
   ════════════════════════════════════════════════════════════ */
.tk-ms-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}
.tk-ms-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--bg, #f4f5f7);
  border: 1px solid var(--border, #dfe1e6);
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text, #172b4d);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
  user-select: none;
}
.tk-ms-label:hover {
  background: #e8eaf0;
  border-color: #9fadcc;
}
.tk-ms-label::after {
  content: '▾';
  font-size: .7rem;
  opacity: .6;
  margin-left: 3px;
}
.tk-ms-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--border, #dfe1e6);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  display: none;
}
.tk-ms-dropdown.open {
  display: block;
}
.tk-ms-opts {
  padding: 6px 4px;
  max-height: 220px;
  overflow-y: auto;
}
.tk-ms-opts label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  font-size: .8rem;
  color: var(--text, #172b4d);
  cursor: pointer;
  border-radius: 4px;
  transition: background .1s;
}
.tk-ms-opts label:hover {
  background: #f0f2f5;
}
.tk-ms-opts input[type=checkbox] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--primary, #6366f1);
}
.tk-ms-empty {
  display: block;
  padding: 8px 12px;
  font-size: .78rem;
  color: var(--text-muted, #5e6c84);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   LOAD MORE BUTTON
   ════════════════════════════════════════════════════════════ */
.tk-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 14px 0 8px;
}
.tk-load-more-btn {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 8px 24px;
  background: #fff;
  border: 1.5px solid var(--border, #dfe1e6);
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--primary, #6366f1);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.tk-load-more-btn:hover {
  background: #f0f0ff;
  border-color: var(--primary, #6366f1);
  box-shadow: 0 2px 8px rgba(99,102,241,.15);
}

/* ════════════════════════════════════════════════════════════
   ASSIGNED BY BADGE (tk-assigned-by)
   ════════════════════════════════════════════════════════════ */
.tk-assigned-by {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e0e7ff;
  color: #4338ca;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  border: 1.5px solid #c7d2fe;
  cursor: default;
}

/* ════════════════════════════════════════════════════════════
   TASK DESCRIPTION PREVIEW (project detail)
   ════════════════════════════════════════════════════════════ */
.tk-task-desc {
  font-size: .72rem;
  color: var(--text-muted, #5e6c84);
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

/* ════════════════════════════════════════════════════════════
   GROUP SPACING — extra margin before 2nd+ project group
   ════════════════════════════════════════════════════════════ */
.task-group-spacer td {
  padding-top: 20px !important;
  border-top: 3px solid var(--border, #dfe1e6) !important;
}