/* Global icon sizing — prevents oversized SVGs where no context rule applies */
svg.ico { width:16px; height:16px; stroke-width:1.8; flex-shrink:0; vertical-align:middle; }
.btn svg.ico, .btn-sm svg.ico { width:15px; height:15px; }
.page-head-actions svg.ico, .crumbs svg.ico { width:15px; height:15px; }
.icon-btn svg { width:18px; height:18px; }

/* ============================================================
   Blossom HR — Modern Admin Demo
   Design system + components
   ============================================================ */

:root {
  /* Palette ---------------------------------------------------- */
  --bg:           #f6f5f1;            /* warm paper */
  --bg-2:         #efede6;            /* subtle alt */
  --card:         #ffffff;
  --card-soft:    #fbfaf7;
  --ink:          #0a0a0a;            /* primary text */
  --ink-2:        #1c1c1c;
  --muted:        #6b6b6b;
  --muted-2:      #9a9a96;
  --line:         #e6e3dc;
  --line-2:       #ececec;

  --brand:        #1d4ed8;            /* deep blue */
  --brand-ink:    #ffffff;
  --brand-soft:   #eaf0ff;
  --brand-hover:  #1640b8;

  --accent:       #ff5b1f;            /* punchy orange */
  --accent-soft:  #ffe6dc;

  --ok:           #15803d;
  --ok-soft:      #dcfce7;
  --warn:         #b45309;
  --warn-soft:    #fef3c7;
  --danger:       #b91c1c;
  --danger-soft:  #fee2e2;
  --info:         #0369a1;
  --info-soft:    #e0f2fe;

  --sidebar:      #0a0a0a;
  --sidebar-text: #a0a0a0;
  --sidebar-hover:#1a1a1a;
  --sidebar-active-bg:#ffffff;
  --sidebar-active-ink:#0a0a0a;

  /* Shape */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Shadow */
  --shadow-sm: 0 1px 0 rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 1px 0 rgba(0,0,0,.04), 0 8px 24px -12px rgba(15,15,15,.10);
  --shadow-lg: 0 20px 40px -20px rgba(0,0,0,.18);

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h:  64px;
}

[data-theme="dark"] {
  --bg:           #0a0a0a;
  --bg-2:         #111111;
  --card:         #131313;
  --card-soft:    #181818;
  --ink:          #f5f5f4;
  --ink-2:        #d6d3d1;
  --muted:        #a8a29e;
  --muted-2:      #78716c;
  --line:         #262626;
  --line-2:       #1f1f1f;

  --brand-soft:   #16213d;
  --accent-soft:  #2a160e;
  --ok-soft:      #052e1a;
  --warn-soft:    #2a1d05;
  --danger-soft:  #2a0e0e;
  --info-soft:    #062236;

  --sidebar:      #050505;
  --sidebar-text: #888;
  --sidebar-hover:#161616;
  --sidebar-active-bg:#222;
  --sidebar-active-ink:#fff;

  --shadow-sm: 0 1px 0 rgba(255,255,255,.02), 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 1px 0 rgba(255,255,255,.02), 0 12px 28px -12px rgba(0,0,0,.6);
}

/* Reset / base ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

h1,h2,h3,h4,h5 {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
h5 { font-size: 15px; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "tnum"; }
.num  { font-variant-numeric: tabular-nums; }

/* App shell --------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.app.sidebar-collapsed { grid-template-columns: 72px 1fr; }

/* Sidebar ----------------------------------------------------- */
.sidebar {
  background: var(--sidebar);
  color: var(--sidebar-text);
  border-right: 1px solid transparent;
  position: sticky; top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #1c1c1c;
  margin-bottom: 6px;
}
.brand-mark {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--accent) 0%, #ff8b5e 100%);
  border-radius: 9px;
  display: grid; place-items: center;
  color: #fff;
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.04em;
  box-shadow: 0 4px 14px -2px rgba(255,91,31,.4);
}
.brand-name {
  color: #fff;
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.brand-tag {
  color: #6b6b6b;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 1px;
}

.nav-section {
  padding: 14px 14px 6px;
}
.nav-label {
  color: #555;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  padding: 0 6px 8px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--sidebar-text);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 1px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  position: relative;
}
.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item .ico { width: 18px; height: 18px; stroke-width: 1.8; flex-shrink: 0; }
.nav-item .nav-badge {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.5;
}
.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-ink);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 8px; bottom: 8px;
  width: 3px; background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.nav-item.has-sub::after {
  content: '';
  margin-left: auto;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease;
  opacity: .5;
}
.nav-item.has-sub.open::after { transform: rotate(45deg); }
.sub-menu {
  list-style: none;
  padding: 2px 0 4px 38px;
  margin: 0;
  display: none;
}
.sub-menu.open { display: block; }
.sub-menu .nav-item {
  padding: 7px 10px;
  font-size: 13px;
  color: #888;
}
.sub-menu .nav-item.active {
  background: transparent;
  color: #fff;
}
.sub-menu .nav-item.active::before { display: none; }
.sub-menu .nav-item.active::after {
  content:'';
  position: absolute;
  left: -10px; top: 50%;
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateY(-50%);
  margin: 0;
  border: none;
}

.sidebar-foot {
  margin-top: auto;
  padding: 14px;
  border-top: 1px solid #1c1c1c;
}
.user-mini {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: #161616;
}
.user-mini .avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #525252 0%, #2a2a2a 100%);
  display: grid; place-items: center;
  color: #fff; font-weight: 600; font-size: 13px;
}
.user-mini .nm { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; }
.user-mini .rl { color: #777; font-size: 11px; }

/* Topbar ------------------------------------------------------ */
.main { min-width: 0; }
.topbar {
  position: sticky; top: 0;
  z-index: 30;
  background: rgba(246,245,241,.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
}
[data-theme="dark"] .topbar { background: rgba(10,10,10,.85); }
.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  transition: background .15s ease, transform .15s ease;
  position: relative;
}
.icon-btn:hover { background: var(--card-soft); }
.icon-btn .dot {
  position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--card);
}

.topbar-search {
  flex: 1;
  max-width: 480px;
  position: relative;
}
.topbar-search input {
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 0 14px 0 38px;
  color: var(--ink);
  font: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.topbar-search input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.topbar-search .ico {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  width: 16px; height: 16px;
}
.topbar-search kbd {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--muted);
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--line);
}

.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.profile-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
  transition: background .15s ease;
}
.profile-pill:hover { background: var(--card-soft); }
.profile-pill .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d4ed8 0%, #5b8def 100%);
  display: grid; place-items: center;
  color: #fff; font-weight: 600; font-size: 12px;
}
.profile-pill .nm { font-size: 13px; font-weight: 600; }
.profile-pill .rl { font-size: 11px; color: var(--muted); }

/* Page container --------------------------------------------- */
.page {
  padding: 28px 32px 64px;
  width: 100%;
  max-width: 1760px;       /* generous cap; was 1480 (left a gap on desktop) */
  margin-inline: auto;     /* centre the cap on ultra-wide screens */
  box-sizing: border-box;
}
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 28px;
  gap: 24px;
  flex-wrap: wrap;
  /* Sticky header — stays visible as the user scrolls the task list/board */
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  /* Extend background edge-to-edge to cover content scrolling under it */
  margin-left: -32px;
  margin-right: -32px;
  padding: 16px 32px 14px;
  border-bottom: 1px solid var(--line);
  /* Subtle shadow to visually lift header above scrolling content */
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.page-head .crumbs {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-bottom: 8px;
}
.page-head .crumbs span { color: var(--ink); }
.page-head h1 .accent { color: var(--accent); }
.page-head .lede { color: var(--muted); margin-top: 6px; max-width: 540px; }
.page-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Cards ------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px;
}
.card-head h3, .card-head h4 {
  margin: 0;
}
.card-head .sub {
  font-size: 12.5px; color: var(--muted); margin-top: 2px;
  font-family: 'Manrope', sans-serif; font-weight: 400; letter-spacing: 0;
}

/* Stat cards -------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { .stats { grid-template-columns: 1fr; } }
.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 20px 18px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat .stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex; align-items: center; gap: 8px;
}
.stat .stat-label .ico { width: 14px; height: 14px; stroke-width: 2; }
.stat .stat-value {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: 14px;
  color: var(--ink);
}
.stat .stat-delta {
  font-size: 12.5px;
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ok);
  font-weight: 600;
}
.stat .stat-delta.down { color: var(--danger); }
.stat .stat-delta .ico { width: 13px; height: 13px; }
.stat .stat-trend {
  position: absolute; right: 14px; bottom: 14px;
  opacity: .85;
}
.stat.accent { background: var(--ink); color: #fff; border-color: var(--ink); }
.stat.accent .stat-label { color: rgba(255,255,255,.6); }
.stat.accent .stat-value { color: #fff; }
.stat.accent .stat-delta { color: #ff9d6e; }

/* Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13.5px;
  border: 1px solid transparent;
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
  transition: all .15s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--card-soft); }
.btn .ico { width: 15px; height: 15px; }
.btn-primary {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-2); }
.btn-accent {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.btn-accent:hover { background: #e64f17; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-2); }
.btn-danger { color: var(--danger); border-color: var(--line); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn-lg { height: 44px; padding: 0 22px; font-size: 14.5px; border-radius: 12px; }
.btn-icon { width: 38px; padding: 0; justify-content: center; }
.btn-block { width: 100%; justify-content: center; }

/* Badges ------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line);
  white-space: nowrap;
  line-height: 1.4;
}
.badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.badge.no-dot::before { display: none; }
.badge.ok      { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.warn    { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.danger  { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge.info    { background: var(--info-soft); color: var(--info); border-color: transparent; }
.badge.accent  { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.brand   { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.badge.dark    { background: var(--ink); color: #fff; border-color: var(--ink); }
.badge.dark::before { background: var(--accent); }

/* Tables ------------------------------------------------------ */
.table-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 10px;
}
.table-tools {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.tabs {
  display: inline-flex;
  background: var(--bg-2);
  padding: 3px;
  border-radius: 10px;
  gap: 2px;
}
.tabs button {
  border: none; background: transparent;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 7px;
  transition: all .15s ease;
}
.tabs button:hover { color: var(--ink); }
.tabs button.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.tabs button .count {
  margin-left: 5px;
  font-size: 11px;
  background: var(--bg-2);
  padding: 0 5px;
  border-radius: 4px;
  color: var(--muted);
}
.tabs button.active .count { background: var(--ink); color: #fff; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  text-align: left;
  padding: 13px 20px;
  font-size: 13px;
  vertical-align: middle;
}
.table thead th {
  background: var(--card-soft);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table tbody tr {
  border-bottom: 1px solid var(--line-2);
  transition: background .12s ease;
}
.table tbody tr:hover { background: var(--card-soft); }
.table tbody tr:last-child { border-bottom: 0; }
.table td .row-strong { font-weight: 600; }
.table td .row-sub { color: var(--muted); font-size: 12px; margin-top: 1px; }
.table .actions { display: inline-flex; gap: 6px; }

.user-cell { display: flex; align-items: center; gap: 10px; }
.user-cell .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.av-1 { background: linear-gradient(135deg,#1d4ed8,#5b8def); }
.av-2 { background: linear-gradient(135deg,#ff5b1f,#ff8b5e); }
.av-3 { background: linear-gradient(135deg,#15803d,#4ade80); }
.av-4 { background: linear-gradient(135deg,#9333ea,#c084fc); }
.av-5 { background: linear-gradient(135deg,#0891b2,#22d3ee); }
.av-6 { background: linear-gradient(135deg,#b45309,#fbbf24); }
.av-7 { background: linear-gradient(135deg,#0a0a0a,#404040); }

.pagination {
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
  flex-wrap: wrap; gap: 12px;
}
.pagination .pages { display: flex; gap: 4px; }
.pagination .pages button {
  width: 32px; height: 32px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 12.5px; font-weight: 600;
  color: var(--ink);
  display: grid; place-items: center;
}
.pagination .pages button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination .pages button:hover:not(.active) { background: var(--card-soft); }

/* Forms ------------------------------------------------------- */
.form-row { display: grid; gap: 14px; margin-bottom: 14px;  flex-wrap:wrap;}
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 720px) {
  .form-row.cols-2, .form-row.cols-3 { grid-template-columns: 1fr; }
}
.field { 
  display: flex; 
  flex-direction: column; 
  gap: 6px; 
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.field .hint { font-size: 11.5px; color: var(--muted); }
.input, .select, .textarea {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 0 14px;
  font: inherit;
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 100px; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.checkbox, .radio { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.checkbox input, .radio input { accent-color: var(--ink); width: 16px; height: 16px; }

/* Charts ------------------------------------------------------ */
.chart-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
}
.chart-wrap { position: relative; width: 100%; height: 280px; }
.chart-wrap svg { width: 100%; height: 100%; }
.chart-legend {
  display: flex; gap: 18px; margin-top: 14px;
  flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
.chart-legend .li { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .dt { width: 9px; height: 9px; border-radius: 2px; }

/* Avatar groups */
.avatar-group { display: inline-flex; }
.avatar-group .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 600;
  border: 2px solid var(--card);
  margin-left: -8px;
}
.avatar-group .avatar:first-child { margin-left: 0; }
.avatar-group .avatar.more {
  background: var(--bg-2); color: var(--ink);
  border: 2px solid var(--card);
}

/* Progress ---------------------------------------------------- */
.progress {
  height: 6px; background: var(--bg-2);
  border-radius: 999px; overflow: hidden;
}
.progress > i {
  display: block; height: 100%;
  background: var(--ink);
  border-radius: 999px;
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.progress.accent > i { background: var(--accent); }
.progress.brand  > i { background: var(--brand); }
.progress.ok     > i { background: var(--ok); }
.progress.warn   > i { background: var(--warn); }
.progress.danger > i { background: var(--danger); }

/* Lists / Activity ------------------------------------------- */
.activity { display: flex; flex-direction: column; gap: 14px; }
.activity-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}
.activity-item:last-child { border-bottom: 0; padding-bottom: 0; }
.activity-item .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #1d4ed8, #5b8def); color: #fff;
  display: grid; place-items: center; font-weight: 600; font-size: 12px;
  flex-shrink: 0; overflow: hidden;
}
.activity-item .avatar img { width: 100%; height: 100%; object-fit: cover; }
.activity-item .dot {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--bg-2);
  flex-shrink: 0;
}
.activity-item .dot .ico { width: 16px; height: 16px; }
.activity-item .dot.ok      { background: var(--ok-soft); color: var(--ok); }
.activity-item .dot.warn    { background: var(--warn-soft); color: var(--warn); }
.activity-item .dot.danger  { background: var(--danger-soft); color: var(--danger); }
.activity-item .dot.brand   { background: var(--brand-soft); color: var(--brand); }
.activity-item .dot.accent  { background: var(--accent-soft); color: var(--accent); }
.activity-item .content { flex: 1; min-width: 0; }
.activity-item .title { font-size: 13.5px; font-weight: 600; }
.activity-item .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Calendar/Day picker (attendance) --------------------------- */
.cal-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.cal-day {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: all .15s ease;
}
.cal-day:hover { border-color: var(--ink); }
.cal-day .d { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.cal-day .n { font-family:'Bricolage Grotesque', serif; font-size: 22px; font-weight: 600; margin-top: 4px; }
.cal-day .st { font-size: 10.5px; color: var(--ok); font-weight: 600; margin-top: 2px; }
.cal-day.holiday { background: var(--bg-2); }
.cal-day.absent .st { color: var(--danger); }
.cal-day.today { background: var(--ink); color: #fff; border-color: var(--ink); }
.cal-day.today .d, .cal-day.today .n, .cal-day.today .st { color: #fff; }
.cal-day.today .st { color: #ff9d6e; }

/* Kanban (tasks) --------------------------------------------- */
.kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 720px)  { .kanban { grid-template-columns: 1fr; } }
.k-col {
  background: var(--bg-2);
  border-radius: var(--r-lg);
  padding: 14px;
  min-height: 240px;
}
.k-col-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}
.k-col-head .t { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.k-col-head .t::before {
  content:''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
}
.k-col[data-status="todo"]  .t::before { background: var(--muted); }
.k-col[data-status="prog"]  .t::before { background: var(--brand); }
.k-col[data-status="rev"]   .t::before { background: var(--warn); }
.k-col[data-status="done"]  .t::before { background: var(--ok); }
.k-col-head .ct { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.k-cards { display: flex; flex-direction: column; gap: 10px; }
.k-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.k-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.k-card .ttl { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.k-card .desc { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.k-card .meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
  font-size: 11.5px; color: var(--muted);
}
.k-card .meta .due { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.k-card .meta .due .ico { width: 12px; height: 12px; }

/* Login special ---------------------------------------------- */
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
}
@media (max-width: 900px) { .login-shell { grid-template-columns: 1fr; } }
.login-art {
  background: var(--ink);
  color: #fff;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px) { .login-art { display: none; } }
.login-art::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle at center, rgba(255,91,31,.4) 0%, transparent 60%);
  top: -120px; right: -180px;
  filter: blur(20px);
}
.login-art::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle at center, rgba(29,78,216,.3) 0%, transparent 60%);
  bottom: -80px; left: -100px;
  filter: blur(20px);
}
.login-art > * { position: relative; z-index: 1; }
.login-art .badge-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  width: fit-content;
}
.login-art h1 {
  color: #fff;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-top: 22px;
}
.login-art h1 .em { color: var(--accent); font-style: italic; }
.login-art p.lede {
  color: rgba(255,255,255,.65);
  font-size: 15px;
  margin-top: 16px;
  max-width: 440px;
}
.login-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 14px;
  margin-top: 28px; max-width: 460px;
}
.login-stats .item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px;
}
.login-stats .v { font-family: 'Bricolage Grotesque', serif; font-size: 26px; font-weight: 600; }
.login-stats .l { font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 2px; }
.login-form-wrap {
  display: grid; place-items: center;
  padding: 32px;
}
.login-form {
  width: 100%;
  max-width: 400px;
}
.login-form .top-brand {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 36px;
}
.login-form h2 { font-size: 30px; }
.login-form .lede { color: var(--muted); margin-top: 6px; margin-bottom: 28px; }
.divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 12px;
  margin: 18px 0;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.btn-social {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  width: 100%; height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  font-weight: 600; font-size: 13.5px;
  margin-bottom: 8px;
}
.btn-social:hover { background: var(--card-soft); }
.btn-social svg { width: 16px; height: 16px; }

/* Misc -------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.grid-2-eq { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
@media (max-width: 1100px) { .grid-2, .grid-2-eq { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .grid-3 { grid-template-columns: 1fr; } }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; }
.mb-0 { margin-bottom: 0 !important; }
.text-muted { color: var(--muted); }
.text-accent { color: var(--accent); }
.text-ok { color: var(--ok); }
.text-danger { color: var(--danger); }
.fw-6 { font-weight: 600; }
.fw-7 { font-weight: 700; }

/* Mobile drawer ---------------------------------------------- */
.menu-toggle { display: none; }
@media (max-width: 900px) {
  .menu-toggle { display: grid; }
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0;
    width: 280px; z-index: 60;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .scrim {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 55;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  .scrim.show { opacity: 1; pointer-events: auto; }
  .page { padding: 20px; }
  .topbar { padding: 0 16px; }
  .topbar-search { display: none; }
}

/* Page-load entry animation ---------------------------------- */
@keyframes pop-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page > * { animation: pop-in .4s cubic-bezier(.2,.7,.2,1) both; }
.page > *:nth-child(1) { animation-delay: .02s; }
.page > *:nth-child(2) { animation-delay: .08s; }
.page > *:nth-child(3) { animation-delay: .14s; }
.page > *:nth-child(4) { animation-delay: .20s; }
.page > *:nth-child(5) { animation-delay: .26s; }
.page > *:nth-child(6) { animation-delay: .32s; }

/* Avatar large */
.avatar-lg {
  width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-family: 'Bricolage Grotesque', serif;
  font-size: 36px; font-weight: 600;
}

/* Empty state */
.empty {
  text-align: center; padding: 48px 20px;
}
.empty .ic {
  width: 56px; height: 56px;
  background: var(--bg-2);
  border-radius: 16px;
  display: inline-grid; place-items: center;
  margin-bottom: 14px;
}
.empty h4 { margin-bottom: 4px; }
.empty p { color: var(--muted); margin-top: 0; }

/* ============================================================
   ADDITIONAL COMPONENTS — pages built later
   ============================================================ */

/* --- layout grids --- */
.grid-2-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
@media (max-width: 1100px) { .grid-2-3 { grid-template-columns: 1fr; } }

/* --- utility color dots --- */
.bg-brand   { background: var(--brand); }
.bg-accent  { background: var(--accent); }
.bg-ok      { background: var(--ok); }
.bg-warn    { background: var(--warn); }
.bg-info    { background: var(--info); }
.bg-danger  { background: var(--danger); }

/* --- small helpers --- */
.hint { color: var(--muted-2); font-size: 12.5px; font-weight: 500; }
.link {
  background: none; border: 0; padding: 0;
  color: var(--brand); font-weight: 600; font-size: 13px;
  cursor: pointer; font-family: inherit;
}
.link:hover { text-decoration: underline; }
.form-row.two { grid-template-columns: 1fr 1fr; }
.seg.full { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.seg.full button { white-space: nowrap; }

/* avatar-mini for inline use */
.avatar-mini {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 10.5px; font-weight: 700;
  color: #fff; vertical-align: middle;
  margin-right: 6px;
}
.avatar-mini.av-1 { background: linear-gradient(135deg, #1d4ed8, #2563eb); }
.avatar-mini.av-2 { background: linear-gradient(135deg, #db2777, #f43f5e); }
.avatar-mini.av-3 { background: linear-gradient(135deg, #ea580c, #f59e0b); }
.avatar-mini.av-4 { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.avatar-mini.av-5 { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.avatar-mini.av-6 { background: linear-gradient(135deg, #be123c, #ec4899); }
.avatar-mini.av-7 { background: linear-gradient(135deg, #0369a1, #0ea5e9); }

/* tcol — table label/sublabel */
.tcol { display: flex; flex-direction: column; gap: 2px; }
.tcol strong { font-weight: 600; color: var(--ink); }
.tcol span { color: var(--muted); font-size: 12px; }

/* flat/compact table variants */
.data-table.flat { border: 0; box-shadow: none; }
.data-table.flat thead th { background: transparent; border-bottom: 1px solid var(--line); }
.data-table.compact th,
.data-table.compact td { padding: 10px 12px; font-size: 13px; }

/* search-mini */
.search-mini {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card-soft); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 10px;
  width: 240px;
}
.search-mini input {
  background: transparent; border: 0; outline: 0;
  font-family: inherit; font-size: 13px; color: var(--ink);
  width: 100%;
}

/* ============================================================
   LEADERBOARD (task-points)
   ============================================================ */
.leaderboard { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.lb-row {
  display: grid;
  grid-template-columns: 40px 40px 1fr 200px 80px;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card-soft);
}
.lb-row.top { background: var(--card); }
.lb-row.me  { border-color: var(--brand); background: var(--brand-soft); }
.lb-rank {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-2);
  display: grid; place-items: center;
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 700; font-size: 15px;
  color: var(--ink);
}
.lb-rank.gold   { background: linear-gradient(135deg,#fbbf24,#f59e0b); color:#fff; box-shadow: 0 4px 12px -2px rgba(245,158,11,.4); }
.lb-rank.silver { background: linear-gradient(135deg,#cbd5e1,#94a3b8); color:#fff; }
.lb-rank.bronze { background: linear-gradient(135deg,#fb923c,#ea580c); color:#fff; }
.lb-info { display: flex; flex-direction: column; gap: 2px; }
.lb-name { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.lb-meta { color: var(--muted); font-size: 12.5px; }
.lb-bar  { height: 8px; background: #000000; border-radius: 99px; overflow: hidden; }
.lb-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 99px; }
.lb-points { text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 15px; color: var(--ink); }
@media (max-width: 900px) {
  .lb-row { grid-template-columns: 32px 36px 1fr 80px; }
  .lb-bar { display: none; }
}

/* breakdown list */
.breakdown { display: flex; flex-direction: column; gap: 4px; }
.bd-row {
  display: grid; grid-template-columns: 14px 1fr auto;
  align-items: center; gap: 12px;
  padding: 9px 4px;
}
.bd-dot { width: 10px; height: 10px; border-radius: 50%; }
.bd-name { color: var(--ink-2); font-size: 13.5px; }
.bd-val { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--ink); }
.bd-total {
  display: flex; justify-content: space-between;
  padding: 14px 4px 4px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
  font-weight: 700; color: var(--ink); font-size: 15px;
}
.bd-total .num, .bd-total span:last-child {
  font-family: 'Bricolage Grotesque', serif;
}

/* milestone */
.milestone { padding: 8px 4px; }
.milestone-name { font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.milestone-progress {
  height: 10px; background: var(--bg-2); border-radius: 99px; overflow: hidden;
  margin-bottom: 6px;
}
.milestone-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius: 99px;
}
.milestone-meta {
  display: flex; justify-content: space-between;
  color: var(--muted); font-size: 12.5px;
}

/* ============================================================
   LEAVES — balance cards
   ============================================================ */
.balance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .balance-grid { grid-template-columns: 1fr 1fr; } }
.bal-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.bal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.bal-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
}
.bal-icon svg { width: 18px; height: 18px; }
.bal-name { font-weight: 600; color: var(--ink); }
.bal-num { display: baseline; }
.bal-used { font-family: 'Bricolage Grotesque', serif; font-weight: 700; font-size: 36px; color: var(--ink); }
.bal-of { color: var(--muted); font-size: 16px; font-weight: 500; margin-left: 4px; }
.bal-track {
  height: 6px; background: var(--bg-2); border-radius: 99px; overflow: hidden;
  margin: 12px 0 8px;
}
.bal-track span { display: block; height: 100%; border-radius: 99px; }
.bal-foot { color: var(--muted); font-size: 12.5px; }

/* upcoming list */
.upcoming-list { display: flex; flex-direction: column; gap: 4px; }
.up-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 10px 4px;
}
.up-info { display: flex; flex-direction: column; gap: 2px; }
.up-name { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.up-meta { color: var(--muted); font-size: 12px; }

/* ============================================================
   EXPENSES — non-native trip cards
   ============================================================ */
.trip-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
@media (max-width: 900px) { .trip-grid { grid-template-columns: 1fr; } }
.trip-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.trip-card.active { border-color: var(--accent); }
.trip-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.trip-head h4 { margin: 6px 0 0; font-size: 17px; font-weight: 700; }
.trip-amount { font-family: 'Bricolage Grotesque', serif; font-weight: 700; font-size: 22px; color: var(--ink); }
.trip-meta {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
}
.lbl { color: var(--muted); margin-right: 6px; }
.trip-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
}
.trip-prog { height: 6px; flex: 1; background: var(--bg-2); border-radius: 99px; overflow: hidden; margin-right: 12px; }
.trip-prog span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.trip-note { color: var(--muted); font-size: 12.5px; }

/* ============================================================
   REPORT ISSUE — chip cards
   ============================================================ */
.chip-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 700px) { .chip-grid { grid-template-columns: 1fr 1fr; } }
.chip-card {
  position: relative;
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--card-soft);
  cursor: pointer;
  transition: all .15s ease;
  display: flex; flex-direction: column; gap: 6px;
}
.chip-card:hover { border-color: var(--ink); }
.chip-card.selected { border-color: var(--brand); background: var(--brand-soft); }
.chip-card input { position: absolute; opacity: 0; }
.chip-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; color: #fff;
  margin-bottom: 4px;
}
.chip-icon svg { width: 16px; height: 16px; }
.chip-title { font-weight: 600; color: var(--ink); font-size: 14px; }
.chip-sub { color: var(--muted); font-size: 12px; }

/* check-line */
.check-line {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.check-line input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.check-line span { font-size: 13.5px; color: var(--ink-2); }

/* dropzone small */
.dropzone.small { padding: 16px; font-size: 13px; }

/* form-actions */
.form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--line-2);
}

/* ticket list */
.ticket-list { display: flex; flex-direction: column; gap: 8px; }
.ticket {
  display: flex; gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-soft);
}
.ticket-tag { width: 4px; border-radius: 2px; align-self: stretch; }
.ticket-body { flex: 1; }
.ticket-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ticket-id { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.ticket-title { font-weight: 600; color: var(--ink); font-size: 13.5px; margin-bottom: 2px; }
.ticket-meta { color: var(--muted); font-size: 12px; }

/* callout */
.callout {
  margin-top: 20px;
  display: flex; gap: 12px;
  padding: 14px;
  background: var(--info-soft);
  border: 1px solid var(--info);
  border-radius: 10px;
}
.callout.subtle { background: var(--bg-2); border-color: var(--line); }
.callout-icon {
  width: 32px; height: 32px;
  background: var(--info);
  color: #fff;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.callout-icon svg { width: 18px; height: 18px; }
.callout.subtle .callout-icon { background: var(--ink); }
.callout-title { font-weight: 700; color: var(--ink); font-size: 13.5px; margin-bottom: 3px; }
.callout-text { color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* ============================================================
   FEEDBACK
   ============================================================ */
.rating-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.r-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px;
  background: var(--card-soft);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-size: 26px;
  font-family: inherit;
  transition: all .15s ease;
}
.r-btn span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.r-btn:hover { border-color: var(--ink); }
.r-btn.active { border-color: var(--accent); background: var(--accent-soft); }
.r-btn.active span { color: var(--accent); }

.tag-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill {
  padding: 7px 13px;
  background: var(--card-soft);
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
}
.tag-pill:hover { border-color: var(--ink); }
.tag-pill.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tag-pick.view .tag-pill { cursor: default; }

.ident-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ident-card {
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  display: block;
  background: var(--card-soft);
}
.ident-card input { display: none; }
.ident-card.selected { border-color: var(--brand); background: var(--brand-soft); }
.ident-card strong { display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 3px; }
.ident-card span { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* impact list */
.impact-list { display: flex; flex-direction: column; gap: 16px; }
.impact {
  padding: 14px;
  background: var(--card-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.impact-num {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 700; font-size: 32px;
  color: var(--ink); line-height: 1;
}
.impact-num .of { font-size: 16px; color: var(--muted); margin-left: 2px; }
.impact-name { color: var(--muted); font-size: 12.5px; margin-top: 4px; }

/* win list */
.win-list { display: flex; flex-direction: column; gap: 12px; }
.win { display: flex; gap: 12px; }
.win-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.win-title { font-weight: 600; color: var(--ink); font-size: 13.5px; margin-bottom: 2px; }
.win-meta { color: var(--muted); font-size: 12px; }

/* ============================================================
   LOAN
   ============================================================ */
.loan-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 16px;
  background: var(--card-soft);
  border-radius: 10px;
  margin: 4px 0 18px;
}
.loan-summary > div { display: flex; flex-direction: column; gap: 4px; }
.loan-summary .lbl { color: var(--muted); font-size: 12px; font-weight: 500; }
.loan-summary .num { font-family: 'Bricolage Grotesque', serif; font-weight: 600; color: var(--ink); font-size: 16px; }
.loan-progress { margin-bottom: 16px; }
.lp-bar {
  height: 10px; background: var(--bg-2); border-radius: 99px; overflow: hidden;
  margin-bottom: 8px;
}
.lp-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--ok));
  border-radius: 99px;
}
.lp-meta {
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--muted);
}
.loan-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--line-2);
}
.emi-preview {
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  border-radius: 10px;
  padding: 14px;
  margin: 8px 0 14px;
}
.emi-row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  color: var(--ink-2);
}
.emi-row:last-child { padding-top: 10px; margin-top: 6px; border-top: 1px solid rgba(0,0,0,.08); font-weight: 700; }
.slider-row { margin-top: 8px; }
.slider-row input[type="range"] { width: 100%; accent-color: var(--brand); }
.slider-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   MEETINGS
   ============================================================ */
.day-block { margin-bottom: 24px; }
.day-block:last-child { margin-bottom: 0; }
.day-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.day-name { font-weight: 700; color: var(--ink); font-size: 15px; }
.day-date { color: var(--muted); font-size: 13px; }
.meet-row {
  display: grid;
  grid-template-columns: 70px 4px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--card-soft);
  border-radius: 10px;
  margin-bottom: 6px;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.meet-row:hover { background: var(--bg-2); }
.meet-row.now { background: var(--accent-soft); }
.meet-time { display: flex; flex-direction: column; align-items: center; }
.meet-time strong { font-family: 'Bricolage Grotesque', serif; font-weight: 700; font-size: 18px; color: var(--ink); }
.meet-time span { color: var(--muted); font-size: 11px; }
.meet-bar { align-self: stretch; border-radius: 2px; }
.meet-title { font-weight: 600; color: var(--ink); font-size: 14px; margin-bottom: 4px; }
.meet-meta {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: 12.5px;
}
.avatar-group .more {
  background: var(--bg-2); color: var(--ink-2);
  display: inline-grid; place-items: center;
  font-size: 10.5px; font-weight: 700;
  width: 26px; height: 26px;
  border-radius: 50%;
  margin-left: -8px;
  border: 2px solid var(--card);
}

/* mini-cal */
.mini-cal { display: flex; flex-direction: column; gap: 4px; }
.mc-row {
  display: grid; grid-template-columns: 60px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 4px;
  border-radius: 8px;
}
.mc-row.today { background: var(--brand-soft); padding: 10px 8px; }
.mc-row.off { color: var(--muted); }
.mc-day { font-weight: 600; color: var(--ink); font-size: 13px; }
.mc-row.off .mc-day { color: var(--muted-2); }
.mc-dots { display: flex; gap: 4px; }
.mc-dots .dot { width: 8px; height: 8px; border-radius: 50%; }
.mc-cnt { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 13px; color: var(--ink); }
.mc-empty { color: var(--muted-2); font-size: 12px; font-style: italic; }

/* meet-hero (detail page) */
.meet-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}
@media (max-width: 900px) { .meet-hero { grid-template-columns: 1fr; } }
.mh-left { display: flex; flex-direction: column; gap: 14px; }
.mh-time { display: flex; align-items: flex-end; gap: 16px; }
.mh-block { display: flex; flex-direction: column; }
.mh-num { font-family: 'Bricolage Grotesque', serif; font-weight: 700; font-size: 40px; color: var(--ink); line-height: 1; }
.mh-num span { font-size: 22px; color: var(--muted); }
.mh-lbl { color: var(--muted); font-size: 12px; margin-top: 4px; }
.mh-sep { font-size: 28px; color: var(--muted-2); padding-bottom: 12px; }
.mh-right { display: flex; flex-direction: column; gap: 12px; }
.mh-loc {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px;
  background: var(--card-soft);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.mh-loc svg { width: 18px; height: 18px; color: var(--brand); margin-top: 2px; flex-shrink: 0; }
.mh-loc-name { font-weight: 600; color: var(--ink); font-size: 13.5px; margin-bottom: 3px; }
.mh-loc-sub { color: var(--muted); font-size: 12px; }

/* agenda */
.agenda-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.agenda-list li {
  display: grid; grid-template-columns: 70px 1fr;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line-2);
}
.agenda-list li:last-child { border-bottom: 0; }
.ag-time { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--brand); font-size: 13px; }
.ag-title { font-weight: 600; color: var(--ink); font-size: 14px; margin-bottom: 3px; }
.ag-meta { color: var(--muted); font-size: 12.5px; }

/* file list */
.file-list { display: flex; flex-direction: column; gap: 6px; }
.file-row {
  display: grid; grid-template-columns: 38px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-2);
}
.file-row:last-child { border-bottom: 0; }
.file-ico {
  width: 38px; height: 38px; border-radius: 8px;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 10px;
  color: #fff;
}
.file-name { font-weight: 600; color: var(--ink); font-size: 13.5px; margin-bottom: 2px; }
.file-meta { color: var(--muted); font-size: 12px; }

.notes-pad { margin-top: 18px; }
.notes-pad label { display: block; font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 6px; }

/* attendees */
.att-list { display: flex; flex-direction: column; gap: 4px; }
.att-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-2);
}
.att-row:last-child { border-bottom: 0; }
.att-name { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.att-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* rsvp */
.rsvp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rsvp-btn {
  padding: 10px;
  background: var(--card-soft);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.rsvp-btn:hover { border-color: var(--ink); }
.rsvp-btn.active { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }

/* ============================================================
   SALARY
   ============================================================ */
.payslip { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }
.ps-section {
  padding: 16px;
  background: var(--card-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ps-section.danger { background: var(--danger-soft); border-color: rgba(185,28,28,.2); }
.ps-name {
  font-weight: 700; color: var(--ink);
  text-transform: uppercase; font-size: 11px; letter-spacing: .08em;
  margin-bottom: 10px;
}
.ps-row {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  font-size: 13.5px;
}
.ps-row.bonus { color: var(--ok); font-weight: 600; }
.ps-total {
  display: flex; justify-content: space-between;
  padding-top: 10px; margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,.08);
  font-weight: 700; color: var(--ink); font-size: 14px;
}
.ps-net {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 20px;
  background: var(--ink); color: #fff;
  border-radius: 12px;
  font-family: 'Bricolage Grotesque', serif;
  font-size: 17px; font-weight: 700;
}
.ps-net span:last-child { font-size: 26px; }

/* donut */
.donut-row { display: flex; align-items: center; gap: 18px; padding: 4px 4px 8px; }
.donut-legend { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.donut-legend > div { display: flex; align-items: center; gap: 8px; }
.donut-legend .dot { width: 9px; height: 9px; border-radius: 50%; }
.donut-legend .num { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--ink); }

/* tax rows */
.tax-rows { display: flex; flex-direction: column; }
.tx-row {
  display: flex; justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13.5px;
  color: var(--ink-2);
}
.tx-row:last-child { border-bottom: 0; }
.tx-row.hi { color: var(--accent); font-weight: 700; }
.tx-row .num { font-family: 'JetBrains Mono', monospace; font-weight: 600; }

/* bank card */
.bank-card {
  padding: 16px;
  background: linear-gradient(135deg, var(--ink), #1f1f1f);
  color: #fff;
  border-radius: 12px;
}
.bank-name { font-weight: 600; font-size: 13px; opacity: .8; margin-bottom: 12px; }
.bank-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; letter-spacing: .1em;
  font-weight: 600;
  margin-bottom: 10px;
}
.bank-meta { color: rgba(255,255,255,.6); font-size: 11.5px; }

/* ============================================================
   ACHIEVEMENTS
   ============================================================ */
.hero-banner {
  position: relative;
  display: grid; grid-template-columns: 1fr 320px; gap: 24px;
  padding: 32px;
  background: linear-gradient(135deg, var(--ink) 0%, #1f1f1f 100%);
  color: #fff;
  border-radius: var(--r-xl);
  margin-bottom: 32px;
  overflow: hidden;
}
@media (max-width: 900px) { .hero-banner { grid-template-columns: 1fr; } .hb-right { display: none; } }
.hb-eyebrow {
  display: inline-block;
  padding: 5px 12px;
  background: var(--accent);
  border-radius: 99px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 12px;
  width: fit-content;
}
.hb-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 34px; font-weight: 700;
  line-height: 1.15; margin: 0 0 14px;
}
.hb-text { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.6; margin: 0 0 20px; max-width: 540px; }
.hb-row { display: flex; gap: 32px; }
.hb-num { font-family: 'Bricolage Grotesque', serif; font-weight: 700; font-size: 30px; }
.hb-num span { font-size: 18px; color: rgba(255,255,255,.6); }
.hb-lbl { color: rgba(255,255,255,.6); font-size: 12px; margin-top: 2px; }
.hb-right { position: relative; display: flex; align-items: center; justify-content: center; }
.trophy { position: relative; }
.trophy-disc {
  width: 140px; height: 140px;
  background: linear-gradient(135deg, var(--accent), #fbbf24);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 64px;
  box-shadow: 0 20px 50px -10px rgba(255,91,31,.5);
}
.trophy-base {
  width: 100px; height: 14px;
  background: rgba(255,255,255,.1);
  border-radius: 4px;
  margin: 16px auto 0;
}

.card-head.plain {
  padding: 0 0 14px;
  border: 0;
  background: transparent;
  margin-bottom: 8px;
}
.card-head.plain h3 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 22px;
}

.badge-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 1100px) { .badge-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .badge-grid { grid-template-columns: 1fr 1fr; } }
.ach-card {
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.ach-card.locked { background: var(--bg-2); opacity: .8; }
.ach-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: grid; place-items: center;
  margin: 0 auto 12px;
  font-size: 26px;
  color: #fff;
}
.ach-card.locked .ach-icon { background: var(--bg-2); color: var(--muted); border: 1px dashed var(--line); }
.ach-name { font-weight: 700; color: var(--ink); font-size: 14px; margin-bottom: 4px; }
.ach-desc { color: var(--muted); font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
.ach-prog {
  height: 5px; background: var(--bg-2); border-radius: 99px; overflow: hidden;
  margin-bottom: 6px;
}
.ach-prog span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.ach-date { font-size: 10.5px; color: var(--muted-2); font-weight: 600; }

.award-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
@media (max-width: 900px) { .award-grid { grid-template-columns: 1fr; } }
.award-card {
  position: relative;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.award-ribbon {
  position: absolute; top: 16px; right: 16px;
  padding: 4px 10px;
  background: var(--accent);
  color: #fff;
  border-radius: 99px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.award-title {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 700; font-size: 22px; color: var(--ink);
  margin-bottom: 4px; padding-right: 80px;
}
.award-by { color: var(--brand); font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.award-text { color: var(--muted); font-size: 13.5px; line-height: 1.6; font-style: italic; margin: 0 0 14px; }
.award-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--muted);
}

/* ============================================================
   PROFILE
   ============================================================ */
.profile-hero {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  margin-bottom: 20px;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 900px) { .profile-hero { grid-template-columns: 1fr; text-align: center; } .ph-quick { justify-content: center; } }
.ph-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 32px; font-weight: 700;
  color: #fff;
}
.ph-info h2 { font-family: 'Bricolage Grotesque', serif; font-size: 28px; margin: 0 0 4px; }
.ph-tagline { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.ph-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ph-quick { display: flex; gap: 28px; }
.ph-num { font-family: 'Bricolage Grotesque', serif; font-weight: 700; font-size: 26px; color: var(--ink); }
.ph-num span { font-size: 18px; color: var(--muted); }
.ph-lbl { color: var(--muted); font-size: 11.5px; margin-top: 2px; }

.tabs-bar {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  overflow-x: auto;
}
.tab-btn {
  background: transparent; border: 0;
  padding: 12px 16px;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--ink); border-bottom-color: var(--accent); }

.kv-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px;
}
.kv-grid .span-2 { grid-column: span 2; }
.kv-lbl {
  color: var(--muted); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 4px;
}
.kv-val { color: var(--ink); font-size: 14px; }

.kv-list { display: flex; flex-direction: column; }
.kv-line {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13.5px;
}
.kv-line:last-child { border-bottom: 0; }
.kv-line span:first-child { color: var(--muted); }
.kv-line span:last-child { color: var(--ink); font-weight: 500; }

.qa-list { display: flex; flex-direction: column; gap: 2px; }
.qa-row {
  display: grid; grid-template-columns: 20px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 4px;
  text-decoration: none; color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
  font-size: 13.5px; font-weight: 600;
  transition: color .15s;
}
.qa-row:last-child { border-bottom: 0; }
.qa-row:hover { color: var(--brand); }
.qa-row svg { width: 18px; height: 18px; }
.qa-arr { color: var(--muted); }

/* ===== Task-chat drawer + Messages page ===================== */
.tc-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 60;
}
.tc-scrim.show { opacity: 1; visibility: visible; }
.tc-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw;
  background: var(--card); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease; z-index: 61;
  box-shadow: -16px 0 40px rgba(0,0,0,.12);
}
.tc-drawer.open { transform: translateX(0); }
.tc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.tc-title { font-weight: 600; font-size: 15px; }
.tc-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tc-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tc-empty { color: var(--muted); text-align: center; margin: auto 0; font-size: 13px; }
.tc-msg { display: flex; flex-direction: column; max-width: 80%; }
.tc-msg.me { align-self: flex-end; align-items: flex-end; }
.tc-msg.them { align-self: flex-start; align-items: flex-start; }
.tc-bubble {
  padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45;
  background: var(--card-soft); border: 1px solid var(--line); word-break: break-word;
}
.tc-msg.me .tc-bubble { background: var(--accent); color: #fff; border-color: transparent; }
.tc-msg.me .tc-bubble a { color: #fff; text-decoration: underline; }
.tc-edited { font-size: 10px; opacity: .6; margin-left: 6px; }
.tc-time { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.tc-typing { height: 18px; padding: 0 18px; font-size: 12px; color: var(--accent); font-style: italic; }
.tc-form { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); }
.tc-form input {
  flex: 1; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg-2); padding: 0 14px; color: var(--ink); font: inherit; outline: none;
}
.tc-form input:focus { border-color: var(--ink); }
.tc-form .btn { height: 40px; padding: 0 14px; }

/* Messages page (employee chat) */
.chat-layout { display: grid; grid-template-columns: 320px 1fr; gap: 0;
  height: calc(100vh - var(--topbar-h) - 56px); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; background: var(--card); }
.chat-contacts { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.chat-search { padding: 14px; border-bottom: 1px solid var(--line); }
.chat-search input { width: 100%; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg-2); padding: 0 12px; font: inherit; color: var(--ink); outline: none; }
.chat-list { flex: 1; overflow-y: auto; }
.chat-contact { display: flex; gap: 12px; align-items: center; padding: 12px 14px;
  cursor: pointer; border-bottom: 1px solid var(--line); }
.chat-contact:hover { background: var(--card-soft); }
.chat-contact.active { background: var(--card-soft); }
.chat-contact .avatar { width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#1d4ed8,#5b8def); color:#fff; display:grid; place-items:center;
  font-weight:600; font-size:13px; flex:none; overflow:hidden; }
.chat-contact .avatar img { width:100%; height:100%; object-fit:cover; }
.chat-contact .cc-main { flex:1; min-width:0; }
.chat-contact .cc-name { font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-contact .cc-last { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-contact .cc-status-row { font-size:11px; margin-bottom:1px; display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-active-now { color:#22c55e; font-weight:600; font-size:11px; }
.cc-active-time { color:var(--muted); font-size:11px; }
.cc-desig { color:var(--muted); font-size:11px; }
.cc-hod-badge { display:inline-flex; align-items:center; background:var(--accent); color:#fff; font-size:10px; font-weight:700; border-radius:4px; padding:1px 5px; letter-spacing:.3px; vertical-align:middle; margin-left:2px; }
/* Task attachment chip */
.task-att-chip { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--accent); font-weight:600; padding:2px 6px; border:1px solid var(--accent); border-radius:6px; margin-top:4px; cursor:pointer; }
.task-att-chip:hover { background:var(--accent-soft); }
.task-att-chip .ico { width:12px; height:12px; flex-shrink:0; }
/* list-view attachment button */
.l-att-btn { color:var(--accent) !important; border-color:var(--accent) !important; border-radius: 7px;}
.l-att-btn:hover { background:var(--accent-soft) !important; }
.chat-contact .cc-meta { text-align:right; font-size:10.5px; color:var(--muted); }
.chat-contact .cc-unread { display:inline-block; min-width:18px; height:18px; line-height:18px;
  background:var(--accent); color:#fff; border-radius:9px; font-size:11px; text-align:center; padding:0 5px; margin-top:4px; }
.chat-main { display:flex; flex-direction:column; min-width:0; }
.chat-main-head { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.chat-main-head .avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#1d4ed8,#5b8def);
  color:#fff; display:grid; place-items:center; font-weight:600; font-size:13px; }
.chat-thread { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; background:var(--bg-2); }
.chat-placeholder { margin:auto; color:var(--muted); text-align:center; }
.chat-foot { display:flex; gap:8px; padding:14px 16px; border-top:1px solid var(--line); }
.chat-foot input { flex:1; height:42px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); padding:0 14px; font:inherit; color:var(--ink); outline:none; }
.chat-foot input:focus { border-color:var(--ink); }

.app .scrim {display:none;}

@media (max-width: 820px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-contacts.hide-mobile { display:none; }
  .chat-main.hide-mobile { display:none; }
}

/* ============================================================
   Notifications dropdown + richer task chat (added)
   ============================================================ */
.notif-wrap { position: relative; }
.icon-btn .dot { display: block; }
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 360px; max-width: 90vw;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.16); z-index: 70;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease; overflow: hidden;
}
.notif-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px;
}
.notif-readall {
  background: none; border: none; color: var(--accent); font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer;
}
.notif-readall:hover { text-decoration: underline; }
.notif-list { max-height: 420px; overflow-y: auto; }
.notif-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.notif-item {
  display: flex; gap: 12px; padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--line); transition: background .12s ease;
}
.notif-item:hover { background: var(--card-soft); }
.notif-item.unread { background: var(--accent-soft); }
.notif-item.unread:hover { background: var(--accent-soft); filter: brightness(.98); }
.notif-ico {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: var(--ink); background: var(--card-soft);
}
.notif-ico .ico { width: 18px; height: 18px; }
.notif-ico.chat { background: var(--info-soft); color: var(--info); }
.notif-ico.task { background: var(--brand-soft); color: var(--brand); }
.notif-main { min-width: 0; flex: 1; }
.notif-title { font-weight: 600; font-size: 13px; }
.notif-from { color: var(--muted); font-weight: 500; }
.notif-msg { font-size: 12.5px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-time { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* task chat: sender name, quoted reply, reactions, per-message actions */
.tc-sender { font-size: 11px; font-weight: 600; color: var(--muted); margin: 0 0 3px 4px; }
.tc-quote {
  font-size: 12px; opacity: .8; border-left: 3px solid currentColor; padding: 2px 8px;
  margin-bottom: 6px; border-radius: 4px; background: rgba(0,0,0,.06);
}
.tc-msg.me .tc-quote { background: rgba(255,255,255,.18); }
.tc-file { margin-top: 6px; font-size: 12.5px; }
.tc-file .ico, .tc-bubble a .ico { width: 14px; height: 14px; vertical-align: -2px; }
.tc-reacts { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.tc-react-chip {
  font-size: 11.5px; background: var(--card-soft); border: 1px solid var(--line);
  border-radius: 20px; padding: 1px 7px;
}
.tc-meta-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.tc-msg.me .tc-meta-row { flex-direction: row-reverse; }
.tc-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s ease; }
.tc-msg:hover .tc-actions { opacity: 1; }
.tc-act {
  background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px;
  border-radius: 6px; display: grid; place-items: center;
}
.tc-act:hover { background: var(--card-soft); color: var(--ink); }
.tc-act .ico { width: 14px; height: 14px; }
.tc-react-pop {
  position: absolute; z-index: 999; background: var(--card); border: 1px solid var(--line);
  border-radius: 24px; padding: 4px 6px; box-shadow: 0 10px 28px rgba(0,0,0,.18);
  display: flex; gap: 2px;
}
.tc-react-pop button { background: none; border: none; font-size: 18px; cursor: pointer;
  padding: 3px 5px; border-radius: 50%; line-height: 1; }
.tc-react-pop button:hover { background: var(--card-soft); transform: scale(1.15); }
.tc-reply-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  border-top: 1px solid var(--line); background: var(--card-soft);
}
.tc-reply-info { flex: 1; min-width: 0; font-size: 12px; }
.tc-reply-label { color: var(--accent); font-weight: 600; margin-right: 6px; }
.tc-reply-text { color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: inline-block; max-width: 78%; vertical-align: bottom; }

/* generic empty/list helpers reused by the wired modules */
.dyn-empty { padding: 18px; color: var(--muted); font-size: 13px; }
.form-saved { color: var(--ok); font-weight: 600; font-size: 13px; }

/* ============================================================
   Priority (Eisenhower) badges + matrix  — ported from old app
   ============================================================ */
.badge.prio-urgent   { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge.prio-important{ background: var(--warn-soft);   color: var(--warn);   border-color: transparent; }
.badge.prio-impnu    { background: var(--info-soft);   color: var(--info);   border-color: transparent; }
.badge.prio-low      { background: var(--bg-2);        color: var(--muted);  border-color: var(--line); }

/* Eisenhower matrix ------------------------------------------ */
.matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 760px){ .matrix { grid-template-columns: 1fr; } }
.quad {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  border-top: 4px solid var(--line);
  padding: 14px;
  min-height: 160px;
  display: flex; flex-direction: column; gap: 10px;
}
.quad.q-urgent    { border-top-color: var(--danger); }
.quad.q-important { border-top-color: var(--warn); }
.quad.q-impnu     { border-top-color: var(--info); }
.quad.q-low       { border-top-color: var(--muted-2); }
.quad-head { display:flex; align-items:center; justify-content:space-between; }
.quad-head .t { font-weight: 700; font-size: 13.5px; }
.quad-head .ct {
  font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--bg-2); border-radius: 999px; padding: 1px 9px;
}
.quad-sub { font-size: 11.5px; color: var(--muted); margin-top: -4px; }
.quad-cards { display:flex; flex-direction:column; gap: 8px; }

/* compact date / status controls on cards & rows ------------- */
.k-card .k-ctrls { display:flex; gap:6px; margin-top:8px; }
.k-card .k-ctrls .select { flex:1; font-size:12px; }
.k-card .k-ctrls .btn { padding:6px 8px; }
.task-date-pop {
  position: fixed; z-index: 1200; background: var(--card);
  border:1px solid var(--line); border-radius:12px; padding:12px;
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.18)); display:flex; gap:8px; align-items:center;
}

/* Enable-notifications banner -------------------------------- */
.np-banner {
  display:flex; align-items:center; gap:12px;
  background: var(--accent-soft); color: var(--ink);
  border:1px solid transparent; border-radius:12px;
  padding:10px 14px; margin: 0 0 16px;
  font-size:13px; font-weight:600;
}
.np-banner .grow { flex:1; }
.np-banner button { white-space:nowrap; }

/* ============================================================
   Presence dots + HRM panel theming
   ============================================================ */
.presence-dot {
  display:inline-block; width:9px; height:9px; border-radius:50%;
  border:2px solid var(--card); vertical-align:middle;
}
.presence-dot.on  { background:#22c55e; }
.presence-dot.off { background:var(--muted-2); }
.presence-pill { font-size:11px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; }

/* HRM panel — distinct accent so admins know which panel they're in */
[data-panel="hrm"] {
  --accent:      #6d28d9;     /* violet for HRM */
  --accent-soft: #ede9fe;
}
[data-panel="hrm"][data-theme="dark"] { --accent-soft:#221049; }
[data-panel="hrm"] .brand-tag::after { content:' · HRM'; }
.hrm-badge {
  font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  background:var(--accent); color:#fff; border-radius:6px; padding:2px 7px; margin-left:8px;
}

/* ============================================================
   Lightweight modal (used by HRM add/edit dialogs)
   ============================================================ */
.modal-scrim {
  position: fixed; inset: 0; background: rgba(10,10,10,.45);
  display: none; align-items: center; justify-content: center; z-index: 1300; padding: 20px;
}
.modal-scrim.open { display: flex; }
.modal {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  width: 100%; max-width: 560px; max-height: 90vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.modal-head { display:flex; align-items:center; justify-content:space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; }
.modal-body { padding: 20px; }
.modal-foot { display:flex; justify-content:flex-end; gap:10px; padding: 14px 20px; border-top: 1px solid var(--line); }

/* chat avatars (sender image + initials fallback) */
.tc-avatar {
  width:22px; height:22px; border-radius:50%; flex:none;
  background:var(--accent-soft); color:var(--accent);
  font-size:10px; font-weight:700; display:inline-grid; place-items:center;
  overflow:hidden; position:relative; vertical-align:middle;
}
.tc-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tc-sender-row { display:flex; align-items:center; gap:6px; margin:0 0 3px 2px; }
.tc-sender-row .tc-sender { margin:0; }

/* kanban drag-and-drop affordances */
.k-card[draggable] { cursor: grab; }
.k-card.dragging { opacity:.5; }
.k-cards.drop-hover { outline:2px dashed var(--accent); outline-offset:-4px; border-radius:10px; background:var(--accent-soft); }
.k-cards { min-height: 800px; }

/* ============================================================
   Popup kit — toasts + confirm/prompt dialogs (no native alerts)
   ============================================================ */
.toast-wrap { position:fixed; top:18px; right:18px; z-index:4000; display:flex; flex-direction:column; gap:10px; max-width:360px; }
.toast {
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px;
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(0,0,0,.16); font-size:13.5px; font-weight:600;
  transform:translateX(120%); opacity:0; transition:transform .28s ease, opacity .28s ease;
}
.toast.show { transform:none; opacity:1; }
.toast .toast-ico { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; flex:none; }
.toast .toast-ico svg { width:14px; height:14px; }
.toast-info .toast-ico    { background:var(--info-soft); color:var(--info); }
.toast-success .toast-ico { background:var(--ok-soft); color:var(--ok); }
.toast-error .toast-ico   { background:var(--danger-soft); color:var(--danger); }
.toast-error  { border-color:var(--danger); }
.toast-success{ border-color:var(--ok); }

.pop-scrim {
  position:fixed; inset:0; background:rgba(10,10,10,.45); z-index:3900;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .18s ease;
}
.pop-scrim.open { opacity:1; }
.pop {
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  width:100%; max-width:420px; padding:22px; box-shadow:0 24px 60px rgba(0,0,0,.28);
  transform:scale(.96); transition:transform .18s ease;
  max-height: 90vh;
}
.pop-scrim.open .pop { transform:none; }
.pop-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:17px; margin-bottom:8px; }
.pop-msg { font-size:14px; color:var(--muted); line-height:1.5; margin-bottom:14px; }
.pop-input { width:100%; margin-bottom:16px; }
.pop-foot { display:flex; justify-content:flex-end; gap:10px; }
.btn-danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover { filter:brightness(.94); }

/* ============================================================
   Coverage fixes — components that were used in markup but had
   no CSS rule (found via a class-usage audit). Token-based,
   conservative; safe to keep. (Session 7)
   ============================================================ */

/* Trend "up" indicator — mirror of the existing .down (danger) */
.up { color: var(--ok); }
.stat .stat-delta.up { color: var(--ok); }

/* Achievements hero — left column + stat groups */
.hb-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hb-stat { display: flex; flex-direction: column; gap: 2px; }

/* Earned badge gets an accent edge (locked already dims via .ach-card.locked) */
.ach-card.unlocked { border-color: var(--accent); box-shadow: var(--shadow-sm); }

/* Meeting cards — body fills the row beside the time/colour bar */
.meet-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* Meeting detail — agenda body + file/attendee info rows */
.ag-body { padding: 10px 0; color: var(--ink); font-size: 13.5px; line-height: 1.6; }
.file-info, .att-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }

/* Attendance-admin inline editor controls */
.att-code { width: 70px; text-align: center; }
.att-save, .att-del { padding: 4px 10px; font-size: 12px; }
.att-del { color: var(--danger); border-color: var(--danger-soft); }

/* Task-card inline status / date controls — keep them compact */
.k-stage, .l-stage, .gt-stage { font-size: 12px; padding: 4px 8px; }
.k-date, .l-date, .gt-date { padding: 4px 8px; font-size: 12px; }

/* Drag-and-drop file upload feedback for chat surfaces */
.drop-hot { outline: 2px dashed var(--accent); outline-offset: -8px; background: var(--accent-soft) !important; transition: background .12s ease; }
.tcp-chat.drop-hot, .tc-drawer.drop-hot { position: relative; }

/* ============================================================
   WhatsApp-style chat (v2) — shared by Messages + Task chat
   ============================================================ */
:root {
  --wa-bg:        #eee8df;            /* thread backdrop */
  --wa-me:        #d7f5c8;            /* my bubble */
  --wa-me-ink:    #102a12;
  --wa-them:      #ffffff;
  --wa-tick:      #8c9a92;
  --wa-tick-seen: #34a7f4;            /* blue double tick */
}
[data-theme="dark"] {
  --wa-bg:        #0e1512;
  --wa-me:        #1f5130;
  --wa-me-ink:    #eaf6ec;
  --wa-them:      #1d2522;
  --wa-tick:      #93a8a0;
  --wa-tick-seen: #53bdeb;
}

/* thread surface — subtle WhatsApp-ish dotted texture */
.wa-thread {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 22px 14px;
  display: flex; flex-direction: column; gap: 4px;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.045) 1px, transparent 0) 0 0/18px 18px,
    var(--wa-bg);
}
[data-theme="dark"] .wa-thread {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0) 0 0/18px 18px,
    var(--wa-bg);
}
.wa-empty { margin: auto; color: var(--muted); font-size: 13.5px; background: var(--card);
  border: 1px solid var(--line); padding: 10px 18px; border-radius: 999px; }

/* day separators + unread divider */
.wa-day { display: flex; justify-content: center; margin: 12px 0 8px; }
.wa-day span { background: var(--card); color: var(--muted); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.wa-unread-sep span { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }

/* message rows + bubbles (with tails) */
.wa-msg { display: flex; max-width: min(72%, 560px); margin: 1px 0; }
.wa-msg.me   { align-self: flex-end; flex-direction: column; align-items: flex-end; }
.wa-msg.them { align-self: flex-start; flex-direction: column; align-items: flex-start; }
.wa-bubble {
  position: relative; padding: 7px 10px 8px; border-radius: 10px;
  background: var(--wa-them); color: var(--ink);
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
  font-size: 14px; line-height: 1.45; word-break: break-word; min-width: 86px;
}
.wa-msg.me .wa-bubble { background: var(--wa-me); color: var(--wa-me-ink); }
.wa-msg.me .wa-bubble::after, .wa-msg.them .wa-bubble::before {
  content: ''; position: absolute; top: 0; width: 0; height: 0;
  border-style: solid;
}
.wa-msg.them .wa-bubble::before { left: -7px; border-width: 0 8px 10px 0; border-color: transparent var(--wa-them) transparent transparent; }
.wa-msg.me .wa-bubble::after   { right: -7px; border-width: 0 0 10px 8px; border-color: transparent transparent transparent var(--wa-me); }
.wa-msg + .wa-msg.me .wa-bubble::after, .wa-msg + .wa-msg.them .wa-bubble::before { display: none; }
.wa-msg.failed .wa-bubble { outline: 1.5px solid var(--danger); opacity: .8; }
.wa-text a { color: var(--brand); }
.wa-msg.me .wa-text a { color: inherit; text-decoration: underline; }
.wa-text { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }

/* HTML formatting in messages */
.wa-text b, .wa-text strong { font-weight: 600; }
.wa-text i, .wa-text em { font-style: italic; }
.wa-text u { text-decoration: underline; }
.wa-text code { 
  background: rgba(0,0,0,.08); 
  padding: 2px 5px; 
  border-radius: 4px; 
  font-family: 'JetBrains Mono', monospace; 
  font-size: 0.9em;
}
.wa-msg.me .wa-text code { background: rgba(0,0,0,.12); }
.wa-text p { margin: 5px 0; }
.wa-text ul, .wa-text ol { margin: 5px 0 5px 20px; }
.wa-text li { margin: 2px 0; }
.wa-text blockquote {
  border-left: 3px solid var(--accent);
  margin: 5px 0;
  padding-left: 10px;
  opacity: 0.8;
}
.wa-text h1, .wa-text h2, .wa-text h3, .wa-text h4, .wa-text h5, .wa-text h6 {
  font-weight: 600;
  margin: 8px 0 5px 0;
  line-height: 1.3;
}
.wa-text h1 { font-size: 1.4em; }
.wa-text h2 { font-size: 1.3em; }
.wa-text h3 { font-size: 1.2em; }
.wa-text h4 { font-size: 1.1em; }
.wa-text h5 { font-size: 1em; }
.wa-text h6 { font-size: 0.95em; }

/* sender (group/task chats) */
.wa-sender { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  color: var(--accent); margin-bottom: 2px; }
.wa-sender-img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }

/* quoted reply inside a bubble */
.wa-quote { border-left: 3px solid var(--accent); background: rgba(0,0,0,.05);
  border-radius: 6px; padding: 5px 8px; font-size: 12.5px; color: var(--muted);
  margin: 0 0 5px; }
.wa-msg.me .wa-quote { background: rgba(0,0,0,.07); color: inherit; opacity: .85; }

/* time + ticks, WhatsApp style: bottom-right inside the bubble */
.wa-meta { float: right; margin: 8px -2px -4px 10px; font-size: 10.5px; color: var(--muted-2);
  display: inline-flex; align-items: center; gap: 3px; user-select: none; white-space: nowrap; }
.wa-msg.me .wa-meta { color: rgba(16,42,18,.55); }
[data-theme="dark"] .wa-msg.me .wa-meta { color: rgba(234,246,236,.6); }
.wa-tick { display: inline-flex; color: var(--wa-tick); }
.wa-tick.seen { color: var(--wa-tick-seen); }
.wa-tick.pending { font-size: 10px; }

/* reactions chips under a bubble */
.wa-reacts { display: flex; gap: 4px; margin-top: 2px; }
.wa-reacts .tc-react-chip { background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 7px; font-size: 12px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }

/* hover actions (react/reply/edit/delete) */
.wa-bubble .tc-actions { position: absolute; top: -12px; right: 6px; display: none; gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 5px;
  box-shadow: var(--shadow-1, 0 2px 8px rgba(0,0,0,.08)); opacity: 1;}
.wa-msg.them .wa-bubble .tc-actions { right: auto; left: 6px; }
.wa-bubble:hover .tc-actions { display: inline-flex; }
.tc-act { border: 0; background: transparent; cursor: pointer; font-size: 12.5px; line-height: 1;
  padding: 3px 4px; border-radius: 6px; color: var(--muted); }
.tc-act:hover { background: var(--bg-2); color: var(--ink); }

/* attachments inside bubbles */
.att { margin: 2px 0 4px; }
.att-img, .att-video { position: relative; cursor: zoom-in; border-radius: 8px; overflow: hidden;
  max-width: 320px; }
.att-img img, .att-video video { display: block; width: 100%; max-height: 300px; object-fit: cover;
  border-radius: 8px; }
.att-video .att-play { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 34px; color: #fff; background: rgba(0,0,0,.25); }
.att-audio audio { width: 240px; max-width: 100%; height: 36px; }
.att-file { display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: rgba(0,0,0,.05); border-radius: 8px; padding: 9px 11px; max-width: 300px; }
.wa-msg.them .att-file { background: var(--bg-2); }
.att-file-ic { font-size: 20px; }
.att-file-name { flex: 1; font-size: 12.5px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.att-file-open { font-size: 11.5px; font-weight: 700; color: var(--brand); }

/* typing indicator (animated dots) */
.wa-typing-row { display: flex; align-items: center; gap: 8px; padding: 4px 22px 8px;
  background: var(--wa-bg); }
.wa-typing-bubble { background: var(--wa-them); border-radius: 14px; padding: 9px 12px;
  display: inline-flex; gap: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-typing-bubble span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2);
  animation: waDot 1.2s infinite ease-in-out; }
.wa-typing-bubble span:nth-child(2) { animation-delay: .15s; }
.wa-typing-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes waDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; }
                   30% { transform: translateY(-4px); opacity: 1; } }
.wa-typing-label { font-size: 11.5px; color: var(--muted); }

/* composer */
.wa-composer { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--card); border-top: 1px solid var(--line); }
.wa-composer .wa-attach { cursor: pointer; }
.wa-input { flex: 1; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
  border-radius: 999px; padding: 11px 18px; font: inherit; font-size: 14px; outline: none; min-width: 0; }
.wa-input:focus { border-color: var(--accent); background: var(--card); }
.wa-send { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; display: grid; place-items: center; flex-shrink: 0;
  transition: transform .12s ease, background .12s ease; }
.wa-send:hover { background: var(--brand); transform: scale(1.05); }
.wa-send svg { width: 18px; height: 18px; margin-left: -2px; }

/* Rich contenteditable composers (task chat + DM): grow with pasted/typed
   content, cap height then scroll, show a placeholder, keep formatting tidy. */
.wa-composer:has(.wa-input[contenteditable]) { align-items: flex-end; }
.wa-input[contenteditable] { display: block; white-space: pre-wrap; overflow-wrap: anywhere;
  border-radius: 20px; line-height: 1.45; min-height: 22px; max-height: 160px; overflow-y: auto;
  text-align: left; }
.wa-input[contenteditable]:empty::before { content: attr(data-ph); color: var(--muted); pointer-events: none; }
.wa-input[contenteditable] p { margin: 0; }
.wa-input[contenteditable] ul, .wa-input[contenteditable] ol { margin: 4px 0; padding-left: 20px; }
.wa-input[contenteditable] blockquote { margin: 4px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }
.wa-input[contenteditable] code { font-family: var(--mono, monospace); font-size: .92em; }

/* ============================================================
   Full-screen task chat view (replaces the old side drawer)
   ============================================================ */
.tcv { position: fixed; inset: 0; z-index: 240; display: flex; flex-direction: column;
  background: var(--wa-bg); opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease; }
.tcv.open { opacity: 1; pointer-events: auto; transform: none; }
html.tcv-open { overflow: hidden; }
.tcv-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tcv-peer { flex: 1; min-width: 160px; }
.tcv-title { font-weight: 700; font-size: 15px; line-height: 1.25; max-width: 70vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcv-sub { font-size: 12px; color: var(--muted); }
.tcv-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tcv .wa-thread { padding-left: max(22px, calc(50vw - 480px));
  padding-right: max(22px, calc(50vw - 480px)); }
.tcv .wa-composer, .tcv .tc-reply-bar, .tcv .wa-typing-row {
  padding-left: max(14px, calc(50vw - 480px)); padding-right: max(14px, calc(50vw - 480px)); }
@media (max-width: 700px) { .tcv-actions .hide-sm { display: none; } }

/* ============================================================
   Messages page — full-height WhatsApp layout
   ============================================================ */
.msgs-page { display: flex; flex-direction: column;
  height: calc(100vh - var(--topbar-h, 64px) - 24px); min-height: 480px; }
.msgs-page .chat-layout { flex: 1; min-height: 0; display: grid;
  grid-template-columns: 340px 1fr; gap: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
  overflow: hidden; }
.msgs-page .chat-contacts { border-right: 1px solid var(--line); display: flex;
  flex-direction: column; min-height: 0; }
.msgs-page .chat-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-main-head { display: flex; align-items: center; gap: 11px; padding: 10px 16px;
  border-bottom: 1px solid var(--line); background: var(--card); }
.chat-main-head .avatar { width: 38px; height: 38px; }
.chat-peer-name { font-weight: 700; font-size: 14.5px; }
.chat-peer-state { font-size: 11.5px; color: var(--accent); min-height: 14px; }
.chat-peer-sub { font-size: 11px; color: var(--muted); }
.cc-last .wa-tick { margin-right: 3px; vertical-align: -1px; }
.cc-time { font-size: 10.5px; color: var(--muted-2); }
@media (max-width: 860px) {
  .msgs-page .chat-layout { grid-template-columns: 1fr; }
  .msgs-page .chat-main { display: none; }
  .msgs-page .chat-layout.show-chat .chat-contacts { display: none; }
  .msgs-page .chat-layout.show-chat .chat-main { display: flex; }
}

/* lightbox — in-panel file viewer */
.blsm-lightbox { position: fixed; inset: 0; z-index: 320; background: rgba(8,8,8,.86);
  display: flex; flex-direction: column; opacity: 0; transition: opacity .16s ease; }
.blsm-lightbox.open { opacity: 1; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 23px 16px; color: #fff; }
.lb-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.lb-actions { display: flex; gap: 6px; }
.lb-actions .icon-btn { color: #fff; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.lb-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 10px 18px 22px; }
.lb-media { max-width: 94vw; max-height: 84vh; border-radius: 10px; box-shadow: 0 18px 60px rgba(0,0,0,.5); }
.lb-frame { width: min(960px, 94vw); height: 84vh; border: 0; border-radius: 10px; background: #fff; }
.lb-audio, .lb-filecard { background: var(--card); color: var(--ink); border-radius: 14px;
  padding: 26px 30px; width: min(440px, 92vw); text-align: center; }
.lb-audio-ic, .lb-file-ic { font-size: 40px; margin-bottom: 8px; }
.lb-audio-name, .lb-file-name { font-weight: 700; margin-bottom: 10px; word-break: break-all; }
.lb-file-sub { color: var(--muted); font-size: 12.5px; }

/* drag-and-drop affordance */
.drop-zone { transition: outline-color .12s ease; outline: 2px dashed transparent; outline-offset: 3px;
  border-radius: 10px; }
.drop-hot, .drop-zone.drop-hot { outline-color: var(--accent) !important;
  background-color: var(--accent-soft) !important; }
.tcv.drop-hot::after, #chatPane.drop-hot::after {
  content: 'Drop files to send 📎'; position: absolute; inset: 12px; z-index: 5;
  display: grid; place-items: center; pointer-events: none;
  border: 2.5px dashed var(--accent); border-radius: 16px;
  background: color-mix(in srgb, var(--accent-soft) 82%, transparent);
  font-weight: 800; font-size: 16px; color: var(--accent); }
.tcv { position: fixed; }
#chatPane { position: relative; }

/* dashboard — welcome + task overview (ported from old panel) */
.dash-welcome {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 22px;
}
.dash-welcome .avatar { width: 56px; height: 56px; font-size: 18px; flex-shrink: 0; }
.dash-welcome h2 {
  font-family: 'Bricolage Grotesque', serif; font-size: 22px; font-weight: 700;
  margin: 0; letter-spacing: -0.02em;
}
.dash-welcome .dash-date { font-size: 13px; color: var(--muted); margin-top: 4px; }
.dash-section-title {
  font-family: 'Bricolage Grotesque', serif; font-size: 17px; font-weight: 700;
  margin: 0 0 12px; letter-spacing: -0.02em;
}
.dash-section { margin-bottom: 26px; }
.dash-section + .dash-section { padding-top: 22px; border-top: 1px solid var(--line); }
.stats.stats-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .stats.stats-3 { grid-template-columns: 1fr; } }
.stat.stat-link { cursor: pointer; }
.stat.stat-link:active { transform: translateY(0); }
.today-work-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-height: 52vh; overflow: auto;
}
@media (max-width: 760px) { .today-work-cols { grid-template-columns: 1fr; } }
.today-work-col h4 {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 10px; padding: 4px 10px; border-radius: 999px; display: inline-block;
}
.today-work-col.urgent h4 { background: #fee2e2; color: #991b1b; }
.today-work-col.important h4 { background: #dbeafe; color: #1d4ed8; }
.today-work-col.common h4 { background: #fce7f3; color: #9d174d; }
.today-work-item {
  display: block; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-md, 10px); margin-bottom: 8px; text-decoration: none;
  color: inherit; transition: border-color .15s, box-shadow .15s;
}
.today-work-item:hover { border-color: var(--accent); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06)); }
.today-work-item .t { font-weight: 700; font-size: 13px; line-height: 1.35; }
.today-work-item .m { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* celebrations card (dashboard wishes) */
.celebrate-card { background: linear-gradient(120deg, #fff7ed, #ffe9f2 55%, #f0e9ff);
  border: 1px solid #ffd9c2; border-radius: var(--r-lg, 16px); padding: 16px 18px; }
[data-theme="dark"] .celebrate-card { background: linear-gradient(120deg, #2a2017, #2a1a22 55%, #221a2e);
  border-color: #4a3526; }
.celebrate-row { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.celebrate-row + .celebrate-row { border-top: 1px dashed var(--line); }
.celebrate-ic { font-size: 22px; }
.celebrate-name { font-weight: 700; font-size: 14px; }
.celebrate-sub { font-size: 12px; color: var(--muted); }

/* ====================================================
   @mention popup (WhatsApp-style — task chat & composer)
   ==================================================== */
.wa-mention-pop {
  position: fixed;
  z-index: 2000;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  overflow: hidden;
  min-width: 220px;
  max-width: 320px;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
}
.wa-mention-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s;
}
.wa-mention-item:hover,
.wa-mention-item.active {
  background: var(--accent-soft, rgba(99,102,241,.08));
}
.wa-mention-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.wa-mention-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
/* Rendered highlight inside a sent message bubble */
.wa-mention {
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-soft, rgba(99,102,241,.1));
  border-radius: 4px;
  padding: 0 3px;
  cursor: default;
}

/* ====================================================
   Status toggle pill  (0 = Open · 1 = WIP · 2 = Done)
   One-click cycle through the 3 states — shown as a
   compact coloured pill in the task list tables.
   ==================================================== */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  padding: 4px 12px 4px 9px;
  font: 600 12px/1 var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: filter .12s, transform .08s;
  user-select: none;
}
.status-pill:hover  { filter: brightness(.93); }
.status-pill:active { transform: scale(.96); }
.status-pill .sp-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* State-specific colours */
.status-pill[data-status="0"] {
  background: var(--info-soft, #e0f0ff);
  color: var(--info, #0d82f0);
}
.status-pill[data-status="0"] .sp-dot { background: var(--info, #0d82f0); }

.status-pill[data-status="1"] {
  background: var(--warn-soft, #fff4e0);
  color: var(--warn, #e08c00);
}
.status-pill[data-status="1"] .sp-dot { background: var(--warn, #e08c00); }

.status-pill[data-status="2"] {
  background: var(--ok-soft, #e3f9ee);
  color: var(--ok, #0cac5c);
}
.status-pill[data-status="2"] .sp-dot { background: var(--ok, #0cac5c); }

/* ============================================================
   ROOPA AGENCIES PVT LTD — Brand Rebrand + Glassmorphism
   Applied as high-specificity overrides so all existing pages
   inherit the new identity without touching HTML.
   Palette:
     Navy   #0D2B6E  (primary, sidebar, headings)
     Teal   #00C4B4  (accent, CTAs, highlights)
     Glass  rgba(255,255,255,.12) backdrop-blur(18px)
   ============================================================ */

/* ---- Brand token overrides --------------------------------- */
:root {
  --brand:         #0D2B6E;
  --brand-ink:     #ffffff;
  --brand-soft:    #e8eef9;
  --brand-hover:   #0a2259;

  --accent:        #00C4B4;
  --accent-soft:   #e0faf8;
  --accent-hover:  #00aa9c;

  /* Glass tokens */
  --glass:         rgba(255,255,255,.14);
  --glass-2:       rgba(255,255,255,.22);
  --glass-border:  rgba(255,255,255,.26);
  --glass-shadow:  0 8px 32px rgba(13,43,110,.18), 0 1.5px 0 rgba(255,255,255,.22) inset;
  --glass-blur:    blur(18px) saturate(160%);

  /* Page background — deep gradient so glass pops */
  --bg:            #edf2fb;
  --bg-2:          #e2e9f6;
  --card:          rgba(255,255,255,.80);
  --card-soft:     rgba(255,255,255,.55);

  /* Sidebar now uses Navy */
  --sidebar:            #0D2B6E;
  --sidebar-text:       rgba(255,255,255,.62);
  --sidebar-hover:      rgba(255,255,255,.10);
  --sidebar-active-bg:  rgba(255,255,255,.16);
  --sidebar-active-ink: #ffffff;

  --line:   rgba(13,43,110,.13);
  --line-2: rgba(13,43,110,.08);

  --info:      #0369a1;
  --info-soft: #e0f2fe;

  /* Status pill soft colours */
  --ok:        #0c8c58;
  --ok-soft:   #d8f5ea;
  --warn:      #b45309;
  --warn-soft: #fef3c7;
}

/* ---- Global page background mesh -------------------------- */
body {
  background: linear-gradient(140deg, #dce8fb 0%, #c8daf8 28%, #d0f0ed 60%, #e8f6fb 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ---- Sidebar — Navy glass --------------------------------- */
.sidebar {
  background: linear-gradient(180deg, #0D2B6E 0%, #0a2259 60%, #061540 100%);
  border-right: 1px solid rgba(255,255,255,.08);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }

.sidebar-brand {
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 20px 18px 16px;
}

/* Logo area — show Roopa logo mark */
.brand-mark {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #00C4B4 0%, #00e6d6 100%);
  border-radius: 10px;
  box-shadow: 0 4px 16px -2px rgba(0,196,180,.50), 0 0 0 1px rgba(255,255,255,.20) inset;
}
.brand-name {
  color: #ffffff;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.brand-tag {
  color: #00C4B4;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  opacity: .9;
}

.nav-label { color: rgba(0,196,180,.7); font-size: 10px; letter-spacing: 0.16em; }

.nav-item { border-radius: 10px; }
.nav-item:hover {
  background: rgba(255,255,255,.10);
  color: #ffffff;
}
.nav-item.active {
  background: rgba(255,255,255,.16);
  color: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
}
.nav-item.active::before { background: #00C4B4; left: -18px; width: 4px; border-radius: 0 3px 3px 0; }
.nav-item .nav-badge { background: #00C4B4; color: #0D2B6E; font-weight: 800; }

.sub-menu .nav-item.active { background: transparent; }
.sub-menu .nav-item.active::after { background: #00C4B4; }

.user-mini {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
}
.user-mini .avatar {
  background: linear-gradient(135deg, #00C4B4 0%, #0D2B6E 100%);
}
.user-mini .nm { color: #fff; }
.user-mini .rl { color: rgba(0,196,180,.85); }

.sidebar-foot { border-top: 1px solid rgba(255,255,255,.08); }

/* ---- Topbar — glass ---------------------------------------- */
.topbar {
  background: rgba(255,255,255,.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255,255,255,.40);
  box-shadow: 0 1px 0 rgba(13,43,110,.06), 0 4px 24px rgba(13,43,110,.06);
}
[data-theme="dark"] .topbar {
  background: rgba(13,43,110,.65);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.topbar-search input {
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(13,43,110,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.topbar-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,196,180,.15);
}

.icon-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.icon-btn:hover { background: rgba(255,255,255,.85); }
.icon-btn .dot { background: var(--accent); }

.profile-pill {
  background: transparent;
  border: 1px solid rgba(255,255,255,.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.profile-pill:hover { background: rgba(255,255,255,.85); }
.profile-pill .avatar {
  background: linear-gradient(135deg, #0D2B6E 0%, #00C4B4 100%);
}

/* ---- Page head — glass sticky ----------------------------- */
.page-head {
  background: rgba(237,242,251,.80);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 4px 24px rgba(13,43,110,.07);
}

/* ---- Cards — glass surface -------------------------------- */
.card,
.chart-card,
.table-wrap,
.bal-card,
.trip-card,
.meet-hero,
.loan-summary {
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.70);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.card:hover { transform: translateY(-1px); }

/* ---- Stat cards ------------------------------------------- */
.stat {
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.66);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(13,43,110,.16), 0 1.5px 0 rgba(255,255,255,.28) inset;
}
.stat.accent {
  background: linear-gradient(135deg, #0D2B6E 0%, #163794 60%, #1e47bb 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 32px rgba(13,43,110,.35), 0 1.5px 0 rgba(255,255,255,.18) inset;
}
.stat.accent .stat-label { color: rgba(255,255,255,.65); }
.stat.accent .stat-value { color: #fff; }
.stat.accent .stat-delta { color: #00C4B4; }

/* ---- Buttons ---------------------------------------------- */
.btn {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(13,43,110,.10), 0 1px 0 rgba(255,255,255,.35) inset;
  transition: all .15s ease;
}
.btn:hover {
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 12px rgba(13,43,110,.14), 0 1px 0 rgba(255,255,255,.50) inset;
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, #0D2B6E 0%, #163794 100%);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  box-shadow: 0 4px 14px rgba(13,43,110,.30), 0 1px 0 rgba(255,255,255,.20) inset;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0a2259 0%, #0D2B6E 100%);
  box-shadow: 0 8px 20px rgba(13,43,110,.38), 0 1px 0 rgba(255,255,255,.20) inset;
  transform: translateY(-1px);
}

.btn-accent {
  background: linear-gradient(135deg, #00C4B4 0%, #00dace 100%);
  border: 1px solid rgba(255,255,255,.30);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,196,180,.35), 0 1px 0 rgba(255,255,255,.30) inset;
}
.btn-accent:hover {
  background: linear-gradient(135deg, #00aa9c 0%, #00C4B4 100%);
  box-shadow: 0 8px 22px rgba(0,196,180,.45);
  transform: translateY(-1px);
}

/* ---- Tabs ------------------------------------------------- */
.tabs {
  background: rgba(255,255,255,.40);
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
}
.tabs button.active {
  background: rgba(255,255,255,.85);
  color: var(--brand);
  box-shadow: 0 2px 8px rgba(13,43,110,.12);
}
.tabs button.active .count {
  background: var(--brand);
  color: #fff;
}
.tabs button:hover { color: var(--brand); }

/* ---- Table ------------------------------------------------ */
.table-wrap {
  border-radius: 18px;
  overflow: hidden;
}
.table thead th {
  background: rgba(13,43,110,.04);
  color: var(--brand);
  border-bottom: 1px solid rgba(13,43,110,.10);
}
.table tbody tr:hover { background: rgba(0,196,180,.05); }

/* ---- Form inputs ------------------------------------------ */
.input, .select, .textarea {
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(13,43,110,.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,196,180,.15);
}

/* ---- Kanban columns --------------------------------------- */
.kanban { gap: 14px; }
.k-col {
  background: rgba(255,255,255,.30);
  border: 1px solid rgba(255,255,255,.52);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(13,43,110,.08), 0 1px 0 rgba(255,255,255,.40) inset;
}
.k-col[data-status="prog"] .t::before  { background: var(--accent); }
.k-col[data-status="done"] .t::before  { background: var(--ok); }

/* Kanban cards */
.k-card {
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(13,43,110,.08), 0 1px 0 rgba(255,255,255,.60) inset;
  transition: transform .18s ease, box-shadow .18s ease;
}
.k-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(13,43,110,.14), 0 1px 0 rgba(255,255,255,.70) inset;
}
.k-card.dragging {
  opacity: .7;
  transform: rotate(2deg) scale(1.02);
  box-shadow: 0 20px 48px rgba(13,43,110,.22);
}
.k-cards.drop-hover {
  background: rgba(0,196,180,.07);
  border-radius: 10px;
  outline: 2px dashed rgba(0,196,180,.45);
  outline-offset: 4px;
}

/* ---- Matrix quads ----------------------------------------- */
.matrix { gap: 14px; }
.quad {
  background: transparent;
  border: 1px solid rgba(255,255,255,.70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--glass-shadow);
  border-top-width: 3px;
}
.quad.q-urgent    { border-top-color: var(--danger); }
.quad.q-important { border-top-color: var(--warn); }
.quad.q-impnu     { border-top-color: var(--accent); }
.quad.q-low       { border-top-color: rgba(13,43,110,.25); }

/* ---- Popup / dialog --------------------------------------- */
.pop-scrim {
  background: rgba(13,43,110,.35);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
}
.pop {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.80);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 24px 60px rgba(13,43,110,.22), 0 2px 0 rgba(255,255,255,.50) inset;
  border-radius: 20px;
}
.pop-title { color: var(--brand); font-weight: 700; }
.pop .btn-primary { background: linear-gradient(135deg, #0D2B6E, #163794); }

/* ---- Chat panel ------------------------------------------- */
.chat-main-head {
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.50);
}
.chat-main-head .avatar {
  background: linear-gradient(135deg, #0D2B6E 0%, #00C4B4 100%);
}
.chat-thread {
  background: linear-gradient(160deg, #e4edf9 0%, #d6eef0 100%);
}
.chat-contacts {
  background: rgba(255,255,255,.50);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.chat-contact.active {
  background: rgba(13,43,110,.07);
}
.chat-contact:hover {
  background: rgba(0,196,180,.06);
}
.chat-contact .cc-unread {
  background: var(--accent);
  color: #0D2B6E;
  font-weight: 800;
}
.chat-foot {
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.50);
}
.chat-foot input {
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(13,43,110,.14);
}
.chat-foot input:focus { border-color: var(--accent); }

/* msg bubbles */
.msg-bubble {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(13,43,110,.07);
}
.msg-bubble.mine {
  background: linear-gradient(135deg, #0D2B6E 0%, #163794 100%);
  border-color: rgba(255,255,255,.15);
  color: #fff;
}
.msg-bubble .msg-time { color: rgba(255,255,255,.6); }

/* ---- Task chat viewer (side panel) ------------------------ */
.tcv {
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-left: 1px solid rgba(255,255,255,.55);
  box-shadow: -12px 0 40px rgba(13,43,110,.10);
}

/* ---- @mention popup --------------------------------------- */
.wa-mention-pop {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 16px 40px rgba(13,43,110,.18);
  border-radius: 16px;
}
.wa-mention-item:hover,
.wa-mention-item.active {
  background: rgba(0,196,180,.10);
}
.wa-mention-avatar { background: linear-gradient(135deg, #0D2B6E, #00C4B4); }
.wa-mention { color: var(--accent); background: rgba(0,196,180,.12); }

/* ---- Notification & activity dots ------------------------- */
.notif-ico.chat     { background: rgba(0,196,180,.15); color: var(--accent); }
.notif-ico.ok       { background: var(--ok-soft); color: var(--ok); }
.notif-ico.warn     { background: var(--warn-soft); color: var(--warn); }
.notif-ico.brand    { background: var(--brand-soft); color: var(--brand); }
.activity-item .avatar {
  background: linear-gradient(135deg, #0D2B6E, #00C4B4);
}

/* ---- Badges: prio ---------------------------------------- */
.badge.prio-urgent    { background: rgba(185,28,28,.10); color: #b91c1c; border: 1px solid rgba(185,28,28,.18); }
.badge.prio-important { background: rgba(180,83,9,.10);  color: #b45309; border: 1px solid rgba(180,83,9,.18); }
.badge.prio-impnu     { background: rgba(0,196,180,.12); color: #007a70; border: 1px solid rgba(0,196,180,.25); }
.badge.brand          { background: var(--brand-soft); color: var(--brand); }

/* ---- Status pills ----------------------------------------- */
.status-pill {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.status-pill[data-status="0"] { background: rgba(3,105,161,.10); color: #0369a1; border: 1px solid rgba(3,105,161,.18); }
.status-pill[data-status="1"] { background: rgba(180,83,9,.10);  color: #b45309; border: 1px solid rgba(180,83,9,.18); }
.status-pill[data-status="2"] { background: rgba(12,140,88,.10); color: #0c8c58; border: 1px solid rgba(12,140,88,.18); }

/* ---- Filter bar (my-tasks / given-tasks) ------------------ */
.mt-filterbar,
.gt-filterbar {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(13,43,110,.07);
}

/* ms-pop (multi-select dropdown) */
.ms-pop {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 12px 32px rgba(13,43,110,.16);
  border-radius: 14px;
}
.ms-btn {
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ms-btn:hover { border-color: var(--accent); background: rgba(255,255,255,.85); }
.ms-badge { background: var(--accent); color: #0D2B6E; }

/* ---- Leaderboard ------------------------------------------ */
.lb-row {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lb-row.top { background: rgba(255,255,255,.80); }
.lb-row.me { border-color: var(--accent); background: rgba(0,196,180,.08); }
.lb-bar span { background: linear-gradient(90deg, var(--brand), var(--accent)); }

/* ---- Leave balance cards ---------------------------------- */
.bal-card {
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---- Calendar day strip ----------------------------------- */
.cal-day {
  background: transparent;
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(13,43,110,.05);
}
.cal-day:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,196,180,.18); }
.cal-day.today {
  background: linear-gradient(135deg, #0D2B6E 0%, #163794 100%);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 6px 20px rgba(13,43,110,.30);
}
.cal-day.today .st { color: #00C4B4; }

/* ---- Chip / report cards ---------------------------------- */
.chip-card {
  background: rgba(255,255,255,.55);
  border: 1.5px solid rgba(255,255,255,.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.chip-card:hover { border-color: var(--accent); background: rgba(255,255,255,.80); }
.chip-card.selected { border-color: var(--accent); background: rgba(0,196,180,.08); }

/* ---- Meeting rows ----------------------------------------- */
.meet-row { background: rgba(255,255,255,.55); }
.meet-row:hover { background: rgba(255,255,255,.80); }
.meet-row.now { background: rgba(0,196,180,.10); border-left: 3px solid var(--accent); }

/* ---- Avatar colours (teal/navy palette) ------------------- */
.av-1 { background: linear-gradient(135deg, #0D2B6E, #1e47bb); }
.av-2 { background: linear-gradient(135deg, #00C4B4, #00dace); }
.av-3 { background: linear-gradient(135deg, #0c8c58, #14d48a); }
.av-4 { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.av-5 { background: linear-gradient(135deg, #0D2B6E, #00C4B4); }
.av-6 { background: linear-gradient(135deg, #b45309, #fbbf24); }
.av-7 { background: linear-gradient(135deg, #163794, #00C4B4); }

/* ---- Login page ------------------------------------------- */
.login-art {
  background: linear-gradient(160deg, #0D2B6E 0%, #0f3585 45%, #0a4f6e 100%);
}
.login-art::before {
  background: radial-gradient(circle at center, rgba(0,196,180,.40) 0%, transparent 65%);
  top: -60px; right: -100px;
}
.login-art::after {
  background: radial-gradient(circle at center, rgba(13,43,110,.50) 0%, transparent 65%);
  bottom: -60px; left: -60px;
}
.login-art h1 .em { color: #00C4B4; }
.login-form-wrap {
  background: linear-gradient(140deg, #dce8fb 0%, #d0f0ed 100%);
}
.login-form {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 24px 60px rgba(13,43,110,.14);
}

/* ---- Progress bars ---------------------------------------- */
.progress > i         { background: var(--brand); }
.progress.accent > i  { background: var(--accent); }
.progress.brand > i   { background: var(--brand); }
.milestone-progress span { background: linear-gradient(90deg, var(--brand), var(--accent)); }

/* ---- Dark theme adjustments ------------------------------ */
[data-theme="dark"] {
  --bg:            #080f22;
  --bg-2:          #0d1630;
  --card:          rgba(13,43,110,.40);
  --card-soft:     rgba(13,43,110,.25);
  --glass:         rgba(13,43,110,.35);
  --glass-border:  rgba(255,255,255,.10);
  --glass-shadow:  0 8px 32px rgba(0,0,0,.40), 0 1px 0 rgba(255,255,255,.08) inset;
  --line:          rgba(255,255,255,.08);
  --line-2:        rgba(255,255,255,.05);
  --brand-soft:    rgba(13,43,110,.40);
  --accent-soft:   rgba(0,196,180,.12);
  --sidebar:       #040a18;
  --sidebar-active-bg: rgba(0,196,180,.15);
}
[data-theme="dark"] body {
  background: linear-gradient(140deg, #060e24 0%, #0a1830 50%, #071e22 100%);
  background-attachment: fixed;
}
[data-theme="dark"] .card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .k-card {
  background: rgba(13,43,110,.30);
  border: 1px solid rgba(255,255,255,.08);
}
[data-theme="dark"] .k-col {
  background: rgba(6,15,42,.50);
  border: 1px solid rgba(255,255,255,.06);
}
[data-theme="dark"] .stat {
  background: rgba(13,43,110,.30);
  border: 1px solid rgba(255,255,255,.08);
}
[data-theme="dark"] .topbar-search input { background: rgba(13,43,110,.30); }
[data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea {
  background: rgba(13,43,110,.25);
  border-color: rgba(255,255,255,.10);
}
[data-theme="dark"] .pop {
  background: rgba(8,15,34,.88);
  border: 1px solid rgba(255,255,255,.12);
}

/* ---- Miscellaneous polish -------------------------------- */
/* Smooth scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(13,43,110,.22); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,196,180,.45); }

/* Focus ring → teal */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Selection colour */
::selection { background: rgba(0,196,180,.22); color: var(--brand); }

/* link colour */
.link { color: var(--accent); }

/* check/radio accent */
.checkbox input, .radio input, .check-line input { accent-color: var(--accent); }

/* Agenda time in teal */
.ag-time { color: var(--accent); }

/* Mini-cal today */
.mc-row.today { background: rgba(0,196,180,.10); }

/* Page load animation — gentle slide-up */
@keyframes pop-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   STICKY TABLE HEADER + FULL MOBILE RESPONSIVENESS
   ============================================================ */

/* ---- Sticky table header ----------------------------------- */
/*
  The table-wrap must scroll, not the page, for position:sticky
  on thead to work. We cap height, enable overflow-y scroll, and
  make the thead sticky inside that scroll container.
  The filter bar + page-head are already sticky on the page level
  (top:0 / top: topbar-h), so the table header sticks just below
  them at the correct offset.
*/
.table-wrap {
  overflow-x: auto;          /* horizontal scroll on narrow screens */
  overflow-y: auto;          /* vertical scroll within the card */
  max-height: calc(100vh - 280px); /* leaves room for page-head + filters */
  padding: 0;                /* remove padding so thead edge-to-edge */
  position: relative;
}
/* table-wrap inside a card that already has padding gets a tighter cap */
.card .table-wrap { max-height: calc(100vh - 320px); }

.table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  /* Glass-frosted sticky header so scrolled rows show through */
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1.5px solid rgba(13,43,110,.12);
  /* Drop shadow so rows don't bleed visually into header */
  box-shadow: 0 2px 8px rgba(13,43,110,.07);
  /* Consistent padding whether or not table-wrap has its own */
  padding: 12px 20px;
  white-space: nowrap;
}
/* First / last cols rounded corners when header is sticky */
.table thead th:first-child { border-radius: 14px 0 0 0; }
.table thead th:last-child  { border-radius: 0 14px 0 0; }

/* Keep rows scrollable under the sticky head */
.table tbody td { padding: 13px 20px; }

/* DataTables wraps the table — make the inner wrapper scrollable too */
.dataTables_wrapper,
.dataTables_scrollBody {
  overflow-x: auto !important;
  overflow-y: auto !important;
}
.dataTables_scrollHead thead th {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 8px rgba(13,43,110,.07);
}

/* ---- Mobile: hide less-critical table columns -------------- */
/* col priority: 1=always, 2=tablet+, 3=desktop only */
.col-mobile-hide  { }   /* always shown — override below */
@media (max-width: 900px) {
  /* Given Tasks: hide Rating and the stage-select; show status pill */
  .table th.col-dt-only,
  .table td.col-dt-only { display: none; }
}
@media (max-width: 640px) {
  .table th.col-tablet-hide,
  .table td.col-tablet-hide { display: none; }
}

/* ================================================================
   FULL RESPONSIVE OVERHAUL
   Breakpoints:
     ≤ 1100px   tablet landscape
     ≤  900px   tablet portrait / mobile landscape
     ≤  640px   mobile portrait  ← main target
     ≤  400px   small phones
   ================================================================ */

/* ---- Page head -------------------------------------------- */
@media (max-width: 900px) {
  .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 14px 20px 12px;
  }
  .page-head h1 { font-size: 22px; }
  .page-head .lede { font-size: 13px; margin-top: 3px; }
  .page-head-actions {
    width: 100%;
    gap: 8px;
    flex-wrap: wrap;
  }
  .page-head-actions .btn,
  .page-head-actions a.btn { height: 34px; font-size: 12.5px; padding: 0 12px; }
  /* View tabs wrap below page title on mobile */
  #viewTabs { order: -1; width: 100%; justify-content: stretch; }
  #viewTabs button { flex: 1; text-align: center; }
  .field{
    min-width: 30% !important;
  }
}
@media (max-width: 640px) {
  .page { padding: 14px 14px 56px; }  /* bottom pad for floating action area */
  .page-head { margin-left: -14px; margin-right: -14px; padding: 12px 14px 10px; }
  .page-head h1 { font-size: 20px; }
  .crumbs { font-size: 11px; }
  /* Stack buttons that don't fit */
  .page-head-actions .btn span.hide-sm { display: none !important; }
  .field{
    min-width: 100% !important;
  }
}

/* ---- Filter bar ------------------------------------------- */
@media (max-width: 900px) {
  .mt-filterbar,
  .gt-filterbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }
  .mt-filterbar #mySearch,
  .gt-filterbar #gtSearch { min-width: 0; width: 100%; }
  .mt-filterbar .ms,
  .gt-filterbar .ms { width: 100%; }
  .ms-btn { width: 100%; justify-content: space-between; }
  /* Tab filter pills stack */
  #gtTabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  #gtTabs button { text-align: center; }
  .mt-filterbar label,
  .gt-filterbar label { font-size: 12px; }
  #myClear, #gtClear { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  #gtTabs { grid-template-columns: 1fr 1fr; gap: 4px; }
  .mt-filtercount, .gt-filtercount { text-align: center; }
}

/* ---- Stats grid ------------------------------------------- */
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 14px 14px 12px; }
  .stat .stat-value { font-size: 28px; margin-top: 10px; }
  .stat .stat-delta { font-size: 11.5px; }
}
@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
}

/* ---- Kanban board ----------------------------------------- */
@media (max-width: 1100px) {
  .kanban { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* Horizontal scroll kanban on mobile — all 4 cols side by side */
  .kanban {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;   /* hide scrollbar; user swipes */
  }
  .kanban::-webkit-scrollbar { display: none; }
  .k-col {
    min-width: 80vw;
    max-width: 80vw;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  /* Scroll hint — faint right fade */
  .kanban::after {
    content: '';
    flex-shrink: 0;
    width: 1px; /* spacer so last card isn't flush to edge */
  }
}

/* Kanban card controls on mobile */
@media (max-width: 640px) {
  .k-card { padding: 10px 12px; }
  .k-card .ttl { font-size: 13px; }
  .k-ctrls { flex-wrap: wrap; }
  .k-ctrls .select { font-size: 11.5px; }
}

/* ---- Matrix quads ----------------------------------------- */
@media (max-width: 900px) {
  .matrix { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .matrix { grid-template-columns: 1fr; }
}

/* ---- Table — mobile cards view ---------------------------- */
/*
  On mobile, instead of a wide table that scrolls, each <tr> renders
  as a card. We use data-label attributes for a label-value layout.
  This avoids horizontal scroll on narrow phones completely.
*/
@media (max-width: 640px) {
  /* Make table-wrap scroll freely (no max-height clamp on small screens) */
  .table-wrap { max-height: none; overflow-y: visible; }

  .table, .table thead, .table tbody, .table th, .table td, .table tr {
    display: block;
    width: 100%;
  }
  /* Hide the header row visually but keep for accessibility */
  .table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .table tbody tr {
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.70);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 25px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(13,43,110,.07);
    position: relative;
  }
  .table tbody tr:last-child { border-bottom: 1px solid rgba(255,255,255,.70); }
  .table tbody tr:hover { background: rgba(255,255,255,.90); }

  /* Each cell becomes a row: label on left, value on right */
  .table tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border: none;
    font-size: 13px;
    border-bottom: 1px solid rgba(13,43,110,.06);
  }
  .table tbody td:last-child { border-bottom: none; padding-bottom: 0; }
  .table tbody td:first-child { padding-top: 0; }

  /* Use data-label for the field name */
  .table tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    white-space: nowrap;
    min-width: 80px;
    flex-shrink: 0;
    padding-top: 2px;
  }
  /* Cells with no label (actions col) — full width */
  .table tbody td[data-label=""] {
    justify-content: flex-end;
    padding-top: 10px;
  }
  .table tbody td[data-label=""]::before { display: none; }

  /* Don't overflow action buttons */
  .table td[data-label=""] > * { flex-shrink: 0; }
  .table .actions { flex-wrap: wrap; gap: 6px; }
}

/* ---- My Tasks / Given Tasks list tbody — inject data-labels via JS */
/* (JS injects data-label from thead — see app.js patch below) */

/* ---- Topbar on mobile ------------------------------------- */
@media (max-width: 640px) {
  .topbar { height: 54px; padding: 0 12px; gap: 10px; }
  .topbar-search { display: none; } /* already hidden at 900 */
  .icon-btn { width: 34px; height: 34px; }
  .profile-pill .nm, .profile-pill .rl { display: none; }
  .profile-pill { padding: 4px 8px 4px 4px; }
  .toast-wrap { right: 10px; top: 10px; max-width: calc(100vw - 20px); }
}

/* ---- Sidebar on mobile (already slides in) ---------------- */
@media (max-width: 640px) {
  .sidebar { width: 260px; }
  .brand-name { font-size: 14px; }
  .brand-tag { font-size: 9px; }
}

/* ---- Cards / chart cards on mobile ------------------------ */
@media (max-width: 640px) {
  .card { padding: 14px; border-radius: 14px; }
  .chart-card { padding: 14px; border-radius: 14px; }
  .card-head h3 { font-size: 17px; }
  .chart-wrap { height: 200px; }
}

/* ---- Grid helpers on mobile ------------------------------- */
@media (max-width: 900px) {
  .grid-2, .grid-2-eq, .grid-2-3 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; }
  .form-row.cols-2, .form-row.cols-3 { grid-template-columns: 1fr; }
  .balance-grid { grid-template-columns: 1fr 1fr; }
  .trip-grid { grid-template-columns: 1fr; }
  .chip-grid { grid-template-columns: 1fr 1fr; }
  .rating-row { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .r-btn { padding: 10px 4px; font-size: 22px; }
}

/* ---- Popup / dialog on mobile ----------------------------- */
@media (max-width: 640px) {
  .pop {
    width: calc(100vw - 28px) !important;
    max-width: 100%;
    border-radius: 18px;
    padding: 22px 18px;
  }
  .pop-scrim { align-items: flex-end; padding: 0; }
  /* Sheet style — slides up from bottom on mobile */
  .pop {
    border-radius: 20px 20px 0 0 !important;
    width: 100% !important;
    margin: 0;
  }
}

/* ---- Task chat viewer on mobile --------------------------- */
@media (max-width: 640px) {
  .tcv {
    width: 100vw !important;
    max-width: 100vw;
    border-left: none;
    border-top-left-radius: 0;
  }
}

/* ---- Notification dropdown on mobile ---------------------- */
@media (max-width: 640px) {
  .notif-drop {
    right: -60px;
    width: calc(100vw - 16px);
    max-width: 100%;
  }
}

/* ---- Leaderboard on mobile -------------------------------- */
@media (max-width: 640px) {
  .lb-row { grid-template-columns: 32px 36px 1fr 70px; gap: 10px; }
  .lb-bar { display: none; }
  .lb-name { font-size: 13px; }
  .lb-points { font-size: 13px; }
}

/* ---- Activity feed on mobile ------------------------------ */
@media (max-width: 640px) {
  .activity-item .avatar,
  .activity-item .dot { width: 30px; height: 30px; flex-shrink: 0; }
  .activity-item .title { font-size: 12.5px; }
}

/* ---- Meet rows on mobile ---------------------------------- */
@media (max-width: 640px) {
  .meet-row { grid-template-columns: 60px 4px 1fr; gap: 10px; }
  .meet-row > :last-child { display: none; } /* hide action btn */
  .meet-title { font-size: 13px; }
}

/* ---- Profile hero on mobile ------------------------------- */
@media (max-width: 640px) {
  .profile-hero { grid-template-columns: 1fr; text-align: center; }
  .ph-quick { justify-content: center; }
  .avatar-lg { width: 72px; height: 72px; font-size: 28px; }
}

/* ---- Pagination on mobile --------------------------------- */
@media (max-width: 640px) {
  .pagination { padding: 10px 14px; gap: 8px; font-size: 12px; }
  .pagination .pages button { width: 28px; height: 28px; font-size: 12px; }
}

/* ---- Hero banner on mobile -------------------------------- */
@media (max-width: 640px) {
  .hero-banner { grid-template-columns: 1fr; padding: 20px; }
  .hb-right { display: none; }
  .hb-title { font-size: 22px; }
}

/* ---- Cal strip on mobile ---------------------------------- */
@media (max-width: 640px) {
  .cal-strip {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cal-strip::-webkit-scrollbar { display: none; }
  .cal-day {
    flex-shrink: 0;
    min-width: 56px;
    scroll-snap-align: start;
    padding: 10px 8px;
  }
  .cal-day .n { font-size: 18px; }
}

/* ---- Balance grid on mobile ------------------------------- */
@media (max-width: 400px) {
  .balance-grid { grid-template-columns: 1fr; }
  .bal-used { font-size: 30px; }
}

/* ---- Loan summary on mobile ------------------------------- */
@media (max-width: 640px) {
  .loan-summary { grid-template-columns: 1fr 1fr; }
}

/* ---- "Add" floating action button on mobile --------------- */
/* Keeps the New Task / Assign New button always reachable     */
@media (max-width: 640px) {
  .page-head-actions a.btn-primary[href*="add-task"],
  .page-head-actions a.btn-primary[href*="task"] {
    top: 0px;
    position: fixed;
    bottom: 20px;
    right: 16px;
    z-index: 50;
    height: 48px;
    border-radius: 24px;
    padding: 0 20px;
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(13,43,110,.35);
  }
}

/* ---- Utility: hide-sm text spans -------------------------- */
@media (max-width: 640px) {
  .hide-sm { display: none !important; }
  .show-sm { display: inline-flex !important; }
}
.show-sm { display: none; }

/* ================================================================
   AUTO DATA-LABEL INJECTION (CSS fallback)
   JS in app.js will add data-label attrs dynamically.
   This rule ensures any missed cells still look tidy.
   ================================================================ */
@media (max-width: 640px) {
  /* Task ID column — always first, just show # */
  .table tbody td:nth-child(1)::before { content: "#"; }
}

/* ============================================================
   STICKY LAYER SYSTEM  (definitive fix)
   Stack order (top → bottom while scrolling):
     z:100  .topbar          top: 0
     z: 90  .page-head       top: var(--topbar-h)          = 64px
     z: 80  filter bar       top: var(--sticky-fb)         = topbar + page-head
     z: 70  .table thead th  top: var(--sticky-th)         = topbar + page-head + filter
     z: 70  .k-col-head      top: var(--sticky-th)         same level as thead
   All heights are measured by JS (see app.js → updateStickyOffsets)
   and written to :root as CSS custom properties.
   ============================================================ */

/* -- Reset the previous conflicting sticky rules ------------ */
.topbar   { position: sticky; top: 0;                      z-index: 100; }
.page-head {
  position: sticky;
  top: var(--topbar-h, 64px);   /* sit flush under the topbar */
  z-index: 59;
  /* full-bleed flush to page edges */
  margin-left:  -32px;
  margin-right: -32px;
  padding-left:  32px;
  padding-right: 32px;
}

/* -- Filter bar: sticky below page-head --------------------- */
.mt-filterbar,
.gt-filterbar {
  position: sticky;
  top: var(--sticky-fb, 130px);  /* topbar-h + page-head-h, set by JS */
  z-index: 80;
  /* give it a margin so it breathes after the page-head border */
  margin-bottom: 12px;
  /* clip the popover menus so they don't interfere with scroll */
  overflow: visible;
}

/* -- Table thead: sticky below filter bar ------------------- */
/*
  The table-wrap must NOT be a scroll container (overflow-y: auto)
  for thead sticky to respect the outer sticky layers.
  We undo the scroll-container approach from the previous patch.
*/
.table-wrap {
  overflow-x: auto;   /* horizontal scroll ok */
  overflow-y: visible; /* let the PAGE scroll, not this box */
  max-height: none;   /* remove the clamp that forced inner scroll */
  padding: 0;
}
.card .table-wrap { max-height: none; overflow-y: visible; }

.table thead th {
  position: sticky;
  top: var(--sticky-th, 200px);  /* topbar + page-head + filter-bar */
  z-index: 70;
  /* glass frosted background so rows scroll under cleanly */
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1.5px solid rgba(13,43,110,.12);
  box-shadow: 0 3px 10px rgba(13,43,110,.08);
  padding: 12px 20px;
  white-space: nowrap;
}
/* Rounded corners on sticky thead */
.table thead th:first-child { border-radius: 14px 0 0 0; }
.table thead th:last-child  { border-radius: 0 14px 0 0; }

/* -- Kanban column heads: sticky at the same level as thead -- */
.k-col {
  overflow: visible; /* required for sticky child to work */
  position: relative;
}
.k-col-head {
  position: sticky;
  top: var(--sticky-th, 200px);  /* same as thead */
  z-index: 70;
  /* glass pill that shows the column name clearly */
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-radius: 12px;
  padding: 10px 12px;
  margin: -14px -14px 10px;   /* bleed to col edges then add gap */
  border-bottom: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 2px 8px rgba(13,43,110,.08), 0 1px 0 rgba(255,255,255,.55) inset;
}

/* Mobile: on horizontal-scroll kanban the col-head is inside a
   fixed-width column — sticky still works fine because the scroll
   axis is X, not Y. Keep it. */
@media (max-width: 640px) {
  .k-col-head {
    position: sticky;  /* stays at top while scrolling page vertically */
    top: var(--sticky-th, 160px);
  }
}

/* -- Page-head responsive top adjustments ------------------- */
@media (max-width: 900px) {
  .page-head {
    margin-left:  -20px;
    margin-right: -20px;
    padding-left:  20px;
    padding-right: 20px;
  }
}
@media (max-width: 640px) {
  .page-head {
    margin-left:  -14px;
    margin-right: -14px;
    padding-left:  14px;
    padding-right: 14px;
    /* topbar is 54px on mobile */
    top: var(--topbar-h, 54px);
  }
}

/* -- Dark theme glass for sticky thead ---------------------- */
[data-theme="dark"] .table thead th {
  background: rgba(8,15,34,.88);
  border-bottom: 1.5px solid rgba(255,255,255,.08);
  box-shadow: 0 3px 10px rgba(0,0,0,.30);
}
[data-theme="dark"] .k-col-head {
  background: rgba(13,43,110,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ============================================================
   STICKY HEADER — DEFINITIVE FIX (v3)

   ROOT CAUSE: `position:sticky` on `thead th` never works when
   ANY ancestor element has `overflow` other than `visible`.
   `.table-wrap { overflow-x:auto }` is required for horizontal
   scroll on narrow screens — which means native sticky thead
   is impossible. Previous patches left a broken `top:200px`
   that made the header appear mid-table.

   SOLUTION: JS fixed-position clone (applyDTFixedHeader in
   enhance.js) takes over for DataTables tables on desktop/tablet.
   Native sticky is CANCELLED on thead. Kanban col-heads use
   native sticky and are unaffected (no overflow ancestor).
   ============================================================ */

/* -- 1. CANCEL the broken position:sticky on thead th -------- */
.table thead th,
table.dataTable thead th {
  position: static !important;   /* cancel all previous sticky attempts */
  top: auto !important;
  z-index: auto !important;
  box-shadow: none;
  /* Keep the glass appearance for when the fixed clone copies styles */
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1.5px solid rgba(13,43,110,.12);
  padding: 12px 20px;
  white-space: nowrap;
  color: var(--brand, #0D2B6E);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
/* First/last col rounding only on real (non-clone) thead */
.table thead th:first-child { border-radius: 10px 0 0 0; }
.table thead th:last-child  { border-radius: 0 10px 0 0; }

/* -- 2. Fixed-header clone container style ------------------- */
.dt-fixed-header {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-bottom: 1.5px solid rgba(13,43,110,.12) !important;
  box-shadow: 0 4px 18px rgba(13,43,110,.12) !important;
  border-radius: 0 0 12px 12px !important;
}
/* Cells inside the fixed clone */
.dt-fixed-header table.dataTable thead th,
.dt-fixed-header .table thead th,
.dt-fixed-header th {
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
  padding: 12px 20px !important;
  color: var(--brand, #0D2B6E) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
}
/* Sort indicators inside clone */
.dt-fixed-header .sorting:after { content:' ↕'; opacity:.35; font-size:10px; }
.dt-fixed-header .sorting_asc:after { content:' ↑'; opacity:.7; font-size:10px; }
.dt-fixed-header .sorting_desc:after { content:' ↓'; opacity:.7; font-size:10px; }

[data-theme="dark"] .dt-fixed-header {
  background: rgba(8,15,34,.92) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.35) !important;
}
[data-theme="dark"] .dt-fixed-header th {
  color: rgba(255,255,255,.85) !important;
}

/* -- 3. table-wrap: only horizontal scroll (no max-height) --- */
.table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-height: none !important;
  padding: 15px !important;
}
.card .table-wrap { max-height: none !important; }

/* -- 4. Kanban col-heads: native sticky works fine (no overflow ancestor) -- */
.k-col { overflow: visible; position: relative; }
.k-col-head {
  position: sticky;
  top: var(--sticky-th, 200px);
  z-index: 20;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-radius: 12px;
  padding: 10px 14px;
  margin: -14px -14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.60);
  box-shadow: 0 2px 8px rgba(13,43,110,.08), 0 1px 0 rgba(255,255,255,.55) inset;
}
[data-theme="dark"] .k-col-head {
  background: rgba(13,43,110,.55);
  border-bottom-color: rgba(255,255,255,.08);
}

/* -- 5. Page-head, filter-bar: correct sticky stack ---------- */
.topbar   { position: sticky; top: 0;                    z-index: 100; }
.page-head {
  position: sticky;
  top: var(--topbar-h, 64px);
  z-index: 59;
  background: var(--bg, #edf2fb);
  background: transparent;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,.60);
  box-shadow: 0 2px 12px rgba(13,43,110,.07);
  margin-left: -32px; margin-right: -32px;
  padding-left: 32px; padding-right: 32px;
  padding-top: 16px; padding-bottom: 14px;
  margin-bottom: 16px;
}
.mt-filterbar,
.gt-filterbar {
  position: sticky;
  top: var(--sticky-fb, 140px);
  z-index: 80;
  margin-bottom: 14px;
}

/* ============================================================
   MOBILE — disable all sticky layers except topbar on ≤900px
   The topbar slides away naturally; filter and col-heads
   take up too much vertical space on small screens.
   ============================================================ */
  @media (max-width: 900px) {
  .pop{
    top: 0% !important;
    width:90% !important;
    min-width:65% !important;
    position: absolute !important;
    /* max-height:80vh !important; */
    border-radius: 20px !important;
    overflow-y:auto !important;
    top: revert-rule !important;
  }
  /* Fixed header clone hidden on mobile/tablet portrait */
  .dt-fixed-header { display: none !important; }

  /* Page head: sticky but adjusted margin for narrower padding */
  .page-head {
    margin-left: -20px; margin-right: -20px;
    padding-left: 20px; padding-right: 20px;
  }

  /* Filter bar: NOT sticky on mobile — just static flow */
  .mt-filterbar,
  .gt-filterbar {
    position: static !important;
    top: auto !important;
  }

  /* Kanban col-heads: NOT sticky — board scrolls freely */
  .k-col-head {
    position: static !important;
    top: auto !important;
    margin: -14px -14px 10px; /* keep the bleed margin for visual consistency */
  }
}

@media (max-width: 640px) {
  /* Even page-head: static on very small phones to maximise content area */
  .page-head {
    position: static !important;
    top: auto !important;
    margin-left: -14px; margin-right: -14px;
    padding-left: 14px; padding-right: 14px;
    box-shadow: none;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
  }

  /* table-wrap: no overflow-x clamp — let cards handle layout */
  .table-wrap {
    overflow-x: visible !important;
    border-radius: 0;
  }
}

/* ============================================================
   TCV PRESENCE BAR — online status of task participants
   ============================================================ */
   .tcv-presence {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 5px;
  }
  .tcv-pres-avatar {
    position: relative;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #fff;
    cursor: default;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.50);
    transition: transform .15s;
  }
  .tcv-pres-avatar:hover { transform: scale(1.15); }
  .tcv-pres-on  { background: linear-gradient(135deg, #0D2B6E, #00C4B4); }
  .tcv-pres-off { background: rgba(13,43,110,.25); filter: grayscale(1); opacity: .55; }
  
  /* Animated green pulse ring for online users */
  .tcv-pulse {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #22c55e;
    border: 1.5px solid #fff;
    z-index: 1;
  }
  .tcv-pulse::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #22c55e;
    animation: tcv-ping 1.8s ease-out infinite;
    opacity: 0;
  }
  @keyframes tcv-ping {
    0%   { transform: scale(1); opacity: .7; }
    80%  { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
  }
  
  /* Tooltip label next to presence bar */
  .tcv-presence::before {
    content: '';
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    align-self: center;
  }
/* ---------- Employee card / grid view ----------
   The old panel had a list view AND a grid view for every employee segment
   (roopa-list / roopa-grid, blossom-list / blossom-grid, …). This is the grid. */
.emp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}
.emp-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.emp-card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }

.emp-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.emp-card-photo {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line);
}
.emp-card-id { min-width: 0; }
.emp-card-id .row-strong,
.emp-card-id .row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.emp-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.emp-card-meta > div { display: flex; flex-direction: column; min-width: 0; }
.emp-card-meta .k {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.emp-card-meta .v { font-size: 13px; font-weight: 600; color: var(--ink); }

.emp-card-foot {
  display: flex; align-items: center; gap: 6px;
  padding-top: 12px; border-top: 1px solid var(--line);
}

/* ---------- Blossom.chart (inline SVG charts) ---------- */
.chart-empty { padding: 26px 4px; text-align: center; font-size: 13px; }

.chart-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.chart-c1 { font: 800 22px 'Manrope', sans-serif; fill: var(--ink); }
.chart-c2 { font: 500 10px 'Manrope', sans-serif; fill: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.chart-legend { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 130px; }
.chart-leg { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.chart-leg i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.chart-leg span { flex: 1; color: var(--muted); }
.chart-leg b { font-family: 'JetBrains Mono', monospace; color: var(--ink); }

.chart-bars { display: flex; flex-direction: column; gap: 9px; }
.chart-bar-row { display: flex; align-items: center; gap: 10px; }
.chart-bar-lbl {
  width: 108px; flex: 0 0 108px; font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-bar-track { flex: 1; height: 8px; border-radius: 5px; background: var(--bg-2); overflow: hidden; }
.chart-bar-track i { display: block; height: 100%; background: var(--brand); border-radius: 5px; }
.chart-bar-val { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; width: 30px; text-align: right; }

.chart-cols { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding-top: 6px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; gap: 4px; }
.chart-col-v { font-size: 10.5px; font-family: 'JetBrains Mono', monospace; color: var(--muted); }
.chart-col-bar {
  width: 100%; max-width: 46px; background: var(--brand); border-radius: 6px 6px 0 0;
  margin-top: auto; transition: opacity .15s ease;
}
.chart-col-bar:hover { opacity: .8; }
.chart-col-l { font-size: 11px; color: var(--muted); }

.chart-line { width: 100%; height: 170px; }
.chart-ax { font: 500 10px 'Manrope', sans-serif; fill: var(--muted); }
.chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.k-card.expired {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
}
.k-card.expired .meta .due { color: #dc2626; font-weight: 700; }

/* Expired task rows in list view */
tr.expired-row {
  background: rgba(239, 68, 68, 0.06) !important;
}
tr.expired-row td {
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #b91c1c;
}
tr.expired-row td.mono.num {
  color: #dc2626 !important;
  font-weight: 600;
}