/* 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; }

/* ============================================================
   Roopa 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) !important; border-color: var(--line)!important; }
.btn-danger:hover { background: var(--danger-soft)!important; border-color: var(--danger)!important; }
.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;
}
/* 2026-08-18: was 900px while the rule further down this file uses 980px. The
   later one wins today, so this was dead — but only by source order, which is
   a fragile thing for "is there a logo on screen" to depend on. Same value now. */
@media (max-width: 980px) { .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; }
/* ── Chat type scale (2026-08-18) ────────────────────────────────────────────
   Asked for as "make the chat font bigger", with the real requirement being
   that the bigger font must not break the layout.

   Every chat size now comes from these four variables instead of being typed
   into a dozen rules, so the whole scale moves together and stays in
   proportion. To make chat larger or smaller again, change --tc-fs and nothing
   else: the sender name, timestamp, quote, file line and reaction chips are all
   derived from it.

   The body text goes 13.5px -> 15.5px, which is the readable jump that was
   asked for. Everything that shares a row with it grows by less, so the
   supporting text stays clearly secondary and the bubble does not turn into a
   wall of same-sized text. Line height comes down slightly (1.45 -> 1.42)
   because taller lines at a bigger size add up fast over a long thread. */
:root {
  --tc-fs: 15.5px;                              /* message text */
  --tc-fs-sm: calc(var(--tc-fs) - 2.5px);       /* quote, file line, sender */
  --tc-fs-xs: calc(var(--tc-fs) - 3.5px);       /* timestamps, edited marker */
  --tc-lh: 1.42;
}
.tc-bubble {
  padding: 10px 14px; border-radius: 14px;
  font-size: var(--tc-fs); line-height: var(--tc-lh);
  background: var(--card-soft); border: 1px solid var(--line);
  /* break-word alone still lets a long unbroken URL push the bubble past its
     max-width; anywhere is what actually holds the column. */
  word-break: break-word; overflow-wrap: anywhere;
}
.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: var(--tc-fs-xs); opacity: .6; margin-left: 6px; }
.tc-time { font-size: var(--tc-fs-xs); color: var(--muted); margin-top: 4px; }
.tc-typing { height: 20px; padding: 0 18px; font-size: var(--tc-fs-sm); 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; }

/* ── Making the bigger chat text safe (2026-08-18) ───────────────────────────
   The size change above is the easy half. This is the half that stops it
   breaking things. */

/* A bubble is capped at 80% of the thread. At 15.5px that is still fine on a
   phone but on a wide desktop it produced very long lines, which are harder to
   read than the small text was. Cap the measure as well as the percentage. */
.tc-msg { max-width: min(80%, 46ch); }
@media (max-width: 560px) { .tc-msg { max-width: 88%; } }

/* The message box inherits the page font, which is under 16px — and any input
   under 16px makes iOS Safari zoom the whole page when it is focused, which on
   a chat screen happens on every single message. 16px exactly: large enough to
   stop the zoom, and it now matches the message text beside it. */
.tc-form input { font-size: 16px; }

/* Timestamps and the sender name sit on one line with the message actions.
   With everything a couple of pixels larger that row started wrapping on
   narrow screens and pushed the action buttons under the bubble. */
.tc-meta-row { flex-wrap: wrap; row-gap: 2px; }

/* Long words and pasted links inside a quote have the same problem as the
   bubble itself. */
.tc-quote, .tc-reply-text { overflow-wrap: anywhere; }

/* On a small phone the whole scale steps back down slightly: 15.5px in a
   320px-wide bubble leaves too few characters per line. One variable, so
   everything moves together and nothing can fall out of proportion. */
@media (max-width: 380px) { :root { --tc-fs: 14.5px; } }

/* Someone reading a long thread on a big screen can have it larger still,
   without any of the above having to change. */
@media (min-width: 1400px) { :root { --tc-fs: 16px; } }

/* 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: var(--tc-fs-sm); font-weight: 600; color: var(--muted); margin: 0 0 4px 4px; }
.tc-quote {
  font-size: var(--tc-fs-sm); opacity: .8; border-left: 3px solid currentColor; padding: 3px 9px;
  margin-bottom: 6px; border-radius: 4px; background: rgba(0,0,0,.06);
  /* a quoted long message used to stretch the bubble; it is clamped instead */
  max-height: 3.4em; overflow: hidden; text-overflow: ellipsis;
}
.tc-msg.me .tc-quote { background: rgba(255,255,255,.18); }
.tc-file { margin-top: 6px; font-size: var(--tc-fs-sm); }
.tc-file .ico, .tc-bubble a .ico { width: 15px; height: 15px; vertical-align: -2px; }
.tc-reacts { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.tc-react-chip {
  font-size: var(--tc-fs-sm); background: var(--card-soft); border: 1px solid var(--line);
  border-radius: 20px; padding: 2px 8px;
}
.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)!important; color:#fff!important; border-color:var(--danger)!important; }
.btn-danger:hover { filter:brightness(.94)!important; }

/* ============================================================
   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; }
/* 2026-08-22 — search inside a conversation. */
.tc-find { display:flex; align-items:center; gap:6px; padding:8px 12px;
           border-bottom:1px solid var(--line); background:var(--card); }
.tc-find .tc-find-ic { opacity:.5; display:flex; }
.tc-find input { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
           color:var(--ink); font:inherit; font-size:14px; padding:4px 2px; }
.tc-find .tc-find-count { font-size:12px; color:var(--muted); white-space:nowrap;
           font-variant-numeric:tabular-nums; }
.tc-find .tc-find-count.none { color:#b42318; }
.wa-msg.tc-hit .wa-bubble { box-shadow:0 0 0 2px rgba(255,193,7,.55); }
.wa-msg.tc-hit-on .wa-bubble { box-shadow:0 0 0 3px #ffc107; }
/* 2026-08-22 — every document in one conversation, in one place. */
/* In the flow, not over it: the conversation header stays visible so there is
   always a way back. */
.tc-docs { flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
           background:var(--card); }
.tc-docs-head { display:flex; align-items:center; gap:10px; padding:10px 12px;
           border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tc-docs-head strong { font-size:14px; }
.tc-docs-filters { display:flex; gap:4px; margin-left:auto; }
.tc-docs-filters button { appearance:none; border:1px solid var(--line); background:transparent;
           color:var(--muted); border-radius:20px; padding:4px 11px; font:inherit; font-size:12px;
           font-weight:600; cursor:pointer; }
.tc-docs-filters button.active { background:var(--accent,#52b7f9); border-color:var(--accent,#52b7f9); color:#fff; }
.tc-docs-body { flex:1 1 auto; overflow-y:auto; padding:6px 0 18px; }
.tc-docs-day { position:sticky; top:0; background:var(--card); padding:8px 14px 5px;
           font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
           color:var(--muted); }
.tc-docs-row { display:flex; align-items:center; gap:11px; padding:9px 14px; cursor:pointer; }
.tc-docs-row:hover { background:rgba(0,0,0,.04); }
.tc-docs-th { flex:0 0 auto; width:42px; height:42px; border-radius:9px; overflow:hidden;
           background:rgba(0,0,0,.07); display:flex; align-items:center; justify-content:center; }
.tc-docs-th img { width:100%; height:100%; object-fit:cover; }
.tc-docs-ic { font-size:19px; }
.tc-docs-meta { flex:1 1 auto; min-width:0; }
.tc-docs-meta strong { display:block; font-size:13px; font-weight:600; white-space:nowrap;
           overflow:hidden; text-overflow:ellipsis; }
.tc-docs-meta span { display:block; font-size:11.5px; color:var(--muted); }
.tc-docs-go, .tc-docs-dl { flex:0 0 auto; border:0; background:transparent; color:var(--muted);
           font-size:15px; cursor:pointer; text-decoration:none; padding:4px 6px; border-radius:7px; }
.tc-docs-go:hover, .tc-docs-dl:hover { color:var(--ink); background:rgba(0,0,0,.06); }
.tc-docs-empty { padding:34px 20px; text-align:center; color:var(--muted); font-size:13px; }
/* 2026-08-22 — our own voice player. The browser's native <audio controls>
   showed no play icon and an endless spinner on the client's phone; see the
   note above attachmentHtml() in assets/js/chat.js. */
.vm-player { display:flex; align-items:center; gap:9px; width:240px; max-width:100%;
             padding:7px 10px; border-radius:18px; background:rgba(0,0,0,.05); }
.wa-msg.me .vm-player { background:rgba(255,255,255,.18); }
.vm-player .vm-play { flex:0 0 auto; width:30px; height:30px; border:0; border-radius:50%;
             background:var(--accent,#52b7f9); color:#fff; font-size:12px; line-height:30px;
             text-align:center; cursor:pointer; padding:0; }
.vm-player .vm-play:active { transform:scale(.94); }
.vm-player .vm-bar { flex:1 1 auto; height:4px; border-radius:4px; background:rgba(0,0,0,.16); overflow:hidden; }
.wa-msg.me .vm-player .vm-bar { background:rgba(255,255,255,.32); }
.vm-player .vm-fill { width:0; height:100%; background:var(--accent,#52b7f9); transition:width .1s linear; }
.wa-msg.me .vm-player .vm-fill { background:#fff; }
.vm-player .vm-time { flex:0 0 auto; font-size:11.5px; font-variant-numeric:tabular-nums; opacity:.75; min-width:34px; }
.vm-player .vm-dl { flex:0 0 auto; text-decoration:none; opacity:.6; font-size:14px; padding:0 2px; }
.vm-player .vm-dl:hover { opacity:1; }
.vm-player.playing .vm-play { background:#e0533d; }
.vm-player.cant .vm-play { background:#9aa3ad; }
.vm-player.cant .vm-time { opacity:1; color:#b42318; font-size:10.5px; }
.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); }
/* ── Image navigation (2026-08-18) ──────────────────────────────────────────
   The arrows sit over the stage, which is also the click-to-close backdrop, so
   they need their own stacking context and their own hit area. */
.lb-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 10px 18px 22px; position: relative; }
.lb-count { font-weight: 500; opacity: .7; margin-left: 10px; font-variant-numeric: tabular-nums; }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); background: rgba(20,20,20,.55); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .12s ease, opacity .12s ease;
}
.lb-nav:hover:not(:disabled) { background: rgba(20,20,20,.85); }
.lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Kept in place rather than hidden at the ends, so the photo does not shift
   sideways as you reach the first or last one. */
.lb-nav:disabled { opacity: .25; cursor: default; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
@media (max-width: 640px) {
  /* On a phone the arrows would sit on top of the photo. Swiping is the
     primary gesture there; the arrows move to the bottom, out of the way. */
  .lb-nav { top: auto; bottom: 10px; transform: none; width: 42px; height: 42px; }
  .lb-prev { left: 22px; }
  .lb-next { right: 22px; }
  .lb-media { max-height: 74vh; }
}
@media (hover: none) { .lb-nav { opacity: .85; } }
.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; }

/* ── CSV / DOCX preview (2026-08-18) ────────────────────────────────────────
   Same footprint as the PDF frame so the viewer does not jump size between
   file types, and a white sheet because that is what a document looks like. */
.lb-doc {
  width: min(1040px, 94vw); height: 84vh; background: #fff; color: #111;
  border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
}
.dp-loading { margin: auto; color: #666; font-size: 14px; }
.dp-scroll { flex: 1; min-height: 0; overflow: auto; }
.dp-foot {
  flex: none; border-top: 1px solid #e6e6e6; padding: 8px 14px;
  font-size: 12px; color: #666; background: #fafafa;
}

/* Spreadsheet. The header row stays put while the body scrolls — on anything
   with more than a screenful of rows, a table you have to scroll back up to
   read the headings of is barely a preview at all. */
.dp-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 13px; }
.dp-table th, .dp-table td {
  border: 1px solid #e6e6e6; padding: 6px 10px; text-align: left;
  white-space: pre-wrap; vertical-align: top; max-width: 380px;
}
.dp-table thead th { position: sticky; top: 0; background: #f4f6fa; font-weight: 600; z-index: 1; }
.dp-table tbody tr:nth-child(even) { background: #fbfbfc; }

/* Word text. A readable measure rather than the full width of the sheet. */
.dp-doc { padding: 30px 34px; max-width: 78ch; margin: 0 auto; line-height: 1.6; font-size: 14.5px; }
.dp-doc h2 { font-size: 20px; margin: 22px 0 10px; }
.dp-doc h3 { font-size: 17px; margin: 18px 0 8px; }
.dp-doc h4, .dp-doc h5, .dp-doc h6 { font-size: 15px; margin: 15px 0 7px; }
.dp-doc p { margin: 0 0 10px; white-space: pre-wrap; }
.dp-doc p.dp-blank { margin: 0 0 6px; }
.dp-doc .dp-table { margin: 12px 0; font-size: 13px; width: 100%; }
.dp-doc .dp-empty, .dp-empty { color: #777; font-style: italic; }

/* The "cannot preview this one" card — the same shape as .lb-filecard so a
   file that cannot be opened does not look like a different kind of failure. */
.dp-card { margin: auto; text-align: center; padding: 30px 34px; max-width: 420px; }
.dp-card-ic { font-size: 40px; margin-bottom: 10px; }
.dp-card-name { font-weight: 600; margin-bottom: 6px; word-break: break-word; }
.dp-card-sub { color: #666; font-size: 13px; margin-bottom: 16px; }
.dp-card-dl { text-decoration: none; }
@media (max-width: 640px) {
  .lb-doc { height: 76vh; }
  .dp-doc { padding: 20px 18px; font-size: 14px; }
}
.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. OPT-IN vertical-scroll box with a native sticky header ----------
   A table that adds `is-scroll` to its .table-wrap becomes a single-table
   scroll container: the header and body are one <table>, so all columns stay
   aligned on both axes, and native position:sticky pins the header to the box
   (not the page). This overrides the global overflow/max-height above via
   higher specificity + !important, and re-enables sticky that section 1
   cancelled. Used by the payroll, salary-sheet and attendance-report tables. */
.table-wrap.is-scroll {
  overflow: auto !important;
  max-height: 70vh !important;
}
.table-wrap.is-scroll table thead th,
.table-wrap.is-scroll .table thead th,
.table-wrap.is-scroll table.dataTable thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !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, roopa-list / roopa-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;
}
/* ============================================================
   Login v3 — matches the RAPL design deck (Aug 2026)
   ------------------------------------------------------------
   Split screen: a deep navy left panel carrying the brand and a
   photograph of the building, and a light right panel holding a
   white sign-in card on a field of soft floating shapes.

   Appended rather than edited into the two older login blocks
   above, so nothing that already works is disturbed and this can
   be lifted out again in one piece.

   The building photograph is optional. Drop a file at
   assets/img/login-building.jpg and it appears automatically; with
   no file the gradient and geometry alone still look deliberate
   rather than broken.
   ============================================================ */

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: #eef2fb;
}
@media (max-width: 980px) { .login-shell { grid-template-columns: 1fr; } }

/* ---- Left: brand + building -------------------------------- */
.login-art {
  position: relative;
  overflow: hidden;
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  background:
    linear-gradient(158deg, #071a4a 0%, #0b2a6b 42%, #0d3f8f 78%, #114f9e 100%);
}
@media (max-width: 980px) {
  .login-art { display: none; }
}

/* The photograph, when one is present. Anchored bottom-left and
   faded into the navy so the headline above it stays readable. */
.login-art .art-photo {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background-image: var(--login-photo, none);
  background-size: cover;
  background-position: center bottom;
  opacity: .55;
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 100%);
          mask-image: linear-gradient(to top, #000 35%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.login-art .art-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,26,74,.72), transparent 70%);
}

/* Two large soft arcs, echoing the curved sweep in the artwork. */
.login-art::before {
  content: '';
  position: absolute;
  width: 780px; height: 780px;
  right: -300px; top: -220px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(37,99,235,.55) 0%, rgba(37,99,235,0) 62%);
  filter: blur(6px);
  z-index: 0;
}
.login-art::after {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  right: -140px; bottom: -160px;
  border-radius: 50%;
  border: 1px solid rgba(120,180,255,.18);
  background: radial-gradient(circle at 50% 50%, rgba(20,180,220,.16) 0%, transparent 68%);
  z-index: 0;
}

/* Dot grids, as in the deck. */
.login-art .art-dots {
  position: absolute;
  width: 132px; height: 92px;
  background-image: radial-gradient(rgba(255,255,255,.42) 1.4px, transparent 1.4px);
  background-size: 15px 15px;
  z-index: 0;
  pointer-events: none;
}
.login-art .art-dots.one { top: 148px; right: 132px; }
.login-art .art-dots.two { bottom: 168px; right: 240px; opacity: .7; }

.login-art > * { position: relative; z-index: 2; }

/* 2026-08-18 — the logo is 350x98. `max-width` alone left it free to overflow
   a narrow panel, and with no height cap a taller replacement logo would have
   pushed the headline off the panel. Capped both ways, and object-fit keeps the
   proportions whatever image is dropped in. */
.login-art .art-logo {
  display: block;
  width: auto;
  max-width: min(260px, 68%);
  max-height: 76px;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.login-art .badge-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  width: fit-content;
}
.login-art .badge-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
}

.login-art h1 {
  color: #fff;
  font-size: clamp(34px, 3.5vw, 54px);
  line-height: 1.06;
  letter-spacing: -.03em;
  margin: 24px 0 0;
  font-weight: 700;
  max-width: 12ch;
}
.login-art h1 .em { color: #5eead4; font-style: normal; }

.login-art p.lede {
  color: rgba(255,255,255,.72);
  font-size: 15.5px;
  line-height: 1.6;
  margin-top: 18px;
  max-width: 460px;
}

/* The four capability pills along the bottom of the artwork. */
.login-feats {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-top: 30px; max-width: 540px;
}
.login-feats span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.login-feats span::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: #5eead4;
}

.login-foot {
  color: rgba(255,255,255,.42);
  font-size: 11.5px;
  letter-spacing: .04em;
}

/* ---- Right: the card on a soft field ----------------------- */
.login-form-wrap {
  position: relative;
  display: grid; place-items: center;
  padding: 40px 28px;
  background:
    radial-gradient(1100px 620px at 78% 12%, #ffffff 0%, rgba(255,255,255,0) 58%),
    linear-gradient(155deg, #eff3fc 0%, #e7edfa 48%, #e3f4f6 100%);
  overflow: hidden;
}

/* Floating shapes. Purely decorative, so they are hidden from
   assistive tech and stand still for anyone who asked for that. */
.login-form-wrap .fx {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.login-form-wrap .fx.hex {
  width: 54px; height: 62px;
  background: linear-gradient(150deg, #93b4ff, #4f7ff0 55%, #7ee0e8);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  opacity: .85;
  filter: drop-shadow(0 12px 22px rgba(37,99,235,.28));
  animation: loginFloat 7s ease-in-out infinite;
}
.login-form-wrap .fx.hex.a { top: 16%;  left: 6%;  transform: rotate(-12deg); }
.login-form-wrap .fx.hex.b { bottom: 14%; left: 12%; width: 42px; height: 48px; animation-delay: -2.5s; }
.login-form-wrap .fx.hex.c { top: 26%;  right: 8%; width: 38px; height: 44px; animation-delay: -4.5s; }
.login-form-wrap .fx.dots {
  width: 120px; height: 84px;
  background-image: radial-gradient(rgba(37,99,235,.22) 1.5px, transparent 1.5px);
  background-size: 15px 15px;
}
.login-form-wrap .fx.dots.a { top: 9%;  right: 12%; }
.login-form-wrap .fx.dots.b { bottom: 8%; right: 7%; opacity: .7; }
.login-form-wrap .fx.arc {
  width: 340px; height: 340px;
  border-radius: 50%;
  border: 1.5px solid rgba(56,189,248,.35);
  border-right-color: transparent;
  border-bottom-color: transparent;
  top: -90px; right: -110px;
  transform: rotate(24deg);
}
.login-form-wrap .fx.blob {
  width: 300px; height: 300px; border-radius: 50%;
  right: -110px; bottom: -120px;
  background: radial-gradient(circle at 40% 40%, rgba(125,211,252,.42), rgba(125,211,252,0) 68%);
}

@keyframes loginFloat {
  0%, 100% { transform: translateY(0)    rotate(-12deg); }
  50%      { transform: translateY(-14px) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .login-form-wrap .fx.hex { animation: none; }
}

/* The card itself. */
.login-form {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 452px;
  background: #fff;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 24px;
  padding: 40px 38px 34px;
  box-shadow:
    0 34px 70px -28px rgba(15,42,96,.34),
    0 4px 14px rgba(15,42,96,.06);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
@media (max-width: 560px) { .login-form { padding: 30px 22px 26px; border-radius: 18px; } }

/* Admin variant leads with a shield, so the card is centred. */
.login-form.is-admin { text-align: center; }
.login-form.is-admin .field,
.login-form.is-admin .checkbox,
.login-form.is-admin .otp-links { text-align: left; }

.login-badge {
  width: 76px; height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #eaf1ff, #dce8ff);
  border: 1px solid rgba(37,99,235,.14);
}
.login-badge svg { width: 40px; height: 40px; }

.login-form h2 {
  font-size: 29px;
  letter-spacing: -.02em;
  margin: 0;
  color: #0f172a;
  font-weight: 700;
}
.login-form > .lede {
  color: #64748b;
  font-size: 14.5px;
  margin: 8px 0 26px;
}

.login-form .field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 7px;
}

/* Inputs carry a leading icon, as in the deck. */
.input-ico { position: relative; }
.input-ico > svg {
  position: absolute;
  /* Above the input: the input is a later sibling with an opaque white
     background, so without this it paints straight over the icon. */
  z-index: 2;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: #2563eb;
  pointer-events: none;
}
.input-ico > .input {
  width: 100%;
  padding: 13px 14px 13px 44px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 14.5px;
  color: #0f172a;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input-ico > .input::placeholder { color: #b6c2d4; }
.input-ico > .input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37,99,235,.13);
}

.login-form .forgot {
  font-size: 12.5px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
}
.login-form .forgot:hover { text-decoration: underline; }

.login-form .checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: #334155;
  margin: 18px 0 22px;
  cursor: pointer;
}
.login-form .checkbox input {
  width: 18px; height: 18px;
  accent-color: #2563eb;
  margin-top: 1px;
  flex: none;
}

.login-form .btn-primary {
  width: 100%;
  justify-content: center;
  gap: 10px;
  padding: 15px 20px;
  border: 0;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(97deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%);
  box-shadow: 0 14px 26px -12px rgba(37,99,235,.75);
  transition: filter .16s ease, transform .08s ease;
}
.login-form .btn-primary:hover:not(:disabled) { filter: brightness(1.07); }
.login-form .btn-primary:active:not(:disabled) { transform: translateY(1px); }
.login-form .btn-primary:disabled { opacity: .6; cursor: default; }

.login-form .btn-ghost {
  width: 100%;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 12px;
  border: 1px solid #d7e0ee;
  background: #fff;
  color: #1d4ed8;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}
.login-form .btn-ghost:hover { border-color: #2563eb; background: #f7faff; }

.login-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0;
  color: #94a3b8; font-size: 12.5px; font-weight: 600;
}
.login-or::before, .login-or::after {
  content: ''; flex: 1; height: 1px; background: #e5eaf3;
}

.login-secure {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 22px;
  font-size: 12.5px;
  color: #64748b;
}
.login-secure svg { width: 15px; height: 15px; color: #2563eb; flex: none; }

.login-form .otp-links {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 16px; font-size: 12.5px;
}
.login-form .otp-links a { font-weight: 700; text-decoration: none; }

/* Small screens: the artwork is hidden, so the card carries the brand. */
/* This is the ONLY logo on the page once .login-art is hidden, so its
   breakpoint has to match the one that actually hides that panel. The file
   carries two: `@media (max-width:900px){.login-art{display:none}}` earlier on,
   and a 980px one further down. The later rule wins, so 980px is the real
   breakpoint and that is what this matches. The 900px rule is normalised to 980
   as well, just above, so the two can never disagree if the order ever changes
   and leave a band of widths with no logo anywhere. */
.login-mini-brand { display: none; text-align: center; margin-bottom: 22px; }
.login-mini-brand img {
  display: inline-block;
  width: auto;
  max-width: min(190px, 62vw);
  max-height: 58px;
  height: auto;
  object-fit: contain;
}
@media (max-width: 980px) { .login-mini-brand { display: block; } }
@media (max-width: 380px) { .login-mini-brand { margin-bottom: 16px; } .login-mini-brand img { max-height: 46px; } }

/* ============================================================
   Table search — consistent with My Tasks / Given Tasks
   ------------------------------------------------------------
   Archive, Expired and Given Archive get their search from
   DataTables. It was there all along, but rendered as a small
   box labelled "Filter:" tucked beside the page-length menu,
   which reads as an advanced option rather than the thing you
   reach for first. Same size, same placement, same wording as
   the dedicated bars on the other task pages.
   ============================================================ */
.dataTables_wrapper .dataTables_filter {
  float: none;
  text-align: left;
  margin: 0 0 12px;
}
.dataTables_wrapper .dataTables_filter label {
  display: block;
  margin: 0;
  font-size: 0;                    /* the empty "search:" label */
}
.dataTables_wrapper .dataTables_filter input {
  width: 100%;
  max-width: 420px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px 9px 34px;
  font: inherit;
  font-size: 13px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E") no-repeat 10px center;
  color: var(--ink);
  outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
@media (max-width: 640px) {
  .dataTables_wrapper .dataTables_filter input { max-width: none; }
}

/* The bundled roopa-logo-white.png is actually the full-colour mark, which
   disappears against the navy panel. Force it to solid white rather than
   shipping a second image file. */
.login-art .art-logo { filter: brightness(0) invert(1); opacity: .96; }

/* The admin secure line is longer than the employee one; let it wrap under
   the shield rather than pushing the icon out of alignment. */
.login-form.is-admin .login-secure { align-items: flex-start; text-align: left; line-height: 1.5; }
.login-form.is-admin .login-secure svg { margin-top: 2px; }

/* A notification row is clickable, so it should say so. */
.notif-item { cursor: pointer; }
.notif-item:hover { background: var(--bg-2); }
.notif-item .notif-toggle,
.notif-item .notif-delete,
.notif-item .notif-open { cursor: pointer; }

/* Flash the conversation a notification just sent you to, so it is obvious
   which of thirty rows in the sidebar was opened. */
@keyframes ccFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
  15%, 65% { box-shadow: 0 0 0 3px rgba(37,99,235,.45); }
}
.chat-contact.cc-flash { animation: ccFlash 2.2s ease-in-out 1; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
  .chat-contact.cc-flash { animation: none; box-shadow: 0 0 0 3px rgba(37,99,235,.45); border-radius: 10px; }
}

/* ---- Voice messages ------------------------------------------------- */
.wa-mic { color: var(--muted); }
.wa-mic:hover { color: var(--accent); }
.vm-recording .wa-mic { color: #dc2626; }

/* The recording bar sits over the composer while a clip is being taken, so
   the text box and attach button cannot be used mid-recording. */
.vm-bar {
  display: none;
  position: absolute; inset: 0;
  align-items: center; gap: 10px;
  padding: 0 12px;
  background: var(--card);
  border-radius: inherit;
  z-index: 5;
}
.vm-bar.is-on { display: flex; }
.wa-composer { position: relative; }

.vm-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #dc2626; flex: none;
  animation: vmPulse 1.1s ease-in-out infinite;
}
@keyframes vmPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .vm-dot { animation: none; } }

.vm-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; color: var(--ink); min-width: 42px; }
.vm-hint { font-size: 12.5px; color: var(--muted); flex: 1; }
@media (max-width: 560px) { .vm-hint { display: none; } }

.vm-bar .vm-cancel {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.vm-bar .vm-cancel:hover { color: #dc2626; border-color: #dc2626; }
.vm-bar .vm-stop {
  border: 0; background: var(--accent); color: #fff;
  width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer; flex: none;
}
.vm-bar .vm-stop:hover { filter: brightness(1.08); }

/* ── Chat: grouped image albums, jumpable reply quotes ───────────────────
   2026-08-14 (client): "if there is more than 1 image in line it should be
   grouped like WhatsApp does to make chat not to be longer", and "when reply
   on some chat I want feature that redirect on click to that specific msg". */
.wa-album{display:grid;gap:3px;margin:2px 0 6px;max-width:min(320px,72%);}
.wa-album.me{margin-left:auto;justify-items:end;}
.wa-album.them{margin-right:auto;}
.wa-album.n2,.wa-album.n3,.wa-album.n4{grid-template-columns:1fr 1fr;}
.wa-album .wa-msg{margin:0!important;max-width:100%!important;width:100%;}
.wa-album .wa-bubble{padding:0!important;background:none!important;box-shadow:none!important;
  border:0!important;border-radius:8px;overflow:hidden;}
.wa-album .att-img{margin:0;border-radius:8px;overflow:hidden;}
.wa-album .att-img img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
/* A single leftover in a 3-up run spans the row so there is no gap. */
.wa-album.n3 .wa-msg:nth-child(3){grid-column:1/-1;}
.wa-album.n3 .wa-msg:nth-child(3) .att-img img{aspect-ratio:16/9;}
.wa-album .wa-meta{position:absolute;right:6px;bottom:4px;background:rgba(0,0,0,.45);
  color:#fff;border-radius:8px;padding:1px 6px;font-size:10px;}
.wa-album .wa-bubble{position:relative;}
.wa-album .tc-actions{background:rgba(0,0,0,.45);border-radius:8px;}

/* The quote is now a control, so it has to look like one. */
.wa-quote-jump{cursor:pointer;transition:filter .12s;}
.wa-quote-jump:hover{filter:brightness(1.08);}
.wa-quote-jump:active{filter:brightness(.94);}

/* Where the jump lands. Fades on its own so nothing has to clean up. */
.wa-jumped .wa-bubble{animation:waJump 1.5s ease-out;}
@keyframes waJump{
  0%,45%{box-shadow:0 0 0 3px var(--accent,#4f46e5);}
  100%{box-shadow:0 0 0 0 transparent;}
}
@media (prefers-reduced-motion:reduce){
  .wa-jumped .wa-bubble{animation:none;box-shadow:0 0 0 3px var(--accent,#4f46e5);}
}

/* ═══ Push 2 — forward picker ═══════════════════════════════════════════════
   Client: "in additional feature of whatsapp my client want copy feature
            forward feature".
   Sits above the chat overlay (which is z-index 9999 in this panel), so the
   picker opened from a task chat is not drawn behind it. */
.tc-fwd-ov{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:10050;
           display:flex;align-items:center;justify-content:center;padding:16px;}
.tc-fwd{background:var(--card,#fff);color:var(--text,#111827);border-radius:14px;width:100%;
        max-width:420px;max-height:78vh;display:flex;flex-direction:column;overflow:hidden;
        box-shadow:0 24px 60px rgba(0,0,0,.35);}
.tc-fwd-h{display:flex;align-items:center;justify-content:space-between;font-weight:700;
          padding:14px 16px;border-bottom:1px solid var(--line,#e5e7eb);}
.tc-fwd-x{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:inherit;opacity:.6;}
.tc-fwd-x:hover{opacity:1;}
.tc-fwd-q{margin:12px 16px 0;padding:8px 10px;border-radius:8px;font-size:12.5px;
          background:var(--muted-bg,#f1f5f9);color:var(--muted,#64748b);
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tc-fwd-s{margin:12px 16px;padding:9px 11px;border:1px solid var(--line,#e5e7eb);
          border-radius:9px;font:inherit;background:var(--card,#fff);color:inherit;}
.tc-fwd-list{overflow-y:auto;padding:0 8px 12px;}
.tc-fwd-i{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;
          background:none;font:inherit;color:inherit;padding:10px 8px;border-radius:8px;cursor:pointer;}
.tc-fwd-i:hover{background:var(--muted-bg,#f1f5f9);}
.tc-fwd-i:disabled{opacity:.5;cursor:default;}
.tc-fwd-k{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
          padding:2px 7px;border-radius:999px;border:1px solid var(--line,#e5e7eb);
          color:var(--muted,#64748b);flex:0 0 auto;}
.tc-fwd-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;}
.tc-fwd-empty{padding:22px 12px;text-align:center;color:var(--muted,#64748b);font-size:13px;}

/* ═══ Push 2 — image zoom in the chat viewer ════════════════════════
   Client: "in chat where images open my client want a zoom option so he can
            check zooming the images".
   The image is moved with a transform rather than by changing its width, so
   the browser composites it on the GPU and a pinch stays smooth on a phone. */
.lb-media.lb-zoomable{transform-origin:center center;will-change:transform;
                      transition:transform .12s ease-out;cursor:zoom-in;}
.lb-media.lb-zoomable.is-zoomed{cursor:grab;}
.lb-media.lb-zoomable.is-panning{cursor:grabbing;transition:none;}
/* No native pan/pinch while an image is up, or the browser zooms the whole
   page instead of the photo. */
.lb-stage.lb-stage-zoom{touch-action:none;overflow:hidden;}
/* The bar now carries five controls. The title must be the thing that gives
   way — min-width:0 lets it ellipsise, and the controls refuse to shrink so
   they can never overlap each other on a narrow phone. */
.lb-bar .lb-title{min-width:0;}
.lb-bar .lb-actions{flex:0 0 auto;}
.lb-actions .lb-zi,.lb-actions .lb-zo{font-size:19px;font-weight:600;line-height:1;}
.lb-zpct{height:38px;min-width:58px;padding:0 8px;
         border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);
         color:#fff;border-radius:10px;cursor:pointer;
         font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;}
.lb-zpct:hover{background:rgba(255,255,255,.16);}
@media (max-width:520px){
  /* Five controls plus a filename do not fit at full size on a phone. */
  .lb-actions .lb-zi,.lb-actions .lb-zo{width:32px;height:32px;}
  .lb-zpct{height:32px;min-width:46px;padding:0 4px;font-size:11px;}
}
/* Bug found while building this: the photo counter ("3 / 11") was rendering as
   a teal gradient BAR instead of text. `.lb-bar` is the leaderboard bar in
   task-points.php ("lb" = leaderboard) and also the lightbox bar ("lb" =
   lightbox), so `.lb-bar span` was painting the counter. Scoped under
   .blsm-lightbox so the leaderboard is untouched. */
.blsm-lightbox .lb-bar span{display:inline;height:auto;width:auto;
                            background:none;border-radius:0;}

/* ══ Task filter bar — 2026-08-26 ═════════════════════════════════════════
   Client: "archive pages still dont have search option like my task also
   filters". Used by archive-tasks and given-archive-tasks through
   assets/js/task-filter.js.

   Built from the existing tokens so it matches the My Tasks bar rather than
   looking like a second design. It wraps on a narrow screen instead of
   scrolling sideways — these controls are reached one at a time on a phone. */
.tf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;}
.tf-search{position:relative;flex:1 1 260px;min-width:200px;display:flex;align-items:center;}
.tf-search .tf-ic,.tf-search svg{position:absolute;left:10px;width:15px;height:15px;
  opacity:.55;pointer-events:none;}
.tf-search .input{width:100%;padding-left:32px;}
.tf-bar .tf-sel{flex:0 1 190px;min-width:150px;}
.tf-bar .tf-date{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:var(--muted,#6b7280);white-space:nowrap;}
.tf-bar .tf-date .input{width:150px;}
.tf-count{margin-left:auto;font-size:12px;color:var(--muted,#6b7280);font-weight:600;
  white-space:nowrap;}
/* Nothing matched — say so in the count rather than only with an empty table. */
.tf-count.none{color:var(--danger,#dc2626);}
@media (max-width:640px){
  .tf-bar .tf-date{flex:1 1 100%;}
  .tf-bar .tf-date .input{flex:1;width:auto;}
  .tf-count{margin-left:0;flex:1 1 100%;}
}

/* ══ HRM task row actions — 2026-08-26 ════════════════════════════════════
   Client: "in hrm panel client want edit manage chat delete mark complete
   change status option as the employee panel have". Four buttons in a cell
   that used to hold one, so they wrap instead of forcing the table wider. */
.tk-actions{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.tk-actions .btn{white-space:nowrap;}
@media (max-width:900px){ .tk-actions{max-width:190px;} }

/* 2026-08-28 — the language picker in the header. Sized to the longest native
   name so switching language does not shuffle the icons beside it. */
.topbar-actions .lang-wrap { display: inline-flex; align-items: center; }
.topbar-actions .lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--card, #fff) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center;
  border: 1px solid var(--line, #e4e1da);
  border-radius: 8px;
  color: var(--ink, #222);
  font: inherit;
  font-size: 12.5px;
  padding: 6px 26px 6px 10px;
  max-width: 168px;
  cursor: pointer;
}
.topbar-actions .lang-select:focus-visible { outline: 2px solid var(--accent, #ff5b1f); outline-offset: 1px; }
/* On a narrow screen the header is already tight; the flag-less select keeps
   its meaning at this width because the native script is distinctive. */
@media (max-width: 640px) {
  .topbar-actions .lang-select { max-width: 92px; padding-right: 22px; font-size: 12px; }
}
/* Right-to-left languages: mirror the shell, not the data tables — a table of
   numbers reads worse reversed than it does left-aligned. */
html[dir="rtl"] .sidebar { direction: rtl; }
html[dir="rtl"] .topbar-actions { flex-direction: row-reverse; }
html[dir="rtl"] table { direction: ltr; }

/* 2026-08-28 — the native-digits tick box beside the language picker. Narrow on
   purpose: it shows the language's own 0 1 2 so what it does is obvious without
   a label to translate. */
.topbar-actions .lang-numerals {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 6px; font-size: 12px; color: var(--muted, #777);
  cursor: pointer; user-select: none;
}
.topbar-actions .lang-numerals input { margin: 0; cursor: pointer; }
.topbar-actions .lang-numerals span { letter-spacing: .5px; }
@media (max-width: 640px) { .topbar-actions .lang-numerals { display: none; } }

/* ══ File viewer on a phone — 21 Sep ══════════════════════════════════════
   Client: the close option "goes to bottom of the screen" on mobile.

   It was not moving — it was GONE. The leaderboard in task-points.php and the
   lightbox toolbar both use the class name .lb-bar ("lb" means leaderboard in
   one and lightbox in the other), and the leaderboard hides its bar on small
   screens: .lb-bar with display none, inside the 900px and 640px blocks.
   Neither is scoped, so on any phone the file viewer lost its whole top bar —
   the filename, Download, Share and Close with it — leaving an image with no
   way out but the backdrop.

   The same collision was found once before and fixed for the span inside it (see
   the comment above). This is the parent element, missed at the time.

   Written as a re-assert under .blsm-lightbox rather than by editing the
   leaderboard rules, so the leaderboard keeps hiding its bar exactly as it
   does today and only the viewer is affected. */
@media (max-width: 900px) {
  .blsm-lightbox .lb-bar { display: flex; }
}
@media (max-width: 640px) {
  .blsm-lightbox .lb-bar { display: flex; padding: 14px 12px; }
  /* The filename gives up its room first; the buttons must never be pushed off. */
  .blsm-lightbox .lb-title { font-size: 12.5px; min-width: 0; flex: 1 1 auto; }
  .blsm-lightbox .lb-actions { flex: 0 0 auto; gap: 4px; }
}