/* ============================================================
   FAYA QA Workspace — styles.css  v2.1
   ============================================================ */

/* ── Design Tokens ── */
:root {
  /* Brand */
  --faya-navy:       #1B3A5C;
  --faya-blue:       #2E75B6;
  --faya-blue-lt:    #D0E4F7;
  --faya-accent:     #f59e0b;

  /* Layout */
  --sidebar-w:       240px;
  --topbar-h:        56px;

  /* Deployment environments */
  --env-dev-bg:      #dbeafe; --env-dev-fg:     #1e40af;
  --env-staging-bg:  #ffedd5; --env-staging-fg: #c2410c;
  --env-beta-bg:     #f3e8ff; --env-beta-fg:    #6d28d9;
  --env-live-bg:     #dcfce7; --env-live-fg:    #15803d;
  --env-pod-bg:      #e0f2fe; --env-pod-fg:     #0369a1;

  /* Radius & shadow */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,.08);
}

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */
.navbar-vertical.navbar-expand-lg {
  width: var(--sidebar-w) !important;
  background: var(--faya-navy) !important;
  border-right: none !important;
  box-shadow: 2px 0 16px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Brand area */
.navbar-vertical .navbar-brand {
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: block;
  width: 100%;
  text-decoration: none;
}

.faya-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

/* Logo mark */
.faya-brand img {
  width: 36px; height: 36px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.28);
}

/* Text stack */
.faya-brand > div {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}

/* Primary product name */
.faya-brand-text {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* "Ops" accent — slightly lighter weight, accent colour */
.faya-brand-ops {
  font-weight: 400;
  color: var(--faya-accent, #f59e0b);
  letter-spacing: 0;
}

/* Tagline */
.faya-brand-sub {
  font-size: 0.58rem;
  font-weight: 500;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Keep version-badge rule intact for any legacy use */
.version-badge {
  font-size: 0.55rem;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
}

/* Nav items */
.navbar-vertical .navbar-nav { width:100%; flex-direction:column; }

.navbar-vertical .nav-item .nav-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 0.48rem 0.85rem !important;
  margin: 1px 0;
  border-radius: 8px;
  color: rgba(255,255,255,0.78) !important;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  border-left: 3px solid transparent;
}

.navbar-vertical .nav-item .nav-link:hover:not(.active) {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.9) !important;
}

.navbar-vertical .nav-item .nav-link.active {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  border-left-color: var(--faya-accent) !important;
  font-weight: 600;
  padding-left: calc(0.85rem - 3px) !important;
}

/* Icons inside nav links */
.navbar-vertical .nav-item .nav-link .ti {
  font-size: 1.15rem;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.8;
}
.navbar-vertical .nav-item .nav-link:hover .ti,
.navbar-vertical .nav-item .nav-link.active .ti { opacity: 1; }

/* Section divider labels */
.navbar-vertical .nav-item.sidebar-section-label {
  padding: 0.7rem 0.85rem 0.15rem;
  pointer-events: none;
}
.navbar-vertical .nav-item.sidebar-section-label span {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

/* Sidebar bottom user area */
.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 0.85rem 1rem;
}
.sidebar-bottom .avatar {
  background: var(--faya-blue) !important;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   PAGE WRAPPER + TOPBAR
══════════════════════════════════════ */
.page-wrapper {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
}

/* ── Topbar — fully opaque, always above all page content ── */
.navbar.navbar-expand-md {
  /* Explicit opaque white — never inherit a semi-transparent body-bg */
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  min-height: var(--topbar-h);
  position: sticky;
  top: 0;
  z-index: 1020 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04);
}
[data-bs-theme="dark"] .navbar.navbar-expand-md {
  background: #1a1a2e !important;
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 10px rgba(0,0,0,.3);
}

/* Page body starts right below topbar */
.page-body { padding-top: 0; }
html { scroll-padding-top: calc(var(--topbar-h) + 8px); }

/* ── Suppress duplicate page-title in content (topbar already shows it) ── */
/* Each .page-section starts with a .page-header h2 that mirrors the topbar.
   Hiding the h2 removes the double-heading at scroll position 0.
   The subtitle/description stays visible.                                  */
.page-header .page-title { display: none; }
/* Settings and Discuss section headers already styled without h2 — no change needed */

#page-title-topbar {
  font-size: 1rem;
  font-weight: 700;
}

/* ══════════════════════════════════════
   PAGE ROUTING
══════════════════════════════════════ */
.page-section { display:none; }
.page-section.active {
  display: block;
  animation: pageIn 0.14s ease;
}
@keyframes pageIn { from{opacity:0} to{opacity:1} }

/* ══════════════════════════════════════
   STAT CARDS
══════════════════════════════════════ */
.stat-card {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s;
}
.stat-card:hover {
  box-shadow: var(--shadow-md) !important;
}
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-label { font-size: 0.75rem; opacity: 0.6; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; }

/* ══════════════════════════════════════
   BADGES  — modern muted palette
   Approach: soft tinted bg + strong fg text
   Only 1-3 colours on screen at once feel
   balanced. Solid fills only for Critical.
══════════════════════════════════════ */

/* Base badge geometry (all chips share this) */
.badge-priority-critical,
.badge-priority-high,
.badge-priority-medium,
.badge-priority-low,
.badge-status-open,
.badge-status-inprogress,
.badge-status-done,
.badge-status-blocked,
.badge-status-review,
.badge-status-reopened,
.badge-status-discussion,
.badge-type-bug,
.badge-type-task,
.badge-type-story,

/* ── Priority ──────────────────────────
   Critical: only badge that stays bold/red
   High: muted orange
   Medium: neutral slate (no color noise)
   Low: lightest neutral — nearly invisible
─────────────────────────────────────── */
.badge-priority-critical {
  background: #fde8e8 !important; color: #b91c1c !important;
  border-color: #fca5a5 !important;
}
.badge-priority-high {
  background: #fff0e6 !important; color: #c2410c !important;
  border-color: #fdba74 !important;
}
.badge-priority-medium {
  background: #f3f4f6 !important; color: #374151 !important;
  border-color: #d1d5db !important;
}
.badge-priority-low {
  background: #f9fafb !important; color: #9ca3af !important;
  border-color: #e5e7eb !important;
}

/* ── Status ────────────────────────────
   Each has a distinct hue but soft bg.
   Done uses green; Blocked red; others
   use blue/amber/purple/sky variants.
─────────────────────────────────────── */
.badge-status-open {
  background: #eff6ff !important; color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}
.badge-status-inprogress {
  background: #fffbeb !important; color: #b45309 !important;
  border-color: #fcd34d !important;
}
.badge-status-review {
  background: #faf5ff !important; color: #7e22ce !important;
  border-color: #d8b4fe !important;
}
.badge-status-blocked {
  background: #fef2f2 !important; color: #b91c1c !important;
  border-color: #fca5a5 !important;
}
.badge-status-done {
  background: #f0fdf4 !important; color: #15803d !important;
  border-color: #bbf7d0 !important;
}
.badge-status-reopened {
  background: #fff7ed !important; color: #c2410c !important;
  border-color: #fed7aa !important;
}
.badge-status-discussion {
  background: #f0f9ff !important; color: #0369a1 !important;
  border-color: #bae6fd !important;
}

/* ── Type ──────────────────────────────
   Very neutral — type is least important.
   Bug keeps a hint of red; rest are slate.
─────────────────────────────────────── */
.badge-type-task {
  background: #f3f4f6 !important; color: #4b5563 !important;
  border-color: #d1d5db !important;
}
.badge-type-bug {
  background: #fef2f2 !important; color: #b91c1c !important;
  border-color: #fca5a5 !important;
}
.badge-type-story {
  background: #eff6ff !important; color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}
.badge-type-epic {
  background: #faf5ff !important; color: #7e22ce !important;
  border-color: #d8b4fe !important;
}

/* ── Dark mode overrides ───────────────
   Flip: dark bg tint + lighter text
─────────────────────────────────────── */
[data-bs-theme="dark"] .badge-priority-critical {
  background: #450a0a60 !important; color: #fca5a5 !important; border-color: #7f1d1d80 !important;
}
[data-bs-theme="dark"] .badge-priority-high {
  background: #43140750 !important; color: #fdba74 !important; border-color: #7c2d1260 !important;
}
[data-bs-theme="dark"] .badge-priority-medium {
  background: #1f293730 !important; color: #9ca3af !important; border-color: #37415150 !important;
}
[data-bs-theme="dark"] .badge-priority-low {
  background: #11182730 !important; color: #6b7280 !important; border-color: #1f293750 !important;
}
[data-bs-theme="dark"] .badge-status-open {
  background: #1e3a8a28 !important; color: #93c5fd !important; border-color: #1d4ed840 !important;
}
[data-bs-theme="dark"] .badge-status-inprogress {
  background: #78350f28 !important; color: #fcd34d !important; border-color: #92400e40 !important;
}
[data-bs-theme="dark"] .badge-status-review {
  background: #4c1d9528 !important; color: #d8b4fe !important; border-color: #6d28d940 !important;
}
[data-bs-theme="dark"] .badge-status-blocked {
  background: #7f1d1d28 !important; color: #fca5a5 !important; border-color: #b91c1c40 !important;
}
[data-bs-theme="dark"] .badge-status-done {
  background: #14532d28 !important; color: #86efac !important; border-color: #16a34a40 !important;
}
[data-bs-theme="dark"] .badge-status-reopened {
  background: #7c2d1228 !important; color: #fdba74 !important; border-color: #c2410c40 !important;
}
[data-bs-theme="dark"] .badge-status-discussion {
  background: #0c4a6e28 !important; color: #7dd3fc !important; border-color: #0369a140 !important;
}
[data-bs-theme="dark"] .badge-type-task {
  background: #1f293730 !important; color: #9ca3af !important; border-color: #37415150 !important;
}
[data-bs-theme="dark"] .badge-type-bug {
  background: #7f1d1d28 !important; color: #fca5a5 !important; border-color: #b91c1c40 !important;
}
[data-bs-theme="dark"] .badge-type-story {
  background: #1e3a8a28 !important; color: #93c5fd !important; border-color: #1d4ed840 !important;
}
[data-bs-theme="dark"] .badge-type-epic {
  background: #4c1d9528 !important; color: #d8b4fe !important; border-color: #6d28d940 !important;
}

/* ══════════════════════════════════════
   BOARD TABLE  (brd-* system)
══════════════════════════════════════ */

/* ── Board page spacing + surface tint ── */
#page-board.active {
  display: flex; flex-direction: column; gap: 0;
  background: #f1f3f5;
  /* Extend bg edge-to-edge using outline shadow trick — NO negative margin */
  box-shadow: 0 0 0 1rem #f1f3f5;
  clip-path: none;
  padding-bottom: 2rem;
  min-height: calc(100vh - var(--topbar-h));
}
[data-bs-theme="dark"] #page-board.active {
  background: #13151f;
  box-shadow: 0 0 0 1rem #13151f;
}
#task-pool-card    { margin-top: 1.25rem !important; }
#done-history-card { margin-top: 1.25rem !important; }

/* ── Card container — white surface above the board bg ── */
.brd-card {
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
[data-bs-theme="dark"] .brd-card {
  background: #1e2130;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 1px 6px rgba(0,0,0,.3);
}

/* ── Card / section header shared background ── */
.brd-card-hdr,
[data-bs-theme="dark"] .brd-card-hdr,
[data-bs-theme="dark"] .brd-section-hdr {
  background: rgba(255,255,255,0.04);
  border-bottom-color: rgba(255,255,255,0.07);
}

/* ── Card header (main active tasks board) ── */
.brd-card-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.72rem 1.1rem 0.68rem;
}
.brd-card-hdr-left { display: flex; flex-direction: column; gap: 3px; }
.brd-card-hdr-title {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.84rem; font-weight: 700; color: var(--bs-body-color);
  letter-spacing: 0.01em;
}
.brd-card-hdr-ico { font-size: 1rem; flex-shrink: 0; }
.brd-ico-blue  { color: var(--faya-blue); }
.brd-ico-amber { color: #b45309; }
.brd-ico-green { color: #15803d; }
.brd-card-hdr-sub {
  font-size: 0.71rem; color: var(--bs-secondary-color);
  padding-left: 1.48rem;
}

/* ── Section headers (Task Pool, Done History) ── */
.brd-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.72rem 1.1rem 0.68rem;
  cursor: pointer; user-select: none;
  transition: background 0.1s;
}
.brd-section-hdr:hover { background: rgba(0,0,0,0.025); }
[data-bs-theme="dark"] .brd-section-hdr:hover { background: rgba(255,255,255,0.04); }
.brd-section-hdr-left { display: flex; flex-direction: column; gap: 3px; }
.brd-section-title {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.84rem; font-weight: 700; color: var(--bs-body-color);
  letter-spacing: 0.01em;
}
.brd-section-sub {
  font-size: 0.71rem; color: var(--bs-secondary-color);
  padding-left: 1.48rem;
}
/* Chevron */
.brd-chevron {
  font-size: 0.88rem; color: var(--bs-secondary-color);
  flex-shrink: 0; transition: transform 0.18s;
}

/* ── Pills (count badges in headers) ── */
.brd-pill {
  display: inline-flex; align-items: center;
  font-size: 0.65rem; padding: 2px 8px;
  border-radius: 20px; font-weight: 700;
  line-height: 1.4; white-space: nowrap;
}
.brd-pill-blue {
  background: #eff6ff; color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.brd-pill-amber {
  background: #fff7ed; color: #b45309;
  border: 1px solid #fed7aa;
}
.brd-pill-green {
  background: #f0fdf4; color: #15803d;
  border: 1px solid #bbf7d0;
}
[data-bs-theme="dark"] .brd-pill-blue {
  background: #1e3a8a20; color: #93c5fd; border-color: #1d4ed840;
}
[data-bs-theme="dark"] .brd-pill-amber {
  background: #78350f20; color: #fcd34d; border-color: #92400e40;
}
[data-bs-theme="dark"] .brd-pill-green {
  background: #14532d20; color: #86efac; border-color: #16a34a40;
}

/* ── Toolbar ── */
.brd-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.85rem;
  background: var(--bs-body-bg);
  border: 1.5px solid #d0d7e2;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .brd-toolbar { border-color: #2e3d52; }

.brd-filters { display: flex; align-items: center; gap: 0.5rem; flex: 1; flex-wrap: wrap; }
.brd-search-wrap { position: relative; flex: 1; min-width: 180px; max-width: 260px; }
.brd-search-wrap .ti { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); font-size: 0.95rem; pointer-events: none; }

.brd-search-input {
  padding-left: 2rem; font-size: 0.82rem; height: 36px;
  border: 1.5px solid #b8c2d0; border-radius: 8px;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  width: 100%; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.brd-search-input:hover  { border-color: #8a96a8; }
.brd-search-input:focus  { border-color: var(--faya-blue); box-shadow: 0 0 0 3px rgba(46,117,182,.1); }
[data-bs-theme="dark"] .brd-search-input { background: #1e2a3a; border-color: #3a4d66; }

.brd-filter-sel {
  font-size: 0.82rem; height: 36px; min-width: 125px; max-width: 170px;
  border: 1.5px solid #b8c2d0; border-radius: 8px;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  padding: 0 0.65rem; outline: none; cursor: pointer;
  transition: border-color .15s;
}
.brd-filter-sel:hover { border-color: #8a96a8; }
.brd-filter-sel:focus { border-color: var(--faya-blue); box-shadow: 0 0 0 3px rgba(46,117,182,.1); }
[data-bs-theme="dark"] .brd-filter-sel { background: #1e2a3a; border-color: #3a4d66; }

.brd-add-btn {
  height: 36px; font-size: 0.82rem; padding: 0 1.1rem;
  white-space: nowrap; border-radius: 8px;
  background: var(--faya-blue); color: #fff;
  border: none; cursor: pointer; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  transition: background .13s;
}
.brd-add-btn:hover { background: var(--faya-navy); }

/* ── Bulk action bar ── */
.brd-bulk-bar {
  display: none; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 1.1rem;
  background: color-mix(in srgb, var(--faya-blue) 6%, var(--bs-body-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--faya-blue) 16%, transparent);
  animation: bulkBarIn 0.18s ease;
}
.brd-bulk-bar.active { display: flex; }
@keyframes bulkBarIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
.brd-bulk-count { font-size: 0.78rem; font-weight: 700; color: var(--faya-blue); white-space: nowrap; margin-right: 0.2rem; }
.brd-bulk-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.brd-bulk-sel { font-size: 0.78rem; height: 30px; min-width: 115px; border-radius: 6px; }
.brd-bulk-clear { font-size: 0.78rem; padding: 0 0.75rem; height: 30px; }

/* ── Table scroll wrapper ── */
.brd-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}
.brd-table-wrap::-webkit-scrollbar { width: 5px; height: 5px; }
.brd-table-wrap::-webkit-scrollbar-track { background: transparent; }
.brd-table-wrap::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 3px; }
.brd-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--bs-secondary-color); }

/* ── Table base ── */
.brd-table { font-size: 0.82rem; border-collapse: collapse; width: 100%; margin-bottom: 0; }

/* ── Sticky header ── */
.brd-table thead th {
  position: sticky; top: 0; z-index: 3;
  font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  color: var(--bs-secondary-color); white-space: nowrap;
  padding: 0.55rem 0.7rem !important;
  /* Must be a solid, opaque colour — prevents tbody rows bleeding through */
  background: #f1f3f5;
  border-bottom: 1px solid var(--bs-border-color) !important;
  user-select: none;
  /* Crisp bottom shadow so header reads as elevated */
  box-shadow: 0 1px 0 var(--bs-border-color);
}
[data-bs-theme="dark"] .brd-table thead th {
  background: #1e2130; /* fully opaque dark surface */
}

/* ── Body cells ── */
.brd-table td {
  vertical-align: middle;
  padding: 0.6rem 0.7rem !important;
  border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.045));
  white-space: nowrap;
}
.brd-table td.td-summary { white-space: normal; min-width: 220px; }
.brd-table td:last-child { white-space: nowrap; }

/* ── Row states ── */
.brd-table tbody tr {
  transition: background 0.1s;
  cursor: pointer;
}
.brd-table tbody tr:hover {
  background: color-mix(in srgb, var(--faya-blue) 4%, var(--bs-body-bg));
}
/* On-leave row — static highlight, no hover change */
.brd-table tbody tr.row--on-leave {
  background: rgba(239,68,68,0.08) !important;
  box-shadow: inset 3px 0 0 #ef4444;
}
.brd-table tbody tr.row--on-leave:hover {
  background: rgba(239,68,68,0.08) !important;
}
[data-bs-theme="dark"] .brd-table tbody tr.row--on-leave {
  background: rgba(239,68,68,0.1) !important;
}
[data-bs-theme="dark"] .brd-table tbody tr.row--on-leave:hover {
  background: rgba(239,68,68,0.1) !important;
}
.brd-table tbody tr:hover .task-summary { color: var(--faya-blue); }
.brd-table tbody tr.row-selected {
  background: color-mix(in srgb, var(--faya-blue) 7%, var(--bs-body-bg));
}
.brd-table tbody tr.row-selected:hover {
  background: color-mix(in srgb, var(--faya-blue) 11%, var(--bs-body-bg));
}
.brd-table tbody tr:last-child td { border-bottom: none; }

/* ── Column widths ── */
.brd-col-cb       { width: 36px;  padding: 0.65rem 0.4rem !important; text-align: center; }
.brd-col-copy     { width: 28px;  padding: 0.65rem 0.2rem !important; text-align: center; }
.brd-col-key      { width: 95px; }
.brd-col-summary  { min-width: 220px; }
.brd-col-priority { width: 110px; }
.brd-col-status   { width: 125px; }
.brd-col-assignee { width: 145px; }
.brd-col-store    { width: 110px; }
.brd-col-due      { width: 130px; }
.brd-col-assign   { width: 230px; }
.brd-col-actions  { width: 56px; text-align: right; white-space: nowrap; }
.brd-col-time     { width: 80px; }

/* ── Row spacing ── */
.brd-table td { padding: 0.75rem 0.85rem; }
.brd-table td.brd-col-cb { padding: 0.75rem 0.4rem !important; }

/* ── Overdue row ── */
.brd-table tbody tr.row--overdue {
  border-left: 3px solid #ef4444;
  background: rgba(239,68,68,.02);
}
.brd-table tbody tr.row--overdue:hover { background: rgba(239,68,68,.05); }
[data-bs-theme="dark"] .brd-table tbody tr.row--overdue { background: rgba(239,68,68,.05); }

/* ── Done row ── */
.brd-table tbody tr.brd-done-row .brd-task-title {
  color: var(--bs-body-color);
}

/* ── Summary cell — title + meta ── */
.brd-task-title {
  font-size: 0.83rem; font-weight: 600;
  color: var(--bs-body-color); line-height: 1.4;
}
.brd-table tbody tr:hover .brd-task-title { color: var(--faya-blue); }
.brd-done-row:hover .brd-task-title { color: var(--bs-secondary-color) !important; }

.brd-task-meta {
  display: flex; align-items: center; gap: 5px;
  margin-top: 3px; flex-wrap: wrap;
}
.brd-meta-key {
  font-size: 0.7rem; font-weight: 700; font-family: ui-monospace, monospace;
  color: var(--faya-blue); text-decoration: none; white-space: nowrap;
}
.brd-meta-key:hover { text-decoration: underline; }
.brd-meta-sep { color: var(--bs-secondary-color); font-size: 0.65rem; }
.brd-meta-store {
  font-size: 0.68rem; font-weight: 600;
  background: #f1f5f9; color: #475569;
  border: 1px solid #e2e8f0; border-radius: 4px;
  padding: 0 5px; white-space: nowrap;
}
[data-bs-theme="dark"] .brd-meta-store { background: #1e293b; color: #94a3b8; border-color: #334155; }

/* ── Assignee avatar+name ── */
.brd-assignee-cell {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.brd-assignee-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 800; color: #fff;
}
.brd-assignee-name {
  font-size: 0.79rem; font-weight: 500; color: var(--bs-body-color);
  overflow: hidden; text-overflow: ellipsis; max-width: 100px;
}

/* ── Due date ── */
.brd-due-date { font-size: 0.77rem; font-weight: 500; color: var(--bs-body-color); white-space: nowrap; }
.brd-no-val { color: var(--bs-secondary-color); font-size: 0.75rem; }
.brd-due-overdue { display: flex; flex-direction: column; gap: 2px; }
.brd-due-badge {
  display: inline-flex; align-items: center;
  font-size: 0.63rem; font-weight: 700;
  background: #fee2e2; color: #b91c1c;
  border: 1px solid #fecaca; border-radius: 4px;
  padding: 1px 5px; width: fit-content;
}
.brd-due-date--red { font-size: 0.72rem; font-weight: 700; color: #ef4444; white-space: nowrap; }
[data-bs-theme="dark"] .brd-due-badge { background: rgba(239,68,68,.15); color: #fca5a5; border-color: rgba(239,68,68,.3); }

/* ── Priority label (icon + text, no box) ── */
.brd-priority-label {
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}

/* ── Three-dot action menu ── */
.brd-menu-wrap { position: relative; display: inline-flex; justify-content: flex-end; }

.brd-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  background: #f8fafc; border: 1.5px solid #cbd5e1;
  color: #475569; cursor: pointer; font-size: 1rem;
  transition: background .12s, border-color .12s, color .12s;
}
.brd-menu-btn:hover { background: #e2e8f0; border-color: #94a3b8; color: #1e293b; }
[data-bs-theme="dark"] .brd-menu-btn { background: #1e293b; border-color: #475569; color: #94a3b8; }
[data-bs-theme="dark"] .brd-menu-btn:hover { background: #2d3f55; border-color: #64748b; color: #e2e8f0; }

.brd-menu-dropdown {
  /* position & coordinates set entirely by JS via toggleMenu() */
  display: none;
  background: #ffffff;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.10);
  overflow: hidden;
  animation: menuIn .12s ease;
}
[data-bs-theme="dark"] .brd-menu-dropdown {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
@keyframes menuIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
[data-bs-theme="dark"] .brd-menu-dropdown { border-color: #2e3d52; box-shadow: 0 4px 20px rgba(0,0,0,.3); }

.brd-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 14px;
  font-size: 0.81rem; font-weight: 600; font-family: inherit;
  background: transparent; border: none; cursor: pointer;
  color: #1e293b; text-align: left;
  transition: background .1s;
  white-space: nowrap;
}
.brd-menu-item i { font-size: 0.88rem; }
.brd-menu-item:hover { background: #f1f5f9; }
.brd-menu-item--done { color: #15803d; }
.brd-menu-item--done:hover { background: #dcfce7; color: #15803d; }
.brd-menu-item--danger { color: #dc2626; }
.brd-menu-item--danger:hover { background: #fee2e2; color: #dc2626; }
[data-bs-theme="dark"] .brd-menu-item { color: #e2e8f0; }
[data-bs-theme="dark"] .brd-menu-item:hover { background: #2d3f55; }
[data-bs-theme="dark"] .brd-menu-item--done { color: #4ade80; }
[data-bs-theme="dark"] .brd-menu-item--done:hover { background: #052e16; }
[data-bs-theme="dark"] .brd-menu-item--danger { color: #f87171; }
[data-bs-theme="dark"] .brd-menu-item--danger:hover { background: rgba(220,38,38,.15); }

.brd-menu-divider { height: 1px; background: #e2e8f0; margin: 3px 0; }
[data-bs-theme="dark"] .brd-menu-divider { background: #334155; }

/* ── Pool assign row ── */

/* ── Pool assign row ── */
.brd-assign-row { display: flex; align-items: center; gap: 6px; }
.brd-assign-sel {
  flex: 1; height: 30px; font-size: 0.78rem; border-radius: 6px;
  border: 1.5px solid #b8c2d0; background: var(--bs-body-bg);
  color: var(--bs-body-color); padding: 0 0.5rem; outline: none;
  min-width: 0;
}
.brd-assign-sel:focus { border-color: var(--faya-blue); }
.brd-assign-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 10px; font-size: 0.75rem; font-weight: 600;
  font-family: inherit; background: var(--faya-blue); color: #fff;
  border: none; border-radius: 6px; cursor: pointer; white-space: nowrap;
  flex-shrink: 0; transition: background .13s;
}
.brd-assign-btn:hover { background: var(--faya-navy); }

/* ── Done history completed cell ── */
.brd-store-name { font-size: 0.76rem; font-weight: 500; color: var(--bs-body-color); }
.brd-completed-cell { display: flex; flex-direction: column; gap: 1px; }
.brd-completed-by { font-size: 0.67rem; color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .brd-completed { color: #86efac; }

/* ── Sortable headers ── */
.brd-col-sortable { cursor: pointer; }
.brd-col-sortable:hover { color: var(--faya-blue); }
.brd-sort-ico { font-size: 0.72rem; opacity: 0.28; margin-left: 2px; vertical-align: middle; transition: opacity 0.1s; }
th.sort-asc  .brd-sort-ico,
th.sort-desc .brd-sort-ico { opacity: 1; color: var(--faya-blue); }

/* ── Checkbox ── */
.brd-cb { width: 15px; height: 15px; border-radius: 4px; cursor: pointer; accent-color: var(--faya-blue); }

/* ── Copy button ── */
.brd-copy-btn {
  opacity: 1; transition: opacity 0.15s, color 0.15s;
  padding: 0; background: none; border: none; cursor: pointer;
  color: var(--bs-secondary-color); font-size: 0.9rem; line-height: 1;
}
.brd-copy-btn:hover { color: var(--faya-blue); }

/* ── "Done" action button — compact green filled ── */
#board-tbody .btn-success {
  background: transparent !important;
  color: #16a34a !important;
  border: 1.5px solid #16a34a !important;
  box-shadow: none !important;
  font-size: 0.71rem !important;
  padding: 3px 10px !important;
  height: auto !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  transition: background 0.15s, color 0.15s !important;
}
#board-tbody .btn-success:hover {
  background: #16a34a !important;
  color: #fff !important;
  border-color: #16a34a !important;
}
[data-bs-theme="dark"] #board-tbody .btn-success {
  color: #4ade80 !important;
  border-color: #16a34a !important;
}
[data-bs-theme="dark"] #board-tbody .btn-success:hover {
  background: #16a34a !important;
  color: #fff !important;
}

/* ── Done History completed column ── */
.brd-completed {
  font-size: 0.78rem; font-weight: 600;
  color: #16a34a;
}
[data-bs-theme="dark"] .brd-completed { color: #86efac; }

/* ── Empty state ── */
.brd-empty { text-align: center; padding: 3rem 1rem; color: var(--bs-secondary); }

/* ── Card footer ── */
.brd-footer {
  min-height: 0;
  border-top: none;
}

/* ── Done History rows ── */
#done-history-body .brd-table tbody tr { opacity: 1; background: color-mix(in srgb, var(--bs-success) 4%, var(--bs-body-bg)); }
#done-history-body .brd-table tbody tr:hover { background: color-mix(in srgb, var(--bs-success) 9%, var(--bs-body-bg)); }

/* ══ Legacy aliases (kept for backward compat) ══ */
.board-table-scroll { max-height: calc(100vh - 260px); overflow-y: auto; overflow-x: auto; border-radius: 0 0 8px 8px; }
.board-table { font-size: 0.82rem; border-collapse: collapse; width: 100%; margin-bottom: 0; }
.board-table thead th { position:sticky;top:0;z-index:2;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.06em;font-weight:700;color:var(--bs-secondary-color,#6c757d);white-space:nowrap;padding:0.5rem 0.7rem!important;background:var(--tblr-bg-surface,#fff);border-bottom:2px solid var(--bs-border-color)!important;box-shadow:0 1px 0 var(--bs-border-color);user-select:none; }
[data-bs-theme="dark"] .board-table thead th { background: var(--tblr-body-bg, #1a1a2e); }
.board-table td { vertical-align:middle;padding:0.5rem 0.7rem!important;border-bottom:1px solid var(--bs-border-color-translucent,rgba(0,0,0,.05));white-space:nowrap; }
.board-table td.td-summary { white-space:normal;min-width:220px; }
.board-table tbody tr { transition:background 0.1s;cursor:pointer; }
.board-table tbody tr:hover { background:var(--bs-tertiary-bg); }
.board-table tbody tr:hover .task-summary { color:var(--faya-blue,#2E75B6); }
.board-table tbody tr:last-child td { border-bottom:none; }
.board-table .badge { font-size:0.64rem!important;padding:2px 6px!important; }
.board-table td:last-child { white-space:nowrap; }
.board-table tr:has(td .badge.bg-success-lt) { opacity:0.72; }

/* ── Summary: 2-line clamp ── */
.task-summary {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-weight: 500; line-height: 1.42; word-break: break-word;
  transition: color 0.12s; max-width: 520px;
}

/* ── Jira key ── */
.jira-key {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.73rem; font-weight: 600; color: var(--faya-blue);
  display: inline-block; max-width: 95px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jira-key a { color: inherit; text-decoration: none; }
.jira-key a:hover { text-decoration: underline; }

/* ── Assignee chip ── */
.assignee-chip { font-size:0.72rem;font-weight:500;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle; }

/* ── Time badge ── */
.time-logged-badge { font-size:0.67rem;background:#e7f3ff;color:#0d6efd;border-radius:4px;padding:1px 6px;font-weight:600;white-space:nowrap; }
[data-bs-theme="dark"] .time-logged-badge { background:#0d6efd22;color:#6ea8fe; }

/* ── Copy button (legacy) ── */
.board-copy-btn { opacity:0.55;transition:opacity 0.15s; }
.board-copy-btn:hover,.board-table tbody tr:hover .board-copy-btn { opacity:1; }

/* ── Sprint badge (legacy compat) ── */
.sprint-badge { font-size:0.67rem;background:var(--bs-tertiary-bg);border:1px solid var(--bs-border-color);border-radius:4px;padding:1px 6px;font-weight:600;max-width:68px;overflow:hidden;text-overflow:ellipsis;display:inline-block; }

/* ══════════════════════════════════════
   GATE DOTS (kept for data compat)
══════════════════════════════════════ */
.gate-dots { display:flex; gap:3px; align-items:center; }
.gate-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  cursor: default; border: 1.5px solid rgba(0,0,0,.1);
}
.gate-dot.done    { border-color: transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.gate-dot.pending { background: #d1d5db !important; border-color: #9ca3af !important; }
[data-bs-theme="dark"] .gate-dot.pending { background:#374151!important; border-color:#6b7280!important; }
.coverage-bar { height:4px; border-radius:3px; background:var(--bs-border-color); overflow:hidden; }
.coverage-bar-fill { height:100%; border-radius:3px; transition:width 0.4s; }

/* ══════════════════════════════════════
   AI WORKSPACE
══════════════════════════════════════ */
.step-nav { display:flex; background:var(--bs-tertiary-bg); border-radius:10px; padding:4px; flex-wrap:wrap; width:fit-content; }
.step-nav-btn { padding:0.42rem 1rem; border:none; background:transparent; border-radius:7px; font-size:0.82rem; font-weight:600; color:var(--bs-secondary); cursor:pointer; transition:all 0.18s; white-space:nowrap; }
.step-nav-btn.active { background:var(--bs-body-bg); color:var(--faya-blue); box-shadow:0 2px 8px rgba(0,0,0,0.09); }
.step-panel { display:none; }
.step-panel.active { display:block; }

.ai-insight-card { border-radius:10px; background:linear-gradient(135deg,#2E75B610,#1B3A5C06); border:1px solid var(--faya-blue-lt); padding:1.1rem; }
[data-bs-theme="dark"] .ai-insight-card { background:linear-gradient(135deg,#2E75B618,#1B3A5C18); border-color:#2E75B640; }
.ai-insight-label { font-size:0.67rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; color:var(--faya-blue); }

.result-tabs { display:flex; border-bottom:2px solid var(--bs-border-color); margin-bottom:1rem; flex-wrap:wrap; }
.result-tab-btn { padding:0.48rem 1rem; border:none; background:transparent; font-size:0.82rem; font-weight:600; color:var(--bs-secondary); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.15s; }
.result-tab-btn.active { color:var(--faya-blue); border-bottom-color:var(--faya-blue); }
.result-tab-content { display:none; }
.result-tab-content.active { display:block; }

.test-case-card { border:1px solid var(--bs-border-color); border-radius:10px; padding:1rem; margin-bottom:0.75rem; transition:box-shadow 0.15s; }
.test-case-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.07); }
.tc-id { font-size:0.68rem; font-family:monospace; color:var(--bs-secondary); }
.tc-title { font-weight:600; font-size:0.875rem; }
.tc-steps { font-size:0.8rem; margin-top:0.4rem; padding-left:1rem; color:var(--bs-secondary); }

.coverage-check-item { display:flex; align-items:center; gap:10px; padding:0.45rem 0; border-bottom:1px solid var(--bs-border-color); font-size:0.86rem; }
.coverage-check-item:last-child { border-bottom:none; }
.check-icon { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.68rem; flex-shrink:0; }
.check-icon.covered   { background:#d1fae5; color:#065f46; }
.check-icon.uncovered { background:#fee2e2; color:#991b1b; }
[data-bs-theme="dark"] .check-icon.covered   { background:#065f4640; color:#6ee7b7; }
[data-bs-theme="dark"] .check-icon.uncovered { background:#991b1b40; color:#fca5a5; }

.jira-paste-hint { font-size:0.73rem; color:var(--bs-secondary); margin-top:3px; }
[data-bs-theme="dark"] .jira-autofill-badge { background:#065f4640; color:#6ee7b7; }
@keyframes fadeIn { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }

/* ══════════════════════════════════════
   STANDUP — v3 (screenshot-accurate)
══════════════════════════════════════ */

/* ── Sub-header row ─────────────────── */
.sd-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.sd-subheader-text {
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
}
.sd-subheader-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sd-date-nav {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bs-body-bg);
}
.sd-nav-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 32px;
  background: none; border: none; cursor: pointer;
  color: var(--bs-secondary-color);
  transition: background 0.12s, color 0.12s;
  font-size: 0.85rem;
}
.sd-nav-arrow:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.sd-date-display {
  padding: 0 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bs-body-color);
  white-space: nowrap;
  border-left: 1px solid var(--bs-border-color);
  border-right: 1px solid var(--bs-border-color);
  line-height: 32px;
  min-width: 110px;
  text-align: center;
}
.sd-share-btn {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px; background: var(--bs-body-bg);
  color: var(--bs-body-color); font-size: 0.8rem; font-weight: 500;
  cursor: pointer; transition: background 0.12s;
}
.sd-share-btn:hover { background: var(--bs-tertiary-bg); }
.sd-main-save { height: 32px !important; font-size: 0.8rem !important; border-radius: 8px !important; padding: 0 0.9rem !important; }

/* ── Layout ─────────────────────────── */
.sd-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 900px) {
  .sd-layout { grid-template-columns: 1fr; }
  .sd-hist-panel { position: static; max-height: 420px; }
}

/* ── Editor ─────────────────────────── */
.sd-editor { display: flex; flex-direction: column; gap: 0.65rem; }

/* ── Cards ──────────────────────────── */
.sd-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  overflow: hidden;
}
.sd-card:focus-within {
  border-color: #94a3b8;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

/* ── Card header row ────────────────── */
.sd-card-hdr {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.sd-hdr-ico {
  font-size: 1rem;
  color: var(--bs-secondary-color);
  flex-shrink: 0;
}
.sd-hdr-lbl {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-body-color);
}
/* Color variants */
.sd-teal  { color: #0d9488 !important; }
.sd-red   { color: #ef4444 !important; }
.sd-purple{ color: #7c3aed !important; }

/* ── Card body (attendees) ──────────── */
.sd-card-body { padding: 0.75rem 1rem; }

/* Attendee select */
.sd-attendee-select {
  width: 100%;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  font-size: 0.82rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  appearance: auto;
}
.sd-attendee-select:focus { border-color: var(--faya-blue); }

/* Attendee chip row */
.sd-chip-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 5px; min-height: 30px;
}
/* Attendee pill chip */
.sd-chip {
  display: inline-flex; align-items: center; gap: 0;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 2px 4px 2px 3px;
  font-size: 0.78rem; font-weight: 500;
  color: #334155;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: border-color .15s, box-shadow .15s;
  cursor: default;
  flex: 0 0 auto;
  white-space: nowrap;
}
.sd-chip:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
[data-bs-theme="dark"] .sd-chip {
  background: #1e2a3a; border-color: #2d4059; color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
[data-bs-theme="dark"] .sd-chip:hover { border-color: #3a5068; }

.sd-chip-avatar-wrap { margin-right: 5px; }
.sd-chip-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.58rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.sd-chip-name {
  font-size: 0.78rem; font-weight: 500; color: #1e293b;
  padding: 0 2px 0 1px;
  white-space: nowrap;
}
[data-bs-theme="dark"] .sd-chip-name { color: #e2e8f0; }
.sd-chip-x {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #94a3b8; font-size: 0.7rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; margin-left: 2px;
  transition: background .12s, color .12s;
}
.sd-chip-x:hover { background: #fee2e2; color: #dc2626; }
[data-bs-theme="dark"] .sd-chip-x:hover { background: rgba(220,38,38,.2); color: #f87171; }

.sd-add-chip-btn {
  display: inline-flex; align-items: center; gap: 3px;
  height: 28px; padding: 0 10px; border-radius: 20px;
  border: 1.5px dashed #cbd5e1;
  background: transparent; color: #94a3b8;
  font-size: 0.75rem; font-weight: 500; cursor: pointer;
  transition: all .15s;
}
.sd-add-chip-btn:hover {
  border-color: #2563eb; color: #2563eb;
  background: #eff6ff; border-style: solid;
}
[data-bs-theme="dark"] .sd-add-chip-btn { border-color: #2d4059; color: #64748b; }
[data-bs-theme="dark"] .sd-add-chip-btn:hover { border-color: #3b82f6; color: #3b82f6; background: rgba(37,99,235,.1); }

/* Copy to Today button */
.sd-copy-btn {
  display: inline-flex; align-items: center;
  padding: 0.22rem 0.65rem; border-radius: 6px;
  border: 1px solid var(--bs-border-color);
  background: transparent; color: var(--bs-secondary-color);
  font-size: 0.74rem; font-weight: 500; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.sd-copy-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }

/* ── Textarea wrap ──────────────────── */
.sd-ta-wrap { position: relative; }
.sd-ta {
  width: 100%;
  min-height: 88px;
  max-height: 320px;
  padding: 0.75rem 1rem 2rem 1rem;
  border: none;
  outline: none;
  resize: none;
  overflow-y: hidden;
  background: transparent;
  color: var(--bs-body-color);
  font-size: 0.84rem;
  line-height: 1.65;
  font-family: inherit;
  display: block;
  box-sizing: border-box;
}
.sd-ta::placeholder { color: var(--bs-secondary-color); }
.sd-ta-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0 0.85rem 0.5rem;
  position: absolute;
  bottom: 0; right: 0; left: 0;
  pointer-events: none;
}
.sd-check-ico {
  font-size: 1rem;
  color: #22c55e;
}
.sd-char-ct {
  font-size: 0.7rem;
  color: var(--bs-secondary-color);
}

/* ── Beta pill ──────────────────────── */
.sd-beta-pill {
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: 20px;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  font-size: 0.65rem; font-weight: 600;
  color: var(--bs-secondary-color);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* Generate Summary button */
.sd-gen-btn {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.75rem; border-radius: 6px;
  border: none; background: var(--faya-blue); color: #fff;
  font-size: 0.78rem; font-weight: 500; cursor: pointer;
  transition: opacity 0.15s; white-space: nowrap;
}
.sd-gen-btn:hover { opacity: 0.88; }
.sd-gen-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* AI Summary body */
.sd-ai-body {
  padding: 0.85rem 1rem;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--bs-body-color);
  border-top: 1px solid var(--bs-border-color);
}
.sd-ai-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}
.sd-ai-note {
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
  font-style: italic;
  flex: 1;
}
.sd-ai-actions { display: flex; gap: 0.25rem; }
.sd-ai-ico-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
  color: var(--bs-secondary-color); cursor: pointer; font-size: 0.85rem;
  transition: all 0.12s;
}
.sd-ai-ico-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.sd-ai-empty {
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  font-style: italic;
  border-top: 1px solid var(--bs-border-color);
}

/* ── History panel ──────────────────── */
.sd-hist-panel {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  max-height: calc(100vh - var(--topbar-h) - 32px);
  display: flex;
  flex-direction: column;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  overflow: hidden;
}
.sd-hist-hdr {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  flex-shrink: 0;
}
.sd-hist-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bs-body-color);
}
.sd-hist-search-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--bs-border-color);
  flex-shrink: 0;
}
.sd-hist-search-wrap {
  position: relative;
  flex: 1;
}
.sd-hist-s-ico {
  position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
  font-size: 0.8rem; color: var(--bs-secondary-color); pointer-events: none;
}
.sd-hist-search {
  width: 100%; border: 1px solid var(--bs-border-color);
  border-radius: 7px; padding: 0.28rem 0.5rem 0.28rem 1.8rem;
  font-size: 0.78rem; background: var(--bs-body-bg);
  color: var(--bs-body-color); outline: none; transition: border-color 0.15s;
}
.sd-hist-search:focus { border-color: var(--faya-blue); }
.sd-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 7px;
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
  color: var(--bs-secondary-color); cursor: pointer; font-size: 0.9rem;
  transition: all 0.12s; flex-shrink: 0;
}
.sd-filter-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }

.sd-hist-list {
  overflow-y: auto; flex: 1;
}
.sd-hist-list::-webkit-scrollbar { width: 4px; }
.sd-hist-list::-webkit-scrollbar-track { background: transparent; }
.sd-hist-list::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 4px; }

/* History item */
.sd-hi {
  display: flex;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
}
.sd-hi:last-child { border-bottom: none; }
.sd-hi:hover { background: var(--bs-tertiary-bg); }
.sd-hi.active-date { background: rgba(46,117,182,0.05); }

.sd-hi-dot-col { padding-top: 4px; flex-shrink: 0; }
.sd-hi-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #cbd5e1;
  display: block;
}
.sd-hi-dot.today-dot { background: var(--faya-blue); }

.sd-hi-body { flex: 1; min-width: 0; }
.sd-hi-row1 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-bottom: 2px;
}
.sd-hi-date {
  font-size: 0.82rem; font-weight: 700; color: var(--bs-body-color);
}
.sd-hi-today-badge {
  font-size: 0.65rem; font-weight: 700;
  background: rgba(46,117,182,0.12); color: var(--faya-blue);
  border-radius: 10px; padding: 1px 7px;
  white-space: nowrap;
}
.sd-hi-meta {
  font-size: 0.74rem; color: var(--bs-secondary-color);
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 3px;
}
.sd-hi-author { font-weight: 500; }
.sd-hi-members { white-space: nowrap; }
.sd-hi-preview {
  font-size: 0.76rem; color: var(--bs-secondary-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.sd-hi-blocker {
  font-size: 0.73rem; color: #ef4444; font-weight: 500;
  display: flex; align-items: center; gap: 3px;
}
.sd-hi-arrow {
  color: var(--bs-secondary-color); font-size: 0.8rem;
  display: flex; align-items: flex-start; padding-top: 3px; flex-shrink: 0;
}

/* History footer */
.sd-hist-foot {
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--bs-border-color);
  flex-shrink: 0;
}
.sd-viewall-btn {
  width: 100%; padding: 0.4rem;
  border: 1px solid var(--faya-blue); border-radius: 8px;
  background: transparent; color: var(--faya-blue);
  font-size: 0.8rem; font-weight: 500; cursor: pointer;
  transition: background 0.12s;
}
.sd-viewall-btn:hover { background: rgba(46,117,182,0.06); }

/* ── Tips bar ────────────────────────── */
.sd-tips-bar {
  margin-top: 1rem;
  padding: 0.55rem 1rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #78716c;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
}
[data-bs-theme="dark"] .sd-tips-bar {
  background: rgba(254,243,199,0.06);
  border-color: rgba(253,230,138,0.2);
  color: var(--bs-secondary-color);
}
.sd-autosave-txt {
  font-weight: 700;
  color: #0d9488;
}

/* Autosave state classes (used by JS) */
.sd-autosave-txt.saving { color: var(--bs-secondary-color); }
.sd-autosave-txt.saved  { color: #0d9488; }
.sd-autosave-txt.error  { color: #ef4444; }

/* Export shorthands */
.export-btn-teams { background:#464EB8!important; border-color:#464EB8!important; color:#fff!important; }
.export-btn-slack  { background:#4A154B!important; border-color:#4A154B!important; color:#fff!important; }

/* Legacy alias for dashboard standup preview */
.standup-section-label { display:block; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.07em; font-weight:700; color:var(--faya-blue); margin-bottom:0.3rem; }
/* Legacy attendee-badge kept for dashboard compat */
.attendee-badge { display:inline-flex; align-items:center; gap:3px; background:var(--bs-tertiary-bg); border:1px solid var(--bs-border-color); border-radius:20px; padding:2px 8px 2px 9px; font-size:0.74rem; font-weight:600; color:var(--bs-body-color); }
.attendee-badge .remove-btn { background:none; border:none; padding:0; cursor:pointer; color:var(--bs-secondary-color); line-height:1; font-size:0.8rem; }

/* ══════════════════════════════════════
   OFFICE HOURS MINUTES  (oh-* system)
══════════════════════════════════════ */

/* ── Design tokens scoped to OH page ── */
#page-officehours {
  --oh-border:      rgba(0,0,0,0.10);
  --oh-border-str:  rgba(0,0,0,0.14);
  --oh-surface:     #f8f9fb;
  --oh-card-bg:     #ffffff;
  --oh-ctrl-h:      34px;
}
[data-bs-theme="dark"] #page-officehours {
  --oh-border:      rgba(255,255,255,0.10);
  --oh-border-str:  rgba(255,255,255,0.16);
  --oh-surface:     rgba(255,255,255,0.03);
  --oh-card-bg:     #1e2130;
}

/* ── Page background tint (same pattern as board) ── */
#page-officehours.active {
  background: #f1f3f5;
  box-shadow: 0 0 0 1rem #f1f3f5;
  padding-bottom: 2rem;
  min-height: calc(100vh - var(--topbar-h));
}
[data-bs-theme="dark"] #page-officehours.active {
  background: #13151f;
  box-shadow: 0 0 0 1rem #13151f;
}

/* ── Cards override for OH page — white surface ── */
#page-officehours .card {
  background: var(--oh-card-bg);
  border: 1px solid var(--oh-border-str);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
}
[data-bs-theme="dark"] #page-officehours .card {
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
}

/* ── Page header ── */
.oh-page-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.oh-page-sub { font-size: 0.8rem; color: var(--bs-secondary-color); }

/* ── Legacy nav (kept for compat) ── */
.oh-date-nav { display: flex; align-items: center; gap: 0.35rem; }
.oh-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1.5px solid var(--oh-border-str); border-radius: 7px;
  background: var(--oh-card-bg); cursor: pointer;
  color: var(--bs-secondary-color); transition: background 0.12s, border-color 0.12s;
}
.oh-nav-btn:hover { background: var(--oh-surface); border-color: var(--faya-blue); color: var(--faya-blue); }

/* ── NEW Date navigation bar ── */
.oh-nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
  background: var(--oh-card-bg);
  border: 1px solid var(--oh-border-str);
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* Quick action buttons group */
.oh-quick-btns { display: flex; align-items: center; gap: 0.35rem; }
.oh-qbtn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 0.75rem;
  font-size: 0.78rem; font-weight: 600; font-family: inherit;
  border: 1.5px solid var(--oh-border-str); border-radius: 7px;
  background: var(--oh-card-bg); color: var(--bs-body-color);
  cursor: pointer; white-space: nowrap;
  transition: all .13s;
}
.oh-qbtn i { font-size: 0.8rem; }
.oh-qbtn:hover { border-color: var(--faya-blue); color: var(--faya-blue); background: rgba(46,117,182,.05); }
.oh-qbtn--today { background: var(--faya-blue); color: #fff !important; border-color: var(--faya-blue); }
.oh-qbtn--today:hover { background: var(--faya-navy); border-color: var(--faya-navy); }
.oh-qbtn--history { border-style: dashed; }
.oh-qbtn--history:hover { border-style: solid; }

/* Center: date picker + status badge */
.oh-date-center {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1; justify-content: center;
}
.oh-date-display {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0 0.65rem;
  border: 1.5px solid var(--oh-border-str); border-radius: 8px;
  height: var(--oh-ctrl-h); background: var(--oh-card-bg);
  transition: border-color 0.15s; cursor: pointer;
}
.oh-date-display:hover { border-color: #8a96a8; }
.oh-date-display:focus-within { border-color: var(--faya-blue); box-shadow: 0 0 0 3px rgba(46,117,182,.1); }
.oh-date-inp {
  border: none; outline: none; background: transparent;
  font-size: 0.82rem; font-weight: 600; color: var(--bs-body-color);
  width: 130px; cursor: pointer;
}
.oh-date-ico   { font-size: 0.85rem; color: var(--bs-secondary-color); pointer-events: none; }
.oh-date-label { font-size: 0.82rem; font-weight: 600; color: var(--bs-body-color); min-width: 155px; white-space: nowrap; }

/* Status badge */
.oh-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.7rem; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  white-space: nowrap;
}
.oh-status-badge i { font-size: 0.72rem; }
.oh-status--completed { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.oh-status--draft     { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.oh-status--none      { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border: 1px solid var(--oh-border-str); }
[data-bs-theme="dark"] .oh-status--completed { background: #052e16; color: #6ee7b7; border-color: #14532d; }
[data-bs-theme="dark"] .oh-status--draft     { background: #292000; color: #fde68a; border-color: #3d2e00; }

/* History dropdown */
.oh-history-wrap { position: relative; }
.oh-history-arrow { transition: transform .15s; font-size: 0.7rem; }
.oh-history-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
  width: 380px; background: var(--oh-card-bg);
  border: 1.5px solid var(--oh-border-str); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  overflow: hidden;
}
.oh-history-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.85rem;
  font-size: 0.75rem; font-weight: 700; color: var(--bs-body-color);
  background: var(--oh-surface); border-bottom: 1px solid var(--oh-border-str);
}
.oh-history-count { font-size: 0.68rem; color: var(--bs-secondary-color); font-weight: 500; }
.oh-history-list  { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
.oh-history-empty { padding: 1rem; font-size: 0.78rem; color: var(--bs-secondary-color); text-align: center; font-style: italic; }

/* History items */
.oh-hist-item {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--oh-border-str);
  cursor: pointer; transition: background .12s;
}
.oh-hist-item:last-child { border-bottom: none; }
.oh-hist-item:hover { background: rgba(46,117,182,.05); }
.oh-hist-item--active { background: rgba(46,117,182,.07) !important; }

.oh-hist-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
}
.oh-hist-dot--completed { background: #10b981; }
.oh-hist-dot--none      { background: #d1d5db; }

.oh-hist-body { flex: 1; min-width: 0; }
.oh-hist-date { font-size: 0.8rem; font-weight: 600; color: var(--bs-body-color); }
.oh-hist-meta { font-size: 0.68rem; color: var(--bs-secondary-color); margin-top: 2px; }
.oh-hist-preview    { color: var(--bs-secondary-color); }
.oh-hist-empty-note { font-style: italic; }

.oh-hist-status-chip {
  font-size: 0.63rem; font-weight: 700; padding: 2px 7px;
  border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
.oh-hist-chip--done { background: #dcfce7; color: #15803d; }
.oh-hist-chip--none { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .oh-hist-chip--done { background: #052e16; color: #6ee7b7; }
[data-bs-theme="dark"] .oh-hist-item--active { background: rgba(46,117,182,.12) !important; }

/* ── Typography ── */
.oh-card-title  { font-size: 0.84rem; font-weight: 700; color: var(--bs-body-color); line-height: 1.3; }
.oh-card-sub    { font-size: 0.71rem; color: var(--bs-secondary-color); margin-top: 2px; line-height: 1.4; }
.oh-detail-lbl  { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); display: flex; align-items: center; margin-bottom: 4px; }
.oh-detail-val  { font-size: 0.84rem; font-weight: 500; color: var(--bs-body-color); }

/* ── Meeting Details card ── */
#page-officehours .card .card-body { padding: 1rem; }

/* ── Attendee selector within OH ── */
#page-officehours .sd-attendee-select {
  width: 100%; height: var(--oh-ctrl-h);
  border: 1.5px solid var(--oh-border-str); border-radius: 8px;
  padding: 0 0.7rem; font-size: 0.83rem;
  background: var(--oh-surface); color: var(--bs-body-color);
  outline: none; transition: border-color 0.15s, background 0.15s;
  appearance: auto; cursor: pointer;
}
#page-officehours .sd-attendee-select:focus {
  border-color: var(--faya-blue);
  background: var(--oh-card-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--faya-blue) 14%, transparent);
}
#page-officehours .sd-chip-row { margin-top: 0.5rem; min-height: 30px; }

/* ── Tab bar ── */
.oh-tabs-bar {
  display: flex;
  border-bottom: 1.5px solid var(--oh-border-str);
  background: var(--oh-surface);
  padding: 0 0.5rem;
}
.oh-tab {
  padding: 0.65rem 1rem; border: none; background: none; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; color: var(--bs-secondary-color);
  border-bottom: 2px solid transparent; margin-bottom: -1.5px;
  transition: color 0.12s, border-color 0.12s;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.oh-tab:hover  { color: var(--bs-body-color); }
.oh-tab.active {
  color: var(--faya-blue); border-bottom-color: var(--faya-blue);
  background: color-mix(in srgb, var(--faya-blue) 4%, transparent);
  border-radius: 6px 6px 0 0;
}
.oh-panel        { display: none; }
.oh-panel.active { display: block; }
.oh-tab-pad      { padding: 1.25rem 1.25rem 1.5rem; }

/* ── Editor column ── */
.oh-editor-col {
  border-right: 1.5px solid var(--oh-border-str);
  display: flex; flex-direction: column;
}
.oh-editor-hdr { padding: 0.85rem 1rem 0.5rem; }

/* ── Formatting toolbar ── */
.oh-toolbar-bar {
  display: flex; align-items: center; gap: 3px;
  padding: 0.32rem 0.85rem;
  border-top: 1px solid var(--oh-border);
  border-bottom: 1px solid var(--oh-border);
  background: var(--oh-surface);
}
.oh-tool {
  width: 28px; height: 28px; border: 1px solid transparent; border-radius: 5px;
  background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.82rem; color: var(--bs-body-color);
  transition: background 0.12s, border-color 0.12s;
}
.oh-tool:hover { background: var(--bs-tertiary-bg); border-color: var(--oh-border-str); }

/* ── Rich text editor area ── */
.oh-editor {
  min-height: 220px; max-height: 420px; overflow-y: auto;
  padding: 0.9rem 1rem; font-size: 0.85rem; line-height: 1.75;
  outline: none; flex: 1; color: var(--bs-body-color);
  background: var(--oh-card-bg);
  transition: background 0.15s;
}
.oh-editor:focus { background: var(--oh-card-bg); }
.oh-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--bs-secondary-color); opacity: 0.5; pointer-events: none;
  font-style: italic;
}
.oh-editor ul, .oh-editor ol { padding-left: 1.5rem; margin: 0.3rem 0; }
.oh-editor li { margin: 0.15rem 0; }
.oh-editor::-webkit-scrollbar { width: 4px; }
.oh-editor::-webkit-scrollbar-thumb { background: var(--oh-border-str); border-radius: 2px; }

/* ── Editor footer ── */
.oh-editor-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 1rem; border-top: 1px solid var(--oh-border);
  background: var(--oh-surface);
}
.oh-save-txt { font-size: 0.73rem; color: var(--bs-secondary-color); }

/* ── Side panel ── */
.oh-side-col {
  background: color-mix(in srgb, var(--oh-surface) 80%, var(--oh-card-bg));
  display: flex; flex-direction: column;
}
.oh-side-card {
  padding: 1rem; border-bottom: 1px solid var(--oh-border);
}
.oh-side-card:last-child { border-bottom: none; flex: 1; }
.oh-side-card-hdr {
  display: flex; align-items: flex-start; gap: 0.55rem;
  margin-bottom: 0.55rem;
}
.oh-side-content {
  font-size: 0.81rem; line-height: 1.65;
  max-height: 145px; overflow-y: auto;
  color: var(--bs-body-color); white-space: pre-wrap;
}
.oh-side-content::-webkit-scrollbar { width: 3px; }
.oh-side-content::-webkit-scrollbar-thumb { background: var(--oh-border-str); border-radius: 2px; }

/* ── Regenerate button ── */
.oh-regen {
  display: inline-flex; align-items: center;
  margin-top: 0.65rem; padding: 0.25rem 0.75rem;
  border: 1.5px solid var(--oh-border-str); border-radius: 7px;
  background: var(--oh-card-bg); font-size: 0.74rem; font-weight: 500;
  color: var(--bs-body-color); cursor: pointer;
  transition: background 0.12s, border-color 0.12s; white-space: nowrap;
}
.oh-regen:hover { background: var(--oh-surface); border-color: var(--faya-blue); color: var(--faya-blue); }

/* ── Full-tab content areas ── */
.oh-full-text {
  font-size: 0.85rem; line-height: 1.75; white-space: pre-wrap;
  min-height: 120px; color: var(--bs-body-color);
}
.oh-email-box {
  font-size: 0.84rem; line-height: 1.75; white-space: pre-wrap;
  background: var(--oh-surface);
  border: 1.5px solid var(--oh-border-str); border-radius: 8px;
  padding: 1rem; min-height: 140px; color: var(--bs-body-color);
}

/* ── History table ── */
#page-officehours .board-table thead th { background: var(--oh-surface); }
#page-officehours .board-table tbody tr:hover { background: color-mix(in srgb, var(--faya-blue) 4%, var(--oh-card-bg)); }
.oh-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; color: #fff;
  margin-right: 2px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.3);
}

/* ══════════════════════════════════════
   STANDUP v2  (sd2-* system)
══════════════════════════════════════ */

/* Page header */
.sd2-page-hdr  { margin-bottom: 0.75rem; }
.sd2-page-title{ font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--bs-body-color); }
.sd2-page-sub  { font-size: 0.8rem; color: var(--bs-secondary-color); margin: 2px 0 0; }

/* ── Shared border token — stronger than default bs-border ── */
:root {
  --sd-border:       rgba(0,0,0,0.18);
  --sd-border-hover: rgba(0,0,0,0.32);
  --sd-ctrl-bg:      #f8f9fb;
  --sd-ctrl-h:       36px;
}
[data-bs-theme="dark"] {
  --sd-border:       rgba(255,255,255,0.22);
  --sd-border-hover: rgba(255,255,255,0.38);
  --sd-ctrl-bg:      rgba(255,255,255,0.04);
}

/* Toolbar */
.sd2-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: var(--bs-body-bg);
  border: 1.5px solid var(--sd-border);
  border-radius: 10px;
  margin-bottom: 1rem;
}
.sd2-toolbar-fields { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.sd2-toolbar-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sd2-field-grp { display: flex; flex-direction: column; gap: 4px; }
.sd2-field-lbl {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--bs-secondary-color); margin: 0;
  padding-left: 2px;
}

/* ── Shared control style ── */
.sd2-ctrl {
  height: var(--sd-ctrl-h);
  border: 1.5px solid var(--sd-border);
  border-radius: 8px;
  padding: 0 0.75rem;
  font-size: 0.83rem;
  background: var(--sd-ctrl-bg);
  color: var(--bs-body-color);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  min-width: 120px;
  appearance: auto;
}
.sd2-ctrl:hover:not(:focus) { border-color: var(--sd-border-hover); background: var(--bs-body-bg); }
.sd2-ctrl:focus {
  border-color: var(--faya-blue);
  background: var(--bs-body-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--faya-blue) 16%, transparent);
}
input[type="date"].sd2-ctrl { padding: 0 0.55rem; min-width: 150px; cursor: pointer; }

/* Two-column layout */
.sd2-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 860px) {
  .sd2-layout { grid-template-columns: 1fr; }
  .sd2-sidebar { display: none; }
}

/* Left sidebar */
.sd2-sidebar {
  background: var(--bs-body-bg);
  border: 1.5px solid var(--sd-border);
  border-radius: 10px;
  overflow: hidden;
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
  max-height: calc(100vh - var(--topbar-h) - 80px);
  display: flex; flex-direction: column;
}
.sd2-sidebar-top {
  padding: 0.65rem 0.75rem;
  border-bottom: 1.5px solid var(--sd-border);
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 5px;
  background: var(--sd-ctrl-bg);
}
/* Give the month filter inside sidebar the same ctrl treatment */
.sd2-sidebar-top .sd2-ctrl { width: 100%; min-width: 0; }
.sd2-date-list {
  overflow-y: auto; flex: 1;
  scrollbar-width: thin;
}
.sd2-date-list::-webkit-scrollbar { width: 4px; }
.sd2-date-list::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 4px; }

/* Date list items */
.sd2-date-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--sd-border);
  cursor: pointer; transition: background 0.1s;
  text-decoration: none;
}
.sd2-date-item:last-child { border-bottom: none; }
.sd2-date-item:hover { background: var(--bs-tertiary-bg); }
.sd2-date-item.active { background: color-mix(in srgb, var(--faya-blue) 8%, var(--bs-body-bg)); }
.sd2-date-item.active .sd2-di-date { color: var(--faya-blue); font-weight: 700; }
.sd2-di-date { font-size: 0.82rem; font-weight: 500; color: var(--bs-body-color); }
.sd2-di-short { font-size: 0.73rem; color: var(--bs-secondary-color); white-space: nowrap; }
.sd2-di-blocker { font-size: 0.68rem; color: #ef4444; display: flex; align-items: center; gap: 2px; margin-top: 1px; }

/* Main editor area */
.sd2-main {
  background: var(--bs-body-bg);
  border: 1.5px solid var(--sd-border);
  border-radius: 10px;
  overflow: hidden;
}

/* Tab bar */
.sd2-tabs-bar {
  display: flex; align-items: center; gap: 0;
  padding: 0 0.75rem;
  border-bottom: 1.5px solid var(--sd-border);
  background: var(--sd-ctrl-bg);
  flex-wrap: wrap;
  min-height: 42px;
}
.sd2-tab {
  padding: 0.55rem 0.9rem;
  border: none; background: none; cursor: pointer;
  font-size: 0.82rem; font-weight: 600;
  color: var(--bs-secondary-color);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
  display: inline-flex; align-items: center;
}
.sd2-tab:hover { color: var(--bs-body-color); }
.sd2-tab.active { color: var(--faya-blue); border-bottom-color: var(--faya-blue); }

/* Info bar */
.sd2-info-bar {
  display: flex; align-items: center; gap: 1rem;
  margin-left: 0.75rem;
  font-size: 0.74rem; color: var(--bs-secondary-color);
  flex-wrap: wrap;
}
.sd2-info-bar strong { color: var(--bs-body-color); font-weight: 600; }

/* Panels */
.sd2-panel { display: none; }
.sd2-panel.active { display: block; }

/* Attendees row inside editor */
.sd2-attendees-wrap {
  padding: 0.65rem 0.85rem;
  border-bottom: 1.5px solid var(--sd-border);
  background: color-mix(in srgb, var(--faya-blue) 4%, var(--bs-body-bg));
}
/* Attendee select inside standup editor — match sd2-ctrl style */
.sd2-attendees-wrap .sd-attendee-select {
  height: var(--sd-ctrl-h);
  border: 1.5px solid var(--sd-border);
  border-radius: 8px;
  padding: 0 0.75rem;
  font-size: 0.83rem;
  background: var(--sd-ctrl-bg);
  color: var(--bs-body-color);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  width: 100%;
  appearance: auto;
  cursor: pointer;
}
.sd2-attendees-wrap .sd-attendee-select:hover:not(:focus) {
  border-color: var(--sd-border-hover);
  background: var(--bs-body-bg);
}
.sd2-attendees-wrap .sd-attendee-select:focus {
  border-color: var(--faya-blue);
  background: var(--bs-body-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--faya-blue) 16%, transparent);
}

/* Section blocks */
.sd2-section {
  border-bottom: 1px solid var(--sd-border);
}
.sd2-section:last-of-type { border-bottom: none; }

.sd2-section-hdr {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 0.85rem 0.3rem;
}
.sd2-ico { font-size: 0.95rem; flex-shrink: 0; }
.sd2-section-lbl {
  font-size: 0.65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--bs-secondary-color);
}

/* Copy to Today button */
.sd2-copy-today-btn {
  display: inline-flex; align-items: center;
  padding: 0.18rem 0.6rem; border-radius: 6px;
  border: 1px solid var(--bs-border-color);
  background: transparent; color: var(--bs-secondary-color);
  font-size: 0.73rem; font-weight: 500; cursor: pointer;
  transition: all 0.12s; white-space: nowrap;
}
.sd2-copy-today-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border-color: var(--faya-blue); }

/* Textarea override inside sd2 sections */
.sd2-section .sd-ta-wrap { padding: 0.1rem 0.85rem 0.25rem; }
.sd2-section .sd-ta {
  min-height: 80px; max-height: 400px; overflow-y: auto;
  border: 1.5px solid var(--sd-border);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  background: var(--sd-ctrl-bg);
  color: var(--bs-body-color);
  font-size: 0.84rem; line-height: 1.65;
  resize: none;
  width: 100%;
  box-sizing: border-box;
  display: block;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.sd2-section .sd-ta:hover:not(:focus) {
  border-color: var(--sd-border-hover);
  background: var(--bs-body-bg);
}
.sd2-section .sd-ta:focus {
  border-color: var(--faya-blue);
  background: var(--bs-body-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--faya-blue) 14%, transparent);
  outline: none;
}
.sd2-section .sd-ta::placeholder { color: var(--bs-secondary-color); opacity: 0.75; }
.sd2-section .sd-ta-foot {
  position: static; padding: 2px 2px 0.35rem;
  display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
}

/* Preview area */
.sd2-preview { padding: 0; min-height: 200px; }

/* ── Standup Preview — enhanced layout ── */
.sd-pv-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4rem 1rem; gap: 8px;
  color: var(--bs-secondary-color); font-size: 0.85rem; text-align: center;
}
.sd-pv-empty .ti { font-size: 2rem; opacity: .3; }

/* Document wrapper */
.sd-pv-doc {
  display: flex; flex-direction: column; gap: 0;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 10px; overflow: hidden;
}

/* Doc header */
.sd-pv-doc-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; gap: 12px;
  background: var(--faya-navy, #1e3a5f); color: #fff;
}
.sd-pv-doc-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.95rem; font-weight: 700; letter-spacing: .01em;
}
.sd-pv-doc-ico { font-size: 1rem; opacity: .85; }
.sd-pv-doc-date { font-size: 0.8rem; opacity: .75; font-weight: 500; }

/* Attendees bar */
.sd-pv-attendees-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.sd-pv-att-lbl {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--bs-secondary-color);
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.sd-pv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sd-pv-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 20px; padding: 2px 9px 2px 3px;
  font-size: 0.78rem; font-weight: 500;
}
.sd-pv-chip-av {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; color: #fff;
}
.sd-pv-chip-img { object-fit: cover; }
.sd-pv-no-attendees { font-size: 0.78rem; color: var(--bs-secondary-color); font-style: italic; }

/* Sections */
.sd-pv-section {
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--bs-border-color);
}
.sd-pv-section:last-child { border-bottom: none; }
.sd-pv-section--teal { border-left-color: #0d9488; }
.sd-pv-section--blue { border-left-color: #2563eb; }
.sd-pv-section--red  { border-left-color: #ef4444; }
.sd-pv-section--purple { border-left-color: #7c3aed; }

.sd-pv-section-hdr {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 18px 6px; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}
.sd-pv-section--teal  .sd-pv-section-hdr { color: #0d9488; }
.sd-pv-section--blue  .sd-pv-section-hdr { color: #2563eb; }
.sd-pv-section--red   .sd-pv-section-hdr { color: #ef4444; }
.sd-pv-section--purple .sd-pv-section-hdr { color: #7c3aed; }

.sd-pv-body {
  padding: 4px 18px 14px 18px;
  font-size: 0.84rem; line-height: 1.75; color: var(--bs-body-color);
}
.sd-pv-line { margin-bottom: 3px; }

/* Smart parsed content */
.sd-pv-list { margin: 4px 0 4px 4px; padding-left: 18px; list-style: none; }
.sd-pv-item {
  position: relative; padding-left: 14px; margin-bottom: 4px; line-height: 1.6;
}
.sd-pv-item::before {
  content: '•'; position: absolute; left: 0; color: var(--bs-secondary-color);
}
.sd-pv-sub { padding-left: 26px; font-size: 0.81rem; opacity: .85; }
.sd-pv-sub::before { content: '◦'; left: 12px; }
.sd-pv-person-hdr {
  font-weight: 700; font-size: 0.83rem; color: var(--bs-body-color);
  margin: 8px 0 3px; padding-bottom: 3px;
  border-bottom: 1px dashed var(--bs-border-color);
}
.sd-pv-person {
  display: flex; gap: 6px; margin-bottom: 3px; font-size: 0.83rem;
}
.sd-pv-person-name { font-weight: 600; color: var(--faya-blue); flex-shrink: 0; }
.sd-pv-none { color: var(--bs-secondary-color); font-style: italic; font-size: 0.8rem; }

/* No blockers */
.sd-pv-no-blockers {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px; font-size: 0.82rem;
  color: #059669; border-bottom: 1px solid var(--bs-border-color);
}
.sd-pv-no-blockers:last-child { border-bottom: none; }

/* AI summary */
.sd-pv-ai {
  font-style: italic;
  background: color-mix(in srgb, #7c3aed 5%, var(--bs-body-bg));
  border-radius: 6px; padding: 8px 12px !important; margin-bottom: 4px;
}

/* Dark mode */
[data-bs-theme="dark"] .sd-pv-doc-hdr { background: #0f2033; }
[data-bs-theme="dark"] .sd-pv-doc { border-color: #2e3d52; }

/* Tips bar */
.sd2-tips-bar {
  display: flex; align-items: center; gap: 0.2rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.74rem; color: var(--bs-secondary-color);
  background: #fffbeb; border-top: 1px solid #fde68a;
  flex-wrap: wrap;
}
[data-bs-theme="dark"] .sd2-tips-bar {
  background: rgba(254,243,199,0.05); border-color: rgba(253,230,138,0.18);
}

/* ══════════════════════════════════════
   KNOWLEDGE HUB
══════════════════════════════════════ */

/* ── toolbar ──────────────────────────── */
.kb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--tblr-bg-surface-secondary, #f8f9fa);
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
}
.kb-toolbar-left  { display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem; flex:1 1 auto; }
.kb-toolbar-right { display:flex; align-items:center; gap:0.4rem; flex-shrink:0; }
.kb-toolbar .form-control, .kb-toolbar .form-select {
  height: 32px; font-size: 0.83rem; padding: 0 0.6rem; min-width: 0;
}
.kb-toolbar-left .form-control { min-width: 160px; flex: 1 1 160px; }
.kb-toolbar-left .form-select  { min-width: 130px; }
.kb-toolbar .btn { height:32px; font-size:0.83rem; padding:0 0.6rem; display:flex; align-items:center; gap:0.3rem; white-space:nowrap; }

/* ── drag-over overlay ────────────────── */
.kb-drop-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(46,117,182,.18);
  backdrop-filter: blur(2px);
  border: 4px dashed var(--faya-blue, #2E75B6);
  border-radius: 16px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 1rem;
  pointer-events: all;
}
.kb-drop-overlay.active { display: flex; }
.kb-drop-overlay .drop-msg { font-size: 1.6rem; font-weight:700; color: var(--faya-blue, #2E75B6); }

/* ── stats bar ────────────────────────── */
.kb-stats-bar { display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; }
.kb-stat-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.65rem; border-radius: 20px;
  font-size: 0.78rem; cursor: pointer; transition: opacity .15s;
  user-select: none;
}
.kb-stat-chip:hover { opacity:.75; }
.kb-stat-chip strong { font-weight:700; }
.kb-stat-all { border:1px solid var(--bs-border-color)!important; }

/* ── grid view ────────────────────────── */
.kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
/* ── list view ────────────────────────── */
.kb-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kb-list .kb-card {
  flex-direction: row;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  gap: 0.75rem;
}
.kb-list .kb-card-body { flex:1; min-width:0; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.kb-list .kb-card-preview { display:none; }
.kb-list .kb-card-tags { display:none; }
.kb-list .kb-card-title { flex:1 1 180px; font-size:0.88rem; }
.kb-list .kb-card-meta  { flex-shrink:0; }

/* ── card ─────────────────────────────── */
.kb-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 1rem;
  gap: 0.6rem;
  transition: box-shadow .15s, border-color .15s;
  background: var(--tblr-bg-surface, #fff);
  position: relative;
}
.kb-card:hover {
  box-shadow: 0 3px 14px rgba(0,0,0,.08);
  border-color: var(--faya-blue, #2E75B6);
  cursor: default;
}
.kb-card-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.kb-card-body { display:flex; flex-direction:column; gap:0.3rem; min-width:0; flex:1; }
.kb-card-title {
  font-size: 0.88rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.kb-card-meta { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; }
.kb-card-preview {
  font-size: 0.78rem; color: var(--bs-secondary-color, #6c757d);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.45;
}
.kb-card-tags { display:flex; flex-wrap:wrap; gap:0.2rem; margin-top:0.1rem; }
.kb-card-actions {
  display: flex; align-items: center; gap: 0.25rem;
  opacity: 0; transition: opacity .15s;
  flex-shrink: 0;
}
.kb-card:hover .kb-card-actions { opacity:1; }
/* always show in list mode */
.kb-list .kb-card-actions { opacity:1; }

/* ── empty state ──────────────────────── */
.kb-empty { display:flex; align-items:center; justify-content:center; min-height:220px; }

/* ── dark mode tweaks ─────────────────── */
[data-bs-theme="dark"] .kb-card { background: var(--tblr-body-bg); }
[data-bs-theme="dark"] .kb-toolbar { background: var(--tblr-body-bg); }
[data-bs-theme="dark"] .kb-card:hover { box-shadow: 0 3px 14px rgba(0,0,0,.25); }

/* legacy compat (keep dropzone for any other uses) */
.dropzone { border:2px dashed var(--bs-border-color); border-radius:12px; padding:2rem; text-align:center; transition:all 0.2s; cursor:pointer; }
.dropzone:hover,.dropzone.drag-over { border-color:var(--faya-blue); background:var(--faya-blue-lt); }
[data-bs-theme="dark"] .dropzone:hover,[data-bs-theme="dark"] .dropzone.drag-over { background:#2E75B618; }

/* ══════════════════════════════════════
   DISCUSS
══════════════════════════════════════ */
.disc-status-open     { color:#0d6efd; font-weight:600; }
.disc-status-resolved { color:#198754; font-weight:600; }
.disc-status-deferred { color:#6c757d; font-weight:600; }

/* ══════════════════════════════════════
   POINTS TO DISCUSS — v3 polished
══════════════════════════════════════ */

/* ── Page header ─────────────────────── */
.dc-page-hdr   { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1rem; margin-top:0; }
.dc-page-title { font-size:1.18rem; font-weight:800; letter-spacing:-0.02em; color:var(--bs-body-color); margin:0 0 3px; }
.dc-page-sub   { font-size:0.78rem; color:var(--bs-secondary-color); margin:0; }

/* Remove top whitespace from discuss and settings page-sections */
#page-discuss  { margin-top: -1rem; }
#page-settings { margin-top: -0.75rem; }

/* Give sadmin-layout a definite height so the flex chain resolves:
   sadmin-content → sadmin-panel → um-layout all use flex:1,
   which only works when the outermost container has a concrete height. */
#page-settings .sadmin-layout {
  height: calc(100vh - var(--topbar-h) - 2.5rem);
}

/* ── Toolbar ─────────────────────────── */
.dc-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:0.6rem; margin-bottom:0.9rem; flex-wrap:wrap;
}
.dc-toolbar-left { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }

/* Search */
.dc-search-wrap { position:relative; display:flex; align-items:center; }
.dc-search-ico  { position:absolute; left:9px; color:var(--bs-secondary-color); font-size:0.8rem; pointer-events:none; z-index:1; }
.dc-search-input {
  height:36px; padding:0 0.75rem 0 2.1rem; font-size:0.82rem;
  border:1.5px solid #b8c2d0; border-radius:8px;
  background:#fff; color:var(--bs-body-color);
  outline:none; width:230px; transition:border-color .15s, box-shadow .15s;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.dc-search-input::placeholder { color:#9aa3af; }
.dc-search-input:hover  { border-color:#8a96a8; }
.dc-search-input:focus  { border-color:var(--faya-blue); box-shadow:0 0 0 3px rgba(46,117,182,.12); }
[data-bs-theme="dark"] .dc-search-input {
  background:#1e2a3a; border-color:#3a4d66; color:var(--bs-body-color);
}
[data-bs-theme="dark"] .dc-search-input:hover  { border-color:#5a7090; }

/* Filter dropdowns */
.dc-filter-sel {
  height:36px; padding:0 0.7rem; font-size:0.82rem;
  border:1.5px solid #b8c2d0; border-radius:8px;
  background:#fff; color:var(--bs-body-color);
  cursor:pointer; outline:none; min-width:130px;
  transition:border-color .15s;
  appearance:auto;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.dc-filter-sel:hover { border-color:#8a96a8; }
.dc-filter-sel:focus { border-color:var(--faya-blue); box-shadow:0 0 0 3px rgba(46,117,182,.12); outline:none; }
[data-bs-theme="dark"] .dc-filter-sel {
  background:#1e2a3a; border-color:#3a4d66; color:var(--bs-body-color);
}
[data-bs-theme="dark"] .dc-filter-sel:hover { border-color:#5a7090; }

/* Add button */
.dc-add-btn {
  display:inline-flex; align-items:center; gap:5px;
  height:34px; padding:0 1rem;
  background:var(--faya-blue); color:#fff;
  border:none; border-radius:8px;
  font-size:0.81rem; font-weight:600; cursor:pointer;
  transition:background .15s; white-space:nowrap; flex-shrink:0;
}
.dc-add-btn i { font-size:0.85rem; }
.dc-add-btn:hover { background:#1B3A5C; }

/* ── Card container ──────────────────── */
.dc-card {
  background:var(--bs-body-bg);
  border:1px solid var(--bs-border-color);
  border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  overflow:hidden;
}

/* ── Table ───────────────────────────── */
.dc-table-wrap { overflow-x:auto; }
.dc-table { width:100%; border-collapse:collapse; font-size:0.83rem; }

/* Header */
.dc-table thead tr {
  background:var(--bs-tertiary-bg);
  border-bottom:2px solid var(--bs-border-color);
  position:sticky; top:0; z-index:2;
}
.dc-table thead th {
  padding:0.6rem 1rem;
  font-size:0.63rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--bs-secondary-color);
  white-space:nowrap; border-bottom:none; user-select:none;
}

/* Column widths */
.dc-th-topic    { min-width:230px; }
.dc-th-reporter { width:155px; }
.dc-th-discuss  { width:115px; }
.dc-th-jira     { width:105px; }
.dc-th-priority { width:88px; }
.dc-th-status   { width:98px; }
.dc-th-created  { width:95px; }
.dc-th-actions  { width:46px; text-align:right; }

/* Row — clear dividers + hover */
.dc-row {
  border-bottom: 1px solid #d0d7e2;
  cursor: pointer;
  transition: background .13s;
}
.dc-row:last-child { border-bottom: none; }
.dc-row:hover { background: rgba(46,117,182,.045); }
.dc-row:hover .dc-topic-title { color: var(--faya-blue); }
[data-bs-theme="dark"] .dc-row { border-bottom-color: #2e3d52; }
[data-bs-theme="dark"] .dc-row:hover { background: rgba(46,117,182,.09); }

/* More vertical breathing room per row */
.dc-table tbody td { padding: 0.85rem 1rem; }

/* Cell padding */
.dc-table tbody td { padding:0.7rem 1rem; vertical-align:middle; }

/* ── Topic ───────────────────────────── */
.dc-topic-title {
  font-size:0.86rem; font-weight:600;
  color:var(--bs-body-color); line-height:1.35;
  margin-bottom:3px; transition:color .13s;
}
.dc-topic-desc {
  font-size:0.71rem; color:var(--bs-secondary-color);
  line-height:1.4; opacity:.8;
}

/* ── Reporter ────────────────────────── */
.dc-reporter-wrap { display:flex; align-items:center; gap:7px; }
.dc-reporter-name { font-size:0.79rem; font-weight:600; color:var(--bs-body-color); line-height:1.25; }
.dc-reporter-date { font-size:0.65rem; color:var(--bs-secondary-color); margin-top:1px; }

/* ── Avatars ─────────────────────────── */
.dc-avatar {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  font-size:0.6rem; font-weight:800; color:#fff;
  flex-shrink:0; border:2px solid var(--bs-body-bg);
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.dc-avatar--empty { background:var(--bs-border-color); color:var(--bs-secondary-color); }
.dc-avatar--more  { background:var(--bs-tertiary-bg); color:var(--bs-secondary-color); font-size:0.58rem; }
.dc-avatar-group  { display:flex; align-items:center; }
.dc-avatar-group .dc-avatar { margin-left:-6px; }
.dc-avatar-group .dc-avatar:first-child { margin-left:0; }

/* ── Jira link ───────────────────────── */
.dc-jira-link {
  display:inline-flex; align-items:center; gap:3px;
  font-size:0.72rem; font-weight:700; color:var(--faya-blue);
  text-decoration:none; padding:2px 7px;
  border:1px solid var(--faya-blue-lt); border-radius:5px;
  background:rgba(46,117,182,.06);
  transition:all .13s; white-space:nowrap;
}
.dc-jira-link:hover { background:var(--faya-blue); color:#fff; border-color:var(--faya-blue); }
.dc-jira-link i { font-size:0.65rem; }
.dc-no-val { color:var(--bs-secondary-color); font-size:0.75rem; }

/* ── Status badges ───────────────────── */
.dc-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:20px;
  font-size:0.69rem; font-weight:700; white-space:nowrap;
}
.dc-badge::before { content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.dc-badge--open     { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.dc-badge--open::before { background:#1d4ed8; }
.dc-badge--resolved { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.dc-badge--resolved::before { background:#15803d; }
.dc-badge--deferred { background:#f9fafb; color:#6b7280; border:1px solid #e5e7eb; }
.dc-badge--deferred::before { background:#9ca3af; }
.dc-badge--inprog   { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
.dc-badge--inprog::before { background:#f59e0b; }
[data-bs-theme="dark"] .dc-badge--open     { background:#0c1a3a; color:#93c5fd; border-color:#1e3a5f; }
[data-bs-theme="dark"] .dc-badge--resolved { background:#052e16; color:#6ee7b7; border-color:#14532d; }
[data-bs-theme="dark"] .dc-badge--deferred { background:#1f2937; color:#9ca3af; border-color:#374151; }
[data-bs-theme="dark"] .dc-badge--inprog   { background:#292000; color:#fde68a; border-color:#3d2e00; }

/* ── Priority badges ─────────────────── */
.dc-pri-badge {
  display:inline-flex; align-items:center;
  padding:3px 8px; border-radius:5px;
  font-size:0.69rem; font-weight:700; white-space:nowrap;
}
.dc-pri--critical { background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; }
.dc-pri--high     { background:#ffedd5; color:#c2410c; border:1px solid #fed7aa; }
.dc-pri--medium   { background:#f3f4f6; color:#4b5563; border:1px solid #e5e7eb; }
.dc-pri--low      { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
[data-bs-theme="dark"] .dc-pri--critical { background:#450a0a; color:#fca5a5; border-color:#7f1d1d; }
[data-bs-theme="dark"] .dc-pri--high     { background:#431407; color:#fdba74; border-color:#7c2d12; }
[data-bs-theme="dark"] .dc-pri--medium   { background:#1f2937; color:#9ca3af; border-color:#374151; }
[data-bs-theme="dark"] .dc-pri--low      { background:#052e16; color:#6ee7b7; border-color:#14532d; }

/* ── Created ─────────────────────────── */
.dc-created-date { font-size:0.76rem; color:var(--bs-body-color); font-weight:500; }
.dc-created-ago  { font-size:0.65rem; color:var(--bs-secondary-color); margin-top:2px; }

/* ── Action button ───────────────────── */
.dc-action-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:6px;
  border:none; background:transparent; cursor:pointer;
  color:var(--bs-secondary-color); font-size:0.85rem;
  transition:all .13s; opacity:.6;
}
.dc-action-btn:hover { opacity:1; }
.dc-action-btn--danger:hover { background:#fee2e2; color:#dc2626; }
[data-bs-theme="dark"] .dc-action-btn--danger:hover { background:rgba(220,38,38,.15); color:#f87171; }

/* ── Footer ──────────────────────────── */
.dc-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.55rem 1rem; border-top:1px solid var(--bs-border-color);
  background:var(--bs-tertiary-bg);
}
.dc-footer-left { font-size:0.76rem; color:var(--bs-secondary-color); }
.dc-footer-pages { display:flex; align-items:center; gap:3px; }
.dc-page-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 6px;
  border-radius:6px; border:1px solid var(--bs-border-color);
  background:var(--bs-body-bg); color:var(--bs-body-color);
  font-size:0.73rem; font-weight:600; cursor:pointer; transition:all .13s;
}
.dc-page-btn:hover:not(:disabled) { border-color:var(--faya-blue); color:var(--faya-blue); background:rgba(46,117,182,.05); }
.dc-page-btn--active { background:var(--faya-blue); color:#fff !important; border-color:var(--faya-blue); }
.dc-page-btn:disabled { opacity:.35; cursor:default; }
.dc-page-nav i { font-size:0.78rem; }

/* Empty state */
.dc-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 3rem 1.5rem; gap: 0.5rem; text-align: center;
}
.dc-empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--bs-tertiary-bg); display: flex;
  align-items: center; justify-content: center;
  font-size: 1.75rem; color: var(--bs-secondary-color);
  margin-bottom: 0.5rem; opacity: .6;
}
.dc-empty-title { font-size: 0.95rem; font-weight: 700; color: var(--bs-body-color); }
.dc-empty-sub   { font-size: 0.8rem; color: var(--bs-secondary-color); }

/* ── Due date column ─────────────────── */
.dc-th-due { width: 120px; }
.dc-td-due  { vertical-align: middle; text-align: left; }

/* ── Overdue row highlight ───────────── */
.dc-row--overdue {
  border-left: 3px solid #ef4444 !important;
  background: rgba(239,68,68,.03);
}
[data-bs-theme="dark"] .dc-row--overdue {
  background: rgba(239,68,68,.06);
}

/* ── Due date display ────────────────── */
.dc-due-date {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--bs-body-color);
  white-space: nowrap;
}
.dc-due-date--red {
  color: #ef4444;
  font-weight: 700;
}
.dc-due-overdue {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.dc-due-overdue .dc-due-date--red {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ef4444;
  white-space: nowrap;
  line-height: 1;
}

.dc-due-overdue .dc-badge--overdue {
  font-size: 0.63rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.4;
}

/* ── Overdue badge ───────────────────── */
.dc-badge--overdue {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.dc-badge--overdue i { font-size: 0.65rem; }
[data-bs-theme="dark"] .dc-badge--overdue {
  background: rgba(239,68,68,.15);
  color: #fca5a5;
  border-color: rgba(239,68,68,.3);
}

/* ── Discuss-With: avatar + name list ── */
.dc-discuss-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dc-discuss-person {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dc-discuss-name {
  font-size: 0.76rem;
  color: var(--bs-body-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}
.dc-discuss-more {
  font-size: 0.68rem;
  color: var(--bs-secondary-color);
  padding-left: 2px;
}

/* ══════════════════════════════════════
   SETTINGS
══════════════════════════════════════ */
/* Legacy kept for any remaining usages */
.settings-section { background:var(--bs-tertiary-bg); border:1px solid var(--bs-border-color); border-radius:12px; padding:1.35rem; margin-bottom:1.35rem; }
.settings-section-title { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--faya-blue); margin-bottom:1.1rem; padding-bottom:0.65rem; border-bottom:1px solid var(--bs-border-color); }

/* ══════════════════════════════════════
   SETTINGS PAGE — redesign
══════════════════════════════════════ */

/* Page header */

/* ══════════════════════════════════════════════════
   SETTINGS — Admin Panel Layout
   ══════════════════════════════════════════════════ */

/* ── Summary stats bar ── */
/* ══ Summary Stats Bar ══ */
/* ══════════════════════════════════════════════════
   SETTINGS — Summary stats bar
   ══════════════════════════════════════════════════ */
.st-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.st-stat-card {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 1.1rem;
  background: #ffffff;
  border: 1.5px solid #d1d9e6;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.st-stat-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 14px rgba(46,117,182,.13);
  transform: translateY(-1px);
}
[data-bs-theme="dark"] .st-stat-card {
  background: #1a2535;
  border-color: #3a4d66;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
[data-bs-theme="dark"] .st-stat-card:hover { border-color: #3b82f6; box-shadow: 0 4px 14px rgba(0,0,0,.4); }

.st-stat-ico {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
.st-stat-body { flex: 1; min-width: 0; }
.st-stat-val { font-size: 1.25rem; font-weight: 800; color: var(--bs-body-color); line-height: 1; }
.st-stat-lbl { font-size: 0.69rem; color: var(--bs-secondary-color); margin-top: 3px; white-space: nowrap; font-weight: 500; }

.st-stat-status {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 600; flex-shrink: 0;
}
.st-stat-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.st-stat-dot--ok   { background: #22c55e; box-shadow: 0 0 0 2px #dcfce7; }
.st-stat-dot--off  { background: #94a3b8; }
.st-stat-dot--warn { background: #f59e0b; box-shadow: 0 0 0 2px #fef3c7; }
.st-stat-status--ok   { color: #15803d; }
.st-stat-status--off  { color: #94a3b8; }
.st-stat-status--warn { color: #b45309; }
[data-bs-theme="dark"] .st-stat-dot--ok  { box-shadow: 0 0 0 2px #052e16; }
[data-bs-theme="dark"] .st-stat-status--ok  { color: #6ee7b7; }
[data-bs-theme="dark"] .st-stat-status--off { color: #64748b; }

.st-stat-badge { display: none; } /* legacy compat */

/* ══════════════════════════════════════════════════
   SETTINGS — Admin panel layout
   ══════════════════════════════════════════════════ */
.sadmin-layout {
  display: flex; gap: 0;
  min-height: 500px;
  border: 1.5px solid #d1d9e6;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
[data-bs-theme="dark"] .sadmin-layout {
  background: #1a2535;
  border-color: #3a4d66;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* ── Sidebar ── */
.sadmin-nav {
  width: 200px; flex-shrink: 0;
  background: #f8fafc;
  border-right: 1.5px solid #e2e8f0;
  padding: 1rem 0.5rem;
  display: flex; flex-direction: column;
  gap: 0.1rem;
}
[data-bs-theme="dark"] .sadmin-nav { background: #131c28; border-right-color: #2e3d52; }
[data-bs-theme="dark"] .sadmin-nav [style*="border-bottom:1px solid #e2e8f0"] { border-bottom-color: #2e3d52 !important; }
[data-bs-theme="dark"] .sadmin-nav [style*="color:#334155"] { color: #94a3b8 !important; }

.sadmin-nav-group { margin-bottom: 0.5rem; }

.sadmin-nav-label {
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: #94a3b8;
  padding: 0.5rem 0.75rem 0.3rem;
  display: block;
}
[data-bs-theme="dark"] .sadmin-nav-label { color: #475569; }

.sadmin-nav-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.48rem 0.75rem;
  border-radius: 7px;
  font-size: 0.84rem; font-weight: 500;
  color: #475569; cursor: pointer;
  user-select: none; text-decoration: none;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
[data-bs-theme="dark"] .sadmin-nav-item { color: #94a3b8; }
.sadmin-nav-item i { font-size: 1rem; opacity: 0.7; flex-shrink: 0; }
.sadmin-nav-item:hover:not(.active) { background: #f4f6f9; color: #1e293b; }
[data-bs-theme="dark"] .sadmin-nav-item:hover:not(.active) { background: #182334; color: #e2e8f0; }
.sadmin-nav-item.active {
  background: #dbeafe; color: #1d4ed8; font-weight: 600;
  box-shadow: inset 3px 0 0 #2563eb;
}
.sadmin-nav-item.active i { opacity: 1; }
[data-bs-theme="dark"] .sadmin-nav-item.active { background: #0c1a3a; color: #93c5fd; box-shadow: inset 3px 0 0 #3b82f6; }

.sadmin-nav-item--danger { color: #dc2626; }
.sadmin-nav-item--danger i { color: #dc2626; opacity: 0.9; }
.sadmin-nav-item--danger:hover { background: #fff1f2; color: #b91c1c; }
[data-bs-theme="dark"] .sadmin-nav-item--danger { color: #fca5a5; }
[data-bs-theme="dark"] .sadmin-nav-item--danger:hover { background: #450a0a; color: #fca5a5; }
.sadmin-nav-item--danger.active { background: #fee2e2; color: #b91c1c; box-shadow: inset 3px 0 0 #ef4444; }
[data-bs-theme="dark"] .sadmin-nav-item--danger.active { background: #450a0a; color: #fca5a5; box-shadow: inset 3px 0 0 #ef4444; }

.sadmin-nav-divider { height: 1px; background: #e2e8f0; margin: 0.4rem 0.75rem; }
[data-bs-theme="dark"] .sadmin-nav-divider { background: #2e3d52; }

.sadmin-status-dot { width: 6px; height: 6px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.sadmin-dot--ok   { background: #22c55e; }
.sadmin-dot--fail { background: #ef4444; }

/* ── Content ── */
/* display:flex establishes the height chain so sadmin-panel → um-layout heights resolve correctly */
.sadmin-content { flex: 1; min-width: 0; overflow-y: auto; background: #ffffff;
  display: flex; flex-direction: column; }
[data-bs-theme="dark"] .sadmin-content { background: #1a2535; }

/* ── Panel ── */
.sadmin-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
/* Users panel: scrolling handled inside um-detail-col, not at panel level */
#stab-users { overflow: hidden; }

.sadmin-panel-hdr {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-bottom: 1.5px solid #e2e8f0;
  flex-shrink: 0;
  background: #fafbfc;
}
[data-bs-theme="dark"] .sadmin-panel-hdr { border-bottom-color: #2e3d52; background: #161f2d; }
.sadmin-panel-title { font-size: 0.95rem; font-weight: 700; color: #0f172a; line-height: 1.3; }
.sadmin-panel-sub   { font-size: 0.73rem; color: #64748b; margin-top: 2px; }
[data-bs-theme="dark"] .sadmin-panel-title { color: #f1f5f9; }
[data-bs-theme="dark"] .sadmin-panel-sub   { color: #94a3b8; }

.sadmin-section {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
}
[data-bs-theme="dark"] .sadmin-section { border-bottom-color: #1e2d40; }
.sadmin-section:last-of-type { border-bottom: none; }

.sadmin-section-title {
  font-size: 0.67rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: #94a3b8; margin-bottom: 0.65rem;
}

.sadmin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 700px) { .sadmin-form-grid { grid-template-columns: 1fr; } }

.sadmin-panel-footer {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1.5px solid #e2e8f0;
  margin-top: auto;
  background: #f8fafc; flex-shrink: 0;
}
[data-bs-theme="dark"] .sadmin-panel-footer { background: #131c28; border-top-color: #2e3d52; }

/* System info */
.sadmin-info-grid { display: flex; flex-direction: column; gap: 0; }
.sadmin-info-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.82rem;
}
[data-bs-theme="dark"] .sadmin-info-row { border-bottom-color: #1e2d40; }
.sadmin-info-row:last-child { border-bottom: none; }
.sadmin-info-key { width: 130px; flex-shrink: 0; font-weight: 600; color: #334155; }
.sadmin-info-val { color: #64748b; font-family: var(--bs-font-monospace); font-size: 0.76rem; }
[data-bs-theme="dark"] .sadmin-info-key { color: #cbd5e1; }
[data-bs-theme="dark"] .sadmin-info-val { color: #94a3b8; }

/* Danger zone */
.sadmin-danger-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 0.85rem 0;
}
.sadmin-danger-title { font-size: 0.85rem; font-weight: 600; color: #1e293b; margin-bottom: 3px; }
.sadmin-danger-desc  { font-size: 0.73rem; color: #64748b; line-height: 1.5; }
[data-bs-theme="dark"] .sadmin-danger-title { color: #e2e8f0; }
[data-bs-theme="dark"] .sadmin-danger-desc  { color: #94a3b8; }
.sadmin-danger-row--red .sadmin-danger-title { color: #b91c1c; }
[data-bs-theme="dark"] .sadmin-danger-row--red .sadmin-danger-title { color: #fca5a5; }
.sadmin-divider { height: 1px; background: var(--bs-border-color); margin: 0.1rem 0; }

/* ══ Team Card Grid ══ */
.tm-toolbar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  flex-wrap: wrap;
}
[data-bs-theme="dark"] .tm-toolbar { background: #151f2e; }
.tm-toolbar-left  { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; }
.tm-toolbar-right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }

.tm-filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0.22rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  font-size: 0.7rem; font-weight: 500;
  color: var(--bs-body-color); cursor: pointer;
  transition: border-color .1s, background .1s;
  white-space: nowrap;
}
.tm-filter-chip:hover, .tm-filter-chip.active {
  border-color: var(--faya-blue); background: #eff6ff; color: #1d4ed8;
}
[data-bs-theme="dark"] .tm-filter-chip:hover,
[data-bs-theme="dark"] .tm-filter-chip.active {
  background: #0c1a3a; border-color: #3b82f6; color: #93c5fd;
}

.tm-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: #f8fafc;
  min-height: 80px;
}
[data-bs-theme="dark"] .tm-card-grid { background: #131c28; }
@media (max-width: 1000px) { .tm-card-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 720px)  { .tm-card-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px)  { .tm-card-grid { grid-template-columns: 1fr; } }

.tm-card {
  display: flex; flex-direction: column;
  padding: 0.65rem 0.7rem;
  border: 1.5px solid #d1d9e6;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 0 0 0 transparent;
  transition: box-shadow 0.15s, border-color 0.15s;
  min-width: 0; position: relative;
}
.tm-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 12px rgba(46,117,182,.13);
}
[data-bs-theme="dark"] .tm-card {
  background: #1e2a3a;
  border-color: #3a4d66;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
[data-bs-theme="dark"] .tm-card:hover { border-color: #3b82f6; box-shadow: 0 4px 12px rgba(0,0,0,.35); }

/* Card top row: avatar + name + 3-dot */
.tm-card-top {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem;
}
.tm-card-info { flex: 1; min-width: 0; }
.tm-card-name {
  font-size: 0.8rem; font-weight: 600;
  color: var(--bs-body-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-card-roles { display: flex; flex-wrap: wrap; gap: 3px; }
.tm-card-role-empty {
  font-size: 0.63rem; color: var(--bs-secondary-color);
  font-style: italic; padding: 1px 0;
}

/* Three-dot action menu */
.tm-dot-wrap { position: relative; flex-shrink: 0; }
.tm-dot-btn {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px; border: none;
  background: transparent; color: var(--bs-secondary-color);
  cursor: pointer; font-size: 0.85rem;
  transition: background 0.1s, color 0.1s;
}
.tm-dot-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
[data-bs-theme="dark"] .tm-dot-btn:hover { background: #243042; }

.tm-dot-menu {
  position: fixed; z-index: 99999;
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 0.3rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  min-width: 160px;
}
[data-bs-theme="dark"] .tm-dot-menu {
  background: #1e2a3a; border-color: #3a4d66;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.tm-dot-item {
  display: flex; align-items: center; gap: 7px;
  padding: 0.32rem 0.55rem; border-radius: 5px;
  font-size: 0.78rem; font-weight: 500;
  color: var(--bs-body-color); cursor: pointer;
  transition: background 0.1s;
}
.tm-dot-item:hover { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .tm-dot-item:hover { background: #243042; }
.tm-dot-item--danger { color: #b91c1c; }
.tm-dot-item--danger:hover { background: #fee2e2; }
[data-bs-theme="dark"] .tm-dot-item--danger { color: #fca5a5; }
[data-bs-theme="dark"] .tm-dot-item--danger:hover { background: #450a0a; }
.tm-dot-sep { height: 1px; background: var(--bs-border-color); margin: 0.2rem 0; }

/* Compact role badge for cards */
.tm-rbadge-sm {
  font-size: 0.59rem; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  letter-spacing: 0.01em;
}

/* ── Profile Picture Grid ── */
/* ── Profile grid: row-based list layout ── */
.st-profile-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.st-profile-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--bs-border-color);
  position: relative;
}
.st-profile-item:last-child { border-bottom: none; }

.st-profile-av-wrap {
  position: relative; cursor: pointer; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #d0d7e2;
  overflow: hidden;
  transition: border-color .15s;
}
.st-profile-av-wrap:hover { border-color: var(--faya-blue); }
[data-bs-theme="dark"] .st-profile-av-wrap { border-color: #3a4d66; }

.st-profile-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.st-profile-initials {
  width: 100%; height: 100%; display: flex;
  align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800; color: #fff;
}
.st-profile-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.38);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.85rem;
  opacity: 0; transition: opacity .15s;
}
.st-profile-av-wrap:hover .st-profile-overlay { opacity: 1; }

.st-profile-info {
  flex: 1; min-width: 0;
}
.st-profile-name {
  font-size: 0.84rem; font-weight: 600;
  color: var(--bs-body-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-profile-meta {
  font-size: 0.72rem; color: var(--bs-secondary-color); margin-top: 1px;
}

.st-profile-actions {
  display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
}
.st-profile-upload-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 6px; background: var(--bs-body-bg);
  font-size: 0.75rem; font-weight: 500;
  color: var(--bs-body-color); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.st-profile-upload-btn:hover { border-color: var(--faya-blue); background: #eff6ff; }
[data-bs-theme="dark"] .st-profile-upload-btn:hover { background: #0c1a3a; border-color: #93c5fd; }

.st-profile-remove {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0.28rem 0.6rem;
  border: 1px solid #fecaca; border-radius: 6px;
  background: #fff5f5; color: #b91c1c;
  font-size: 0.75rem; font-weight: 500; cursor: pointer;
  transition: background .12s;
}
.st-profile-remove:hover { background: #fee2e2; }
[data-bs-theme="dark"] .st-profile-remove { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }
[data-bs-theme="dark"] .st-profile-remove:hover { background: #5a0f0f; }

/* ══════════════════════════════════════════════════
   TEAM MEMBERS — Admin Table
   ══════════════════════════════════════════════════ */

/* Member count badge in header */
.tm-count-badge {
  font-size: 0.72rem; font-weight: 700;
  background: #e0f2fe; color: #0369a1;
  border-radius: 999px; padding: 2px 10px;
}
[data-bs-theme="dark"] .tm-count-badge { background: #0c2a40; color: #38bdf8; }

/* Table wrapper */
.tm-table-wrap {
  overflow: visible; /* allow portal dropdown to overflow */
  border-bottom: 1px solid var(--bs-border-color);
}
.tm-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.83rem; table-layout: fixed;
}
.tm-col-av    { width: 52px; }
.tm-col-name  { width: 160px; }
.tm-col-roles { } /* fills remaining space */
.tm-col-act   { width: 48px; }

.tm-table thead th {
  padding: 0.48rem 0.85rem;
  font-size: 0.67rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  white-space: nowrap;
}
[data-bs-theme="dark"] .tm-table thead th { background: #151f2e; }

.tm-table tbody tr {
  border-bottom: 1px solid var(--bs-border-color);
  transition: background 0.1s;
}
.tm-table tbody tr:last-child { border-bottom: none; }
.tm-table tbody tr:hover { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .tm-table tbody tr:hover { background: #1a2535; }

.tm-table tbody td { padding: 0.5rem 0.85rem; vertical-align: middle; }

/* Avatar cell */
.tm-av {
  width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden; border: 2px solid var(--bs-border-color);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.tm-av img { width: 100%; height: 100%; object-fit: cover; }
.tm-av-initials {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; color: #fff;
}

/* Name cell */
.tm-name { font-weight: 600; color: var(--bs-body-color); }

/* Roles cell */
.tm-roles-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* Role picker trigger */
.tm-role-add-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  border: 1px dashed var(--bs-border-color);
  background: transparent; color: var(--bs-secondary-color);
  font-size: 0.7rem; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.tm-role-add-btn:hover { border-color: var(--faya-blue); color: var(--faya-blue); }

/* Role picker dropdown — portal rendered at document.body level */
.tm-rp-wrap { position: relative; display: inline-block; }
.tm-rp-dropdown {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px; padding: 0.5rem;
  box-shadow: 0 12px 36px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  min-width: 240px;
}
[data-bs-theme="dark"] .tm-rp-dropdown {
  background: #1e2a3a;
  border-color: #3a4d66;
  box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
}
.tm-rp-title {
  font-size: 0.65rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bs-secondary-color);
  padding: 0.25rem 0.5rem 0.4rem;
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 0.3rem;
}
.tm-rp-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 0.35rem 0.5rem; border-radius: 6px; cursor: pointer;
}
.tm-rp-opt:hover { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .tm-rp-opt:hover { background: #243042; }
.tm-rp-opt input[type=checkbox] { accent-color: var(--faya-blue); margin: 0; flex-shrink: 0; }

/* Role badges */
.tm-rbadge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; white-space: nowrap;
  letter-spacing: 0.01em;
}
.tm-r--junior  { background: #dcfce7; color: #15803d; }
.tm-r--ste     { background: #dbeafe; color: #1d4ed8; }
.tm-r--senior  { background: #ede9fe; color: #6d28d9; }
.tm-r--lead    { background: #fef3c7; color: #b45309; }
.tm-r--auto    { background: #fce7f3; color: #be185d; }
[data-bs-theme="dark"] .tm-r--junior  { background: #052e16; color: #6ee7b7; }
[data-bs-theme="dark"] .tm-r--ste     { background: #0c1a3a; color: #93c5fd; }
[data-bs-theme="dark"] .tm-r--senior  { background: #1e1040; color: #c4b5fd; }
[data-bs-theme="dark"] .tm-r--lead    { background: #292000; color: #fde68a; }
[data-bs-theme="dark"] .tm-r--auto    { background: #2d0a1e; color: #f9a8d4; }

/* Remove member button */
.tm-remove-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid transparent; background: transparent;
  color: var(--bs-secondary-color); cursor: pointer;
  font-size: 0.9rem; transition: background .12s, color .12s, border-color .12s;
}
.tm-remove-btn:hover { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
[data-bs-theme="dark"] .tm-remove-btn:hover { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }

/* Add member row */
.tm-add-section {
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
[data-bs-theme="dark"] .tm-add-section { background: #151f2e; }
.tm-add-row {
  display: flex; align-items: center; gap: 0.55rem;
}
.tm-add-row .st-input { flex: 1; min-width: 0; }

/* Role picker in add row */
.tm-role-picker-wrap { position: relative; }
.tm-role-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0.44rem 0.85rem; border-radius: 6px;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg); color: var(--bs-body-color);
  font-size: 0.8rem; font-weight: 500; cursor: pointer;
  white-space: nowrap; transition: border-color .12s;
}
.tm-role-trigger:hover { border-color: var(--faya-blue); }
.tm-role-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 8px; padding: 0.4rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 300; min-width: 220px;
}
[data-bs-theme="dark"] .tm-role-dropdown { background: #1e2a3a; border-color: #3a4d66; }
.tm-role-dropdown-title {
  font-size: 0.65rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--bs-secondary-color);
  padding: 0.2rem 0.4rem 0.4rem;
}
.tm-role-opt {
  display: flex; align-items: center; gap: 7px;
  padding: 0.3rem 0.4rem; border-radius: 5px; cursor: pointer;
  font-size: 0.78rem;
}
.tm-role-opt:hover { background: var(--bs-tertiary-bg); }
.tm-role-opt input[type=checkbox] { accent-color: var(--faya-blue); margin: 0; }

.st-page-hdr  { margin-bottom: 1.25rem; }
.st-page-title { font-size: 1.18rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 3px; color: var(--bs-body-color); }
.st-page-sub   { font-size: 0.78rem; color: var(--bs-secondary-color); margin: 0; }

/* Card */
.st-card {
  background: var(--bs-body-bg);
  border: 1px solid #d0d7e2;
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 6px rgba(0,0,0,.03);
  transition: box-shadow .15s;
}
.st-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
[data-bs-theme="dark"] .st-card { border-color: #2e3d52; }

/* Danger variant */
.st-card--danger { border-color: #fca5a5; }
[data-bs-theme="dark"] .st-card--danger { border-color: rgba(239,68,68,.3); }

/* Card header */
.st-card-hdr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid #e8edf4;
  background: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .st-card-hdr { border-bottom-color: #2e3d52; }
.st-card--danger .st-card-hdr { background: #fff5f5; border-bottom-color: #fecaca; }
[data-bs-theme="dark"] .st-card--danger .st-card-hdr { background: rgba(239,68,68,.06); }

.st-card-ico {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.st-ico--blue   { background: #dbeafe; color: #1d4ed8; }
.st-ico--purple { background: #ede9fe; color: #6d28d9; }
.st-ico--teal   { background: #ccfbf1; color: #0f766e; }
.st-ico--amber  { background: #fef3c7; color: #b45309; }
.st-ico--slate  { background: #f1f5f9; color: #475569; }
.st-ico--red    { background: #fee2e2; color: #b91c1c; }
[data-bs-theme="dark"] .st-ico--blue   { background: #0c1a3a; color: #93c5fd; }
[data-bs-theme="dark"] .st-ico--purple { background: #1e1040; color: #c4b5fd; }
[data-bs-theme="dark"] .st-ico--teal   { background: #042f2e; color: #5eead4; }
[data-bs-theme="dark"] .st-ico--amber  { background: #292000; color: #fde68a; }
[data-bs-theme="dark"] .st-ico--slate  { background: #1e293b; color: #94a3b8; }
[data-bs-theme="dark"] .st-ico--red    { background: #450a0a; color: #fca5a5; }

.st-card-title { font-size: 0.88rem; font-weight: 700; color: var(--bs-body-color); line-height: 1.25; }
.st-card-sub   { font-size: 0.72rem; color: var(--bs-secondary-color); margin-top: 1px; }

/* Connection badge (inline status) */
.st-conn-badge {
  font-size: 0.7rem; font-weight: 600; padding: 3px 9px;
  border-radius: 20px; white-space: nowrap; display: none;
}
.st-conn-badge.ok    { display: inline-flex; align-items: center; gap: 4px; background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.st-conn-badge.fail  { display: inline-flex; align-items: center; gap: 4px; background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
[data-bs-theme="dark"] .st-conn-badge.ok   { background: #052e16; color: #6ee7b7; border-color: #14532d; }
[data-bs-theme="dark"] .st-conn-badge.fail { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }

/* Card body */
.st-card-body { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.85rem; }

/* Card footer */
.st-card-footer {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-top: 1px solid #e8edf4;
  background: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .st-card-footer { border-top-color: #2e3d52; }
.st-card--danger .st-card-footer { border-top-color: #fecaca; background: #fff5f5; }
[data-bs-theme="dark"] .st-card--danger .st-card-footer { background: rgba(239,68,68,.04); border-top-color: rgba(239,68,68,.2); }

/* Fields */
.st-field { display: flex; flex-direction: column; gap: 4px; }
.st-label {
  font-size: 0.78rem; font-weight: 600;
  color: var(--bs-body-color); display: flex; align-items: center; gap: 6px;
}

/* Saved badge inside label */
.st-saved-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.65rem; font-weight: 700;
  background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0;
  padding: 1px 7px; border-radius: 20px;
}
[data-bs-theme="dark"] .st-saved-badge { background: #052e16; color: #6ee7b7; border-color: #14532d; }

/* Inputs, selects — unified height */
.st-input,
.st-select {
  height: 36px;
  padding: 0 0.75rem;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  border: 1.5px solid #b8c2d0;
  border-radius: 7px;
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.st-input:hover, .st-select:hover { border-color: #8a96a8; }
.st-input:focus, .st-select:focus { border-color: var(--faya-blue); box-shadow: 0 0 0 3px rgba(46,117,182,.1); }
.st-input[readonly] { cursor: default; }
.st-select--sm { width: auto; min-width: 90px; flex-shrink: 0; }
[data-bs-theme="dark"] .st-input,
[data-bs-theme="dark"] .st-select { background: #1e2a3a; border-color: #3a4d66; }
[data-bs-theme="dark"] .st-input:hover,
[data-bs-theme="dark"] .st-select:hover { border-color: #5a7090; }

/* Input group (password + eye button) */
.st-input-group { display: flex; align-items: stretch; }
.st-input-group .st-input { border-radius: 7px 0 0 7px; border-right: none; }
.st-eye-btn {
  height: 36px; width: 38px; flex-shrink: 0;
  border: 1.5px solid #b8c2d0; border-left: none; border-radius: 0 7px 7px 0;
  background: var(--bs-body-bg); color: var(--bs-secondary-color);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; transition: background .13s, color .13s;
}
.st-eye-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
[data-bs-theme="dark"] .st-eye-btn { background: #1e2a3a; border-color: #3a4d66; }

/* Input row (inline input + button) */
.st-input-row { display: flex; gap: 0.5rem; align-items: center; }
.st-input-row .st-input { flex: 1; }

/* Hint text */
.st-hint {
  font-size: 0.72rem; color: var(--bs-secondary-color);
  display: flex; align-items: center; gap: 4px;
}
.st-hint i { font-size: 0.72rem; color: #10b981; }
.st-hint code { font-size: 0.7rem; background: var(--bs-tertiary-bg); padding: 1px 5px; border-radius: 4px; }

/* Buttons */
.st-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 0.9rem; border-radius: 7px;
  font-size: 0.8rem; font-weight: 600; font-family: inherit;
  cursor: pointer; border: 1.5px solid transparent;
  white-space: nowrap; transition: all .13s;
}
.st-btn i { font-size: 0.82rem; }
.st-btn--primary  { background: var(--faya-blue); color: #fff; border-color: var(--faya-blue); }
.st-btn--primary:hover  { background: var(--faya-navy); border-color: var(--faya-navy); }
.st-btn--secondary { background: var(--bs-body-bg); color: var(--bs-body-color); border-color: #b8c2d0; }
.st-btn--secondary:hover { border-color: var(--faya-blue); color: var(--faya-blue); background: rgba(46,117,182,.05); }
.st-btn--danger   { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.st-btn--danger:hover   { background: #ef4444; color: #fff; border-color: #ef4444; }
[data-bs-theme="dark"] .st-btn--secondary { background: #1e2a3a; border-color: #3a4d66; }
[data-bs-theme="dark"] .st-btn--danger { background: rgba(239,68,68,.15); color: #fca5a5; border-color: rgba(239,68,68,.3); }
[data-bs-theme="dark"] .st-btn--danger:hover { background: #ef4444; color: #fff; }

/* Team chips */
.st-chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; }

/* Override attendee-badge inside settings to use better chip style */
#settings-team-badges .attendee-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #eff6ff; color: #1d4ed8; border: 1.5px solid #bfdbfe;
  border-radius: 20px; padding: 3px 10px 3px 11px;
  font-size: 0.76rem; font-weight: 600;
  transition: border-color .13s, background .13s;
}
#settings-team-badges .attendee-badge:hover { background: #dbeafe; border-color: #93c5fd; }
#settings-team-badges .attendee-badge .remove-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #6b7280; font-size: 0.85rem; line-height: 1; margin-left: 1px;
  transition: color .13s;
}
#settings-team-badges .attendee-badge .remove-btn:hover { color: #ef4444; }
[data-bs-theme="dark"] #settings-team-badges .attendee-badge { background: #0c1a3a; color: #93c5fd; border-color: #1e3a5f; }
[data-bs-theme="dark"] #settings-team-badges .attendee-badge:hover { background: #1e3a5f; }

/* Toggle row */
.st-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.5rem 0;
}
.st-toggle-label { font-size: 0.82rem; font-weight: 600; color: var(--bs-body-color); }
.st-toggle-sub   { font-size: 0.71rem; color: var(--bs-secondary-color); margin-top: 1px; }

/* Danger notice */
.st-danger-notice {
  display: flex; align-items: flex-start; gap: 8px;
  background: #fff5f5; border: 1px solid #fecaca; border-radius: 8px;
  padding: 0.65rem 0.85rem; font-size: 0.78rem; color: #7f1d1d; line-height: 1.5;
}
.st-danger-notice i { font-size: 0.95rem; color: #ef4444; flex-shrink: 0; margin-top: 1px; }
.st-danger-notice strong { font-weight: 700; }
[data-bs-theme="dark"] .st-danger-notice { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); color: #fca5a5; }

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
.faya-toast-container { position:fixed; top:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:0.5rem; pointer-events:none; }
.faya-toast { background:#ffffff; border:1px solid #d1d5db; border-radius:10px; padding:0.8rem 1rem; box-shadow:0 8px 32px rgba(0,0,0,0.22); display:flex; align-items:center; gap:10px; min-width:270px; max-width:380px; pointer-events:all; animation:toastIn 0.28s ease; font-size:0.86rem; opacity:1; }
[data-bs-theme="dark"] .faya-toast { background:#1e2a3a; border-color:#3a4d66; box-shadow:0 8px 32px rgba(0,0,0,0.55); }
.faya-toast.success { border-left:4px solid #28a745; }
.faya-toast.error   { border-left:4px solid #dc3545; }
.faya-toast.info    { border-left:4px solid var(--faya-blue); }
.faya-toast.warning { border-left:4px solid #ffc107; }
@keyframes toastIn  { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes toastOut { from{opacity:1} to{opacity:0;transform:translateY(-12px)} }
.faya-toast.removing { animation:toastOut 0.22s ease forwards; }

/* ══════════════════════════════════════
   MISC UTILS
══════════════════════════════════════ */
.empty-state { text-align:center; padding:2.5rem 1rem; color:var(--bs-secondary); }
.empty-icon  { font-size:2.5rem; margin-bottom:0.65rem; opacity:0.35; }

.ai-typing { display:inline-flex; gap:4px; align-items:center; }
.ai-typing span { width:6px; height:6px; border-radius:50%; background:var(--faya-blue); animation:blink 1.2s infinite; }
.ai-typing span:nth-child(2){animation-delay:0.2s} .ai-typing span:nth-child(3){animation-delay:0.4s}
@keyframes blink { 0%,80%,100%{opacity:0.25} 40%{opacity:1} }
@keyframes spin   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.spin { display:inline-block; animation:spin 0.7s linear infinite; }

@keyframes rowHighlight { from{background:#2E75B620} to{background:transparent} }
.row-highlight { animation:rowHighlight 1.5s ease forwards; }

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.14);border-radius:3px}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.14)}

/* ══════════════════════════════════════
   TABLER OVERRIDES
══════════════════════════════════════ */
.card { border-radius:12px; }
.btn  { border-radius:8px; }
.form-control,.form-select { border-radius:8px; }
.modal-content { border-radius:14px; }
.table>:not(caption)>*>* { padding:0.6rem 0.7rem; }

[data-bs-theme="dark"] .navbar-vertical.navbar-expand-lg { box-shadow:2px 0 24px rgba(0,0,0,0.42); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:991px){
  .navbar-vertical.navbar-expand-lg { display:none; }
  .page-wrapper { margin-left:0; }
  .navbar-vertical.navbar-expand-lg.show {
    display:flex; position:fixed; top:0; left:0; height:100vh; z-index:1050;
  }
}

/* ── Complete Task Modal ── */
.complete-gate-item {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 0;
}
.complete-gate-item:has(input:checked) {
  border-color: #28a745 !important;
  background: #d1fae520 !important;
}
[data-bs-theme="dark"] .complete-gate-item:has(input:checked) {
  background: #065f4618 !important;
}
.complete-gate-item .form-check-input {
  margin-top: 0.25rem;
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}
.complete-gate-item .form-check-label {
  cursor: pointer;
  padding-left: 0.35rem;
}
.complete-gate-item:hover {
  border-color: var(--faya-blue) !important;
}
/* ── Task Pool card header accent ─────────────────────────── */
#task-pool-card .card-header {
  background: color-mix(in srgb, var(--bs-warning) 8%, var(--bs-body-bg));
  border-bottom: 2px solid color-mix(in srgb, var(--bs-warning) 25%, transparent);
}
#task-pool-card .card-title { color: var(--bs-warning-text-emphasis); }

/* ══════════════════════════════════════
   TASK MODAL  (tm-* system)
══════════════════════════════════════ */

/* ── Modal-scoped border token ── */
#taskModal {
  --tm-border:       rgba(0,0,0,0.16);
  --tm-border-hover: rgba(0,0,0,0.28);
  --tm-ctrl-bg:      #f8f9fb;
  --tm-ctrl-h:       34px;
  --tm-section-div:  rgba(0,0,0,0.06);
}
[data-bs-theme="dark"] #taskModal {
  --tm-border:       rgba(255,255,255,0.20);
  --tm-border-hover: rgba(255,255,255,0.34);
  --tm-ctrl-bg:      rgba(255,255,255,0.04);
  --tm-section-div:  rgba(255,255,255,0.06);
}

/* ── Dialog width ── */
#taskModal .modal-dialog { max-width: 820px; }
#taskModal .modal-content { border-radius: 14px; overflow: hidden; }

/* ── Standardized input / select height inside modal ── */
#taskModal .form-control,
#taskModal .form-select {
  font-size: 0.82rem;
  height: var(--tm-ctrl-h);
  line-height: 1.4;
  padding: 0 0.7rem;
  border: 1.5px solid var(--tm-border);
  background: var(--tm-ctrl-bg);
  color: var(--bs-body-color);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
#taskModal .form-control:hover:not(:focus),
#taskModal .form-select:hover:not(:focus) {
  border-color: var(--tm-border-hover);
  background: var(--bs-body-bg);
}
#taskModal .form-control:focus,
#taskModal .form-select:focus {
  border-color: var(--faya-blue);
  background: var(--bs-body-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--faya-blue) 14%, transparent);
  outline: none;
}
#taskModal textarea.form-control {
  height: auto;
  /* Individual textarea rules (.tm-desc-ta / .tm-notes-ta) override padding */
}
#taskModal textarea::-webkit-scrollbar { width: 4px; }
#taskModal textarea::-webkit-scrollbar-thumb { background: var(--tm-border); border-radius: 2px; }

/* ── Header ── */
.tm-header {
  flex-direction: row; align-items: center;
  padding: 0.7rem 1rem 0.7rem 1.2rem;
  gap: 0;
  background: var(--bs-body-bg);
  border-bottom: 1.5px solid var(--tm-border);
}
.tm-header-left {
  display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0;
}
.tm-header-left .modal-title {
  font-size: 0.97rem; font-weight: 700; line-height: 1.25; margin: 0;
}
.tm-header-sub {
  font-size: 0.71rem; color: var(--bs-secondary-color); font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px;
}
/* Override Tabler's btn-ghost-danger — subtle icon-only hover, no solid fill */
.btn-ghost-danger {
  background: transparent !important;
  border-color: transparent !important;
  color: #9ca3af !important;
  box-shadow: none !important;
}
.btn-ghost-danger:hover,
.btn-ghost-danger:focus {
  background: rgba(220, 38, 38, 0.08) !important;
  border-color: transparent !important;
  color: #dc2626 !important;
  box-shadow: none !important;
}

.tm-header .btn-ghost-secondary {
  font-size: 0.78rem; padding: 0.28rem 0.7rem; height: 30px;
  border: 1px solid var(--tm-border); border-radius: 7px;
  background: var(--bs-body-bg); color: var(--bs-secondary-color);
  transition: background 0.12s, border-color 0.12s;
}
.tm-header .btn-ghost-secondary:hover { background: var(--bs-tertiary-bg); border-color: var(--tm-border-hover); color: var(--bs-body-color); }
.tm-header .btn-primary { font-size: 0.78rem; padding: 0.28rem 0.9rem; height: 30px; }

/* ── Body ── */
.tm-body { padding: 0; background: var(--bs-body-bg); }

/* ── Section block ── */
.tm-section {
  padding: 0.6rem 1.15rem 0.65rem;
  border-bottom: 1px solid var(--tm-section-div);
}
.tm-section:nth-child(odd) {
  background: color-mix(in srgb, var(--bs-tertiary-bg) 50%, var(--bs-body-bg));
}
.tm-section--last {
  border-bottom: none; padding-bottom: 0.85rem; background: none;
}

/* ── Section header ── */
.tm-section-hdr {
  display: flex; flex-direction: column; gap: 1px; margin-bottom: 0.45rem;
}
.tm-section-hdr-row { display: flex; align-items: center; gap: 0.32rem; }
.tm-sec-ico { font-size: 0.85rem; flex-shrink: 0; line-height: 1; }
.tm-ico-blue   { color: #2E75B6; }
.tm-ico-teal   { color: #0d9488; }
.tm-ico-purple { color: #7c3aed; }
.tm-ico-orange { color: #ea580c; }
.tm-ico-green  { color: #16a34a; }
.tm-section-title {
  font-size: 0.67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--bs-secondary-color); line-height: 1;
}
.tm-section-hint {
  font-size: 0.68rem; color: var(--bs-secondary-color);
  padding-left: 1.25rem; opacity: 0.72; line-height: 1.3;
}

/* ── Compact label ── */
.tm-label {
  font-size: 0.74rem; font-weight: 600;
  margin-bottom: 0.22rem; display: block;
  color: var(--bs-body-color);
}
.tm-label-hint {
  font-size: 0.67rem; font-weight: 400;
  color: var(--bs-secondary-color); margin-left: 0.3rem;
}

/* ── Task title row ── */
.tm-title-row {
  padding: 0.55rem 1.15rem 0.55rem;
  border-bottom: 1px solid var(--tm-section-div);
  background: var(--bs-body-bg);
}
.tm-title-label-row {
  display: flex; align-items: center; gap: 0.32rem;
  margin-bottom: 0.35rem;
}
.tm-required-dot {
  font-size: 0.65rem; font-weight: 700; color: #dc3545;
  margin-left: 1px; line-height: 1;
}
.tm-title-input {
  font-size: 0.88rem !important; font-weight: 500 !important;
  height: 36px !important;
  border: 1.5px solid var(--tm-border) !important;
  background: var(--tm-ctrl-bg) !important;
  border-radius: 8px !important;
  padding: 0 0.75rem !important;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
}
.tm-title-input:hover:not(:focus) {
  border-color: var(--tm-border-hover) !important;
  background: var(--bs-body-bg) !important;
}
.tm-title-input:focus {
  border-color: var(--faya-blue) !important;
  background: var(--bs-body-bg) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--faya-blue) 14%, transparent) !important;
}
.tm-title-input::placeholder { color: var(--bs-secondary-color); font-weight: 400; opacity: 0.72; }
.tm-autofill-badge { min-height: 0; line-height: 1; margin-top: 4px; }
.tm-autofill-badge:empty { display: none; }
.jira-autofill-badge {
  font-size: 0.71rem; color: #16a34a;
  display: inline-flex; align-items: center; gap: 3px;
}

/* ── Jira block row ── */
.jira-block {
  display: flex; align-items: flex-start; gap: 0.4rem;
  padding: 0.38rem 0.5rem; margin-bottom: 0.3rem;
  background: var(--bs-body-bg);
  border: 1.5px solid var(--tm-border);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.jira-block:last-of-type { margin-bottom: 0; }
.jira-block:focus-within {
  border-color: var(--faya-blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--faya-blue) 12%, transparent);
}
.jira-block-num {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--faya-blue); color: #fff;
  font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 6px;
}
.jira-block-fields {
  flex: 1; display: grid;
  grid-template-columns: 195px 1fr;
  gap: 0 0.4rem; align-items: center;
}
.jira-block-key-wrap { position: relative; }
.jira-block-key {
  height: 30px !important; padding: 0 1.7rem 0 0.6rem !important;
  font-family: 'SF Mono','Fira Code','Consolas',monospace;
  font-size: 0.78rem !important; letter-spacing: 0.01em;
}
.jira-block-spinner {
  position: absolute; right: 0.48rem; top: 50%; transform: translateY(-50%);
  font-size: 0.7rem; color: var(--faya-blue); display: none; pointer-events: none;
}
.jira-block-spinner.active { display: block; }
.jira-block-summary {
  height: 30px !important; padding: 0 0.6rem !important;
  font-size: 0.78rem !important; color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg) !important; cursor: default;
  border-color: var(--tm-border) !important;
}
.jira-block-meta { grid-column: 1 / -1; padding-top: 0.2rem; line-height: 1.2; }
.jira-block-meta:empty { display: none; padding: 0; }
.jira-block-badge { font-size: 0.68rem; color: #16a34a; display: inline-flex; align-items: center; gap: 3px; }
.jira-block-err {
  font-size: 0.68rem; color: #dc3545; display: inline-flex; align-items: center; gap: 3px;
  background: #dc354510; padding: 1px 6px; border-radius: 4px;
}
.jira-block-remove {
  flex-shrink: 0; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 3px; padding: 0; opacity: 0.35;
  background: none; border: none; cursor: pointer; color: var(--bs-secondary-color);
  font-size: 0.82rem; line-height: 1;
  border-radius: 5px; transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.jira-block-remove:hover { opacity: 1; color: #dc3545; background: #dc354512; }

/* Add Jira button */
.tm-add-jira-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 0.4rem; padding: 0.26rem 0.8rem;
  font-size: 0.74rem; font-weight: 600;
  border: 1.5px dashed var(--tm-border); border-radius: 7px;
  background: none; color: var(--bs-secondary-color); cursor: pointer;
  transition: all 0.15s;
}
.tm-add-jira-btn:hover {
  border-color: var(--faya-blue); color: var(--faya-blue);
  background: color-mix(in srgb, var(--faya-blue) 5%, transparent);
}

/* ── Core details row spacing ── */
.tm-section .row.g-3 { --bs-gutter-y: 0.55rem; --bs-gutter-x: 0.7rem; }

/* ── Description — primary content area ── */
.tm-desc-wrap {
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--tm-ctrl-bg);
}
.tm-desc-ta {
  /* Height: tall enough to read multi-line content without scrolling immediately */
  min-height: 130px;
  max-height: 260px;
  border: none; resize: vertical; overflow-y: auto;
  /* Typography: slightly larger, looser line-height — feels like a doc editor */
  font-size: 0.855rem;
  line-height: 1.75;
  color: var(--bs-body-color);
  border-radius: 0; box-shadow: none !important;
  padding: 0.75rem 0.9rem;
  background: transparent;
  width: 100%;
  display: block;
  box-sizing: border-box;
}
.tm-desc-ta::placeholder {
  color: var(--bs-secondary-color);
  opacity: 0.6;
  font-style: italic;
  line-height: 1.75;
}
.tm-desc-ta:focus { border: none; outline: none; box-shadow: none !important; }
.tm-desc-wrap:focus-within {
  border-color: var(--faya-blue);
  background: var(--bs-body-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--faya-blue) 14%, transparent);
}
.tm-desc-ta::-webkit-scrollbar { width: 4px; }
.tm-desc-ta::-webkit-scrollbar-thumb { background: var(--tm-border); border-radius: 2px; }

/* ── Notes — secondary, compact ── */
.tm-notes-ta {
  min-height: 72px;
  max-height: 140px;
  resize: vertical; overflow-y: auto;
  font-size: 0.835rem;
  line-height: 1.65;
  color: var(--bs-body-color);
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--tm-border) !important;
  border-radius: 10px !important;
  background: var(--tm-ctrl-bg) !important;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
  width: 100%; display: block; box-sizing: border-box;
}
.tm-notes-ta::placeholder {
  color: var(--bs-secondary-color);
  opacity: 0.6;
  font-style: italic;
}
.tm-notes-ta:hover:not(:focus) {
  border-color: var(--tm-border-hover) !important;
  background: var(--bs-body-bg) !important;
}
.tm-notes-ta:focus {
  border-color: var(--faya-blue) !important;
  background: var(--bs-body-bg) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--faya-blue) 14%, transparent) !important;
  outline: none !important;
}
.tm-notes-ta::-webkit-scrollbar { width: 4px; }
.tm-notes-ta::-webkit-scrollbar-thumb { background: var(--tm-border); border-radius: 2px; }

/* ── POD selector reveal ── */
#pod-selector-wrap { animation: podReveal 0.18s ease; }
@keyframes podReveal { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }

/* ── Gate checklist items ── */
.tm-gate-item {
  display: flex; align-items: center; gap: 0.38rem;
  padding: 0.3rem 0.5rem;
  border: 1.5px solid var(--tm-border);
  border-radius: 7px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--tm-ctrl-bg);
  height: 34px;
}
.tm-gate-item:has(input:checked) {
  border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 6%, var(--bs-body-bg));
}
.tm-gate-item input  { cursor: pointer; accent-color: #16a34a; margin: 0; flex-shrink: 0; }
.tm-gate-item label  { cursor: pointer; font-size: 0.76rem; margin: 0; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-gate-item:hover  { border-color: var(--faya-blue); }
/* Tighter gutter for gate grid */
#task-gates-checkboxes { --bs-gutter-y: 0.4rem; --bs-gutter-x: 0.5rem; }

/* ── Footer ── */
.tm-footer {
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 1.2rem;
  border-top: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  /* subtle upward shadow so footer reads as sticky even without position:sticky */
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}
.tm-footer .btn {
  font-size: 0.8rem;
  padding: 0.32rem 1rem;
  height: 32px; line-height: 1;
  display: inline-flex; align-items: center; gap: 4px;
}
.tm-footer .btn-primary { min-width: 96px; }
.tm-footer-meta { font-size: 0.69rem; color: var(--bs-secondary-color); }

/* ── Mobile responsive ── */
@media (max-width: 575px) {
  #taskModal .modal-dialog { margin: 0.5rem; }
  .tm-header { padding: 0.6rem 0.85rem; }
  .tm-header-sub { display: none; }          /* hide subtitle on tiny screens */
  .tm-section { padding: 0.55rem 0.85rem; }
  .jira-block-fields { grid-template-columns: 1fr; }  /* stack key + summary */
  .jira-block-summary { border-top: 1px solid var(--bs-border-color); }
  .tm-section-hint { display: none; }        /* too long on mobile */
}

/* ── Dark mode ── */
[data-bs-theme="dark"] .jira-block        { background: rgba(255,255,255,0.02); }
[data-bs-theme="dark"] .jira-block-summary{ background: rgba(0,0,0,0.15) !important; }
[data-bs-theme="dark"] .tm-gate-item      { background: rgba(255,255,255,0.02); }
[data-bs-theme="dark"] .tm-footer         { box-shadow: 0 -2px 8px rgba(0,0,0,0.25); }
[data-bs-theme="dark"] .tm-section:nth-child(odd) { background: rgba(255,255,255,0.015); }

/* ══════════════════════════════════════
   DEPLOYMENT — Environment Badges
══════════════════════════════════════ */
.env-badge {
  display: inline-block;
  font-size: 0.58rem; padding: 1px 5px; border-radius: 4px;
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  vertical-align: middle; line-height: 1.5; white-space: nowrap;
}
.env-badge-dev     { background: var(--env-dev-bg);     color: var(--env-dev-fg); }
.env-badge-staging { background: var(--env-staging-bg); color: var(--env-staging-fg); }
.env-badge-beta    { background: var(--env-beta-bg);    color: var(--env-beta-fg); }
.env-badge-live    { background: var(--env-live-bg);    color: var(--env-live-fg); }
.env-badge-pod     { background: var(--env-pod-bg);     color: var(--env-pod-fg); }
[data-bs-theme="dark"] .env-badge-dev     { background: #1e3a8a28; color: #93c5fd; }
[data-bs-theme="dark"] .env-badge-staging { background: #7c2d1228; color: #fdba74; }
[data-bs-theme="dark"] .env-badge-beta    { background: #4c1d9528; color: #c4b5fd; }
[data-bs-theme="dark"] .env-badge-live    { background: #14532d28; color: #86efac; }
[data-bs-theme="dark"] .env-badge-pod     { background: #0c4a6e28; color: #7dd3fc; }

/* ══════════════════════════════════════
   SETTINGS — Store Management
══════════════════════════════════════ */
/* Store list — two-section layout */
.store-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; }

.store-group { display: flex; flex-direction: column; gap: 0.5rem; }

.store-group-hdr {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 4px 8px; border-radius: 6px;
}
.store-group-hdr--faya   { background: #eff6ff; color: #1d4ed8; }
.store-group-hdr--client { background: #f0fdf4; color: #15803d; }
[data-bs-theme="dark"] .store-group-hdr--faya   { background: #0c1a3a; color: #93c5fd; }
[data-bs-theme="dark"] .store-group-hdr--client { background: #052e16; color: #6ee7b7; }

.store-group-count {
  font-size: 0.65rem; background: rgba(0,0,0,.08);
  border-radius: 20px; padding: 0 6px; font-weight: 700;
}

.store-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0; }

.store-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.76rem; font-weight: 600;
  padding: 3px 8px 3px 10px; border-radius: 20px;
  border: 1.5px solid; transition: all .13s;
}
.store-chip--faya {
  background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe;
}
.store-chip--faya:hover { background: #dbeafe; border-color: #93c5fd; }
.store-chip--client {
  background: #f0fdf4; color: #15803d; border-color: #bbf7d0;
}
.store-chip--client:hover { background: #dcfce7; border-color: #6ee7b7; }
[data-bs-theme="dark"] .store-chip--faya   { background: #0c1a3a; color: #93c5fd; border-color: #1e3a5f; }
[data-bs-theme="dark"] .store-chip--client { background: #052e16; color: #6ee7b7; border-color: #14532d; }

.store-chip-del {
  background: none; border: none; padding: 0; cursor: pointer;
  color: inherit; opacity: 0.5; line-height: 1; font-size: 0.7rem;
  display: flex; align-items: center; transition: opacity .13s;
}
.store-chip-del:hover { opacity: 1; color: #ef4444; }

/* Legacy item styles kept in case used elsewhere */
.store-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--bs-border-color); border-radius: 8px;
  background: var(--bs-body-bg); transition: border-color 0.12s;
}
.store-item:hover { border-color: var(--faya-blue); }
.store-item-name  { flex: 1; font-size: 0.83rem; font-weight: 500; }
.store-item-cat   { font-size: 0.68rem; padding: 1px 7px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.store-cat-faya   { background: var(--env-dev-bg);  color: var(--env-dev-fg); }
.store-cat-client { background: var(--env-live-bg); color: var(--env-live-fg); }
.store-item-del {
  background: none; border: none; cursor: pointer;
  color: var(--bs-secondary-color); padding: 2px 4px; border-radius: 4px;
  font-size: 0.78rem; line-height: 1; transition: color 0.12s;
}
.store-item-del:hover { color: #dc3545; }
.store-empty { font-size: 0.78rem; color: var(--bs-secondary-color); padding: 0.35rem 0; font-style: italic; }

/* ══════════════════════════════════════
   KNOWLEDGE HUB — Documentation Center
══════════════════════════════════════ */
/* SRS upload hint row */
.kb-srs-hint {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.74rem; color: var(--bs-secondary-color);
  padding: 0.3rem 0.6rem;
  border: 1px dashed var(--bs-border-color); border-radius: 7px;
  cursor: pointer; transition: border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.kb-srs-hint:hover { border-color: var(--faya-blue); color: var(--faya-blue); }

/* Category section header inside KB grid */
.kb-category-hdr {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.15rem 0; margin-top: 0.5rem;
}
.kb-category-hdr-line { flex: 1; height: 1px; background: var(--bs-border-color); }
.kb-category-hdr-lbl {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--bs-secondary-color); white-space: nowrap;
}

/* SRS card featured accent */
.kb-card[data-type="srs"] {
  border-left: 3px solid var(--env-dev-fg);
}
.kb-card[data-type="srs"] .kb-card-icon { border-radius: 8px; }

/* ══════════════════════════════════════
   BOARD — deployment context strip
══════════════════════════════════════ */
/* Store + env context shown below summary text in board rows */
.brd-context-strip {
  display: flex; align-items: center; gap: 4px;
  margin-top: 2px; flex-wrap: wrap;
}
.brd-store-pill {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600;
  padding: 2px 7px; border-radius: 5px;
  background: #f1f5f9; color: #475569;
  border: 1px solid #e2e8f0;
  white-space: nowrap; max-width: 115px;
  overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
[data-bs-theme="dark"] .brd-store-pill {
  background: #1e293b; color: #94a3b8; border-color: #334155;
}

/* Compact Close/Done button */
.brd-done-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 9px;
  font-size: 0.74rem; font-weight: 600; font-family: inherit;
  color: #15803d; background: #dcfce7;
  border: 1.5px solid #bbf7d0; border-radius: 6px;
  cursor: pointer; white-space: nowrap;
  transition: all .13s;
}
.brd-done-btn i { font-size: 0.82rem; }
.brd-done-btn:hover { background: #10b981; color: #fff; border-color: #10b981; }
[data-bs-theme="dark"] .brd-done-btn { background: #052e16; color: #6ee7b7; border-color: #14532d; }
[data-bs-theme="dark"] .brd-done-btn:hover { background: #10b981; color: #fff; }

/* ══════════════════════════════════════
   DASHBOARD — QA Operations Command Center  v2
══════════════════════════════════════ */

/* ── Dashboard design tokens ─────────── */
:root {
  --dash-page-bg:     #f4f6f9;
  --dash-card-bg:     #ffffff;
  --dash-card-border: #e2e8f0;
  --dash-card-hdr-bg: #f8fafc;
  --dash-card-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --dash-card-shadow-hover: 0 4px 14px rgba(0,0,0,.10);
  --dash-divider:     #edf0f4;
  --dash-row-hover:   rgba(46,117,182,.04);
  --dash-radius:      12px;
  --dash-radius-sm:   8px;
  --dash-radius-xs:   5px;
}
[data-bs-theme="dark"] {
  --dash-page-bg:     #0f1117;
  --dash-card-bg:     #1a1d24;
  --dash-card-border: #2a2f3d;
  --dash-card-hdr-bg: #161920;
  --dash-card-shadow: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --dash-card-shadow-hover: 0 4px 18px rgba(0,0,0,.45);
  --dash-divider:     #222535;
  --dash-row-hover:   rgba(46,117,182,.07);
}

/* ── Page surface ────────────────────── */
#page-dashboard {
  background: var(--dash-page-bg);
  margin: -1rem -0.75rem;
  padding: 1.25rem 1rem;
  min-height: calc(100vh - 56px);
}

/* ── Page header ─────────────────────── */
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.dash-greeting {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--bs-body-color);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.dash-sub {
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
  margin-top: 3px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ── Card shell ──────────────────────── */
.dash-card {
  background: var(--dash-card-bg);
  border: 1px solid var(--dash-card-border);
  border-radius: var(--dash-radius);
  box-shadow: var(--dash-card-shadow);
  overflow: hidden;
  transition: box-shadow 0.18s ease;
}
.dash-card:hover {
  box-shadow: var(--dash-card-shadow-hover);
}

/* ── Card header ─────────────────────── */
.dash-card-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--dash-card-border);
  background: var(--dash-card-hdr-bg);
  min-height: 44px;
}
.dash-card-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bs-body-color);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex: 1;
}
.dash-ico {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
}

/* ── AI Executive Summary — Operations Briefing ── */
/* ══════════════════════════════════════
   OB — Operations Briefing
   Layout: gradient hero (greeting + 5 stats)
         + two action panels (actions | risks)
   Inspired by Linear · Atlassian · GitHub
══════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   AI EXECUTIVE SUMMARY — complete redesign
   ══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   AI EXECUTIVE SUMMARY — Tabler-style clean design
   ══════════════════════════════════════════════════ */
.ob-shell { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; }

/* ── Hero: clean white with subtle accent ─── */
.ob-hero {
  display: grid;
  grid-template-columns: minmax(340px, 32%) 1fr;
  background: #ffffff;
  border-bottom: 1.5px solid #e2e8f0;
  position: relative; overflow: hidden;
}
[data-bs-theme="dark"] .ob-hero { background: #1a2535; border-bottom-color: #263548; }

/* Blue accent bar on left edge */
.ob-hero::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #2563eb, #7c3aed);
  z-index: 2;
}

/* Neural network SVG watermark — subtle on white */
.ob-neural-bg {
  position: absolute; right: 0; top: 0;
  width: 380px; height: 100%; opacity: 0.08;
  pointer-events: none; z-index: 0;
}
[data-bs-theme="dark"] .ob-neural-bg { opacity: 0.18; }

/* No legacy glow elements */
.ob-glow { display: none; }

/* ── Left: greeting column ─── */
.ob-left {
  padding: 1.1rem 1.3rem 1rem 1.5rem;
  display: flex; flex-direction: column; gap: 6px;
  border-right: 1.5px solid #e2e8f0;
  position: relative; z-index: 1;
  background: #fafbff;
  min-width: 0; overflow: visible;
}
[data-bs-theme="dark"] .ob-left { background: #161f2d; border-right-color: #263548; }

.ob-ai-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #2563eb;
  width: fit-content;
}
.ob-ai-badge i { font-size: .75rem; color: #2563eb; }
[data-bs-theme="dark"] .ob-ai-badge { background: #0c1a3a; border-color: #1e3a5f; color: #93c5fd; }

.ob-greeting {
  font-size: 1.15rem; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.3;
  color: #0f172a;
}
[data-bs-theme="dark"] .ob-greeting { color: #f1f5f9; }

.ob-prose {
  font-size: 0.8rem; line-height: 1.65;
  color: #475569;
  flex: 1;
}
[data-bs-theme="dark"] .ob-prose { color: #94a3b8; }

/* Highlight colours */
.ob-hi-red    { color: #dc2626; font-weight: 700; }
.ob-hi-amber  { color: #d97706; font-weight: 700; }
.ob-hi-green  { color: #16a34a; font-weight: 700; }
.ob-hi-purple { color: #7c3aed; font-weight: 700; }
[data-bs-theme="dark"] .ob-hi-red    { color: #f87171; }
[data-bs-theme="dark"] .ob-hi-amber  { color: #fbbf24; }
[data-bs-theme="dark"] .ob-hi-green  { color: #4ade80; }
[data-bs-theme="dark"] .ob-hi-purple { color: #c4b5fd; }

/* ── Quick Action Toolbar ─── */
.ob-toolbar {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: auto; position: relative; z-index: 4;
  pointer-events: auto; padding-top: 6px;
}
.ob-toolbar-label {
  font-size: 0.57rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: #94a3b8; white-space: nowrap; flex-shrink: 0;
}
.ob-toolbar-actions {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: none; border: none; padding: 0;
}
.ob-toolbar-sep { display: none; }

.ob-tbtn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 12px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: all .15s;
  border: 1.5px solid #e2e8f0;
  background: #ffffff; color: #475569;
}
.ob-tbtn i { font-size: 0.75rem; }
.ob-tbtn span { line-height: 1; }
.ob-tbtn:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
[data-bs-theme="dark"] .ob-tbtn { background: #1e2a3a; border-color: #2d4059; color: #94a3b8; }
[data-bs-theme="dark"] .ob-tbtn:hover { border-color: #3b82f6; color: #93c5fd; background: rgba(37,99,235,.1); }
.ob-tbtn--primary {
  background: #2563eb; color: #fff; border-color: #2563eb;
  box-shadow: 0 1px 4px rgba(37,99,235,.3);
}
.ob-tbtn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.ob-tbtn--more { color: #64748b; }
.ob-tbtn--more { color: #64748b; }

.ob-toolbar-mobile { display: none; align-items: center; gap: 4px; }
.ob-dropdown { position: relative; }
.ob-dropdown-menu {
  display: none; position: absolute; bottom: calc(100% + 5px); left: 0;
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.1);
  padding: 4px; min-width: 150px; z-index: 200;
}
[data-bs-theme="dark"] .ob-dropdown-menu { background: #1e2a3a; border-color: #3a4d66; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.ob-dropdown--open .ob-dropdown-menu { display: flex; flex-direction: column; }
.ob-dropdown-item {
  display: flex; align-items: center; gap: 7px; padding: 6px 10px;
  font-size: 0.76rem; font-weight: 500; border-radius: 5px;
  border: none; background: transparent; color: #374151;
  cursor: pointer; text-align: left;
}
.ob-dropdown-item i { font-size: 0.8rem; color: #6b7280; }
.ob-dropdown-item:hover { background: #f8fafc; }
[data-bs-theme="dark"] .ob-dropdown-item { color: #cbd5e1; }
[data-bs-theme="dark"] .ob-dropdown-item:hover { background: #243042; }
@media (max-width: 680px) { .ob-toolbar-actions { display: none; } .ob-toolbar-mobile { display: flex; } }
.ob-quick, .ob-quick-btn { display: none; }

/* ── KPI stat columns ─── */
.ob-stats {
  display: flex; align-items: stretch;
  position: relative; z-index: 1;
}
.ob-stat {
  flex: 1; min-width: 0;
  padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: 3px;
  border-right: 1.5px solid #e2e8f0;
  background: #ffffff;
  transition: background .12s;
}
.ob-stat:last-child { border-right: none; }
.ob-stat:hover { background: #fafbff; }
[data-bs-theme="dark"] .ob-stat { background: #1a2535; border-right-color: #263548; }
[data-bs-theme="dark"] .ob-stat:hover { background: #1e2d40; }

.ob-stat-top {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.ob-stat-icon-wrap {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem;
}
.ob-stat-label {
  font-size: 0.57rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: #94a3b8; white-space: nowrap;
}

.ob-stat-num {
  font-size: 1.55rem; font-weight: 900;
  letter-spacing: -0.03em; line-height: 1;
}
.ob-stat-sub {
  font-size: 0.68rem; color: #64748b;
  font-weight: 400; line-height: 1.3;
}
[data-bs-theme="dark"] .ob-stat-sub { color: #64748b; }

.ob-stat-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: .6rem; font-weight: 700;
  white-space: nowrap; width: fit-content;
  margin-top: 3px;
}

/* ── Bottom action panels ─── */
.ob-panels { display: grid; grid-template-columns: 1fr 1fr; background: #ffffff; }
[data-bs-theme="dark"] .ob-panels { background: #1a2535; }
.ob-panel { display: flex; flex-direction: column; }
.ob-panel--left { border-right: 1px solid #e2e8f0; }
[data-bs-theme="dark"] .ob-panel--left { border-right-color: #263548; }

.ob-panel-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: .55rem 1rem .5rem;
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
[data-bs-theme="dark"] .ob-panel-hdr { background: #131e2e; color: #64748b; border-bottom-color: #263548; }

.ob-panel-badge {
  width: 20px; height: 20px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; flex-shrink: 0;
}
.ob-panel-badge--green { background: #dcfce7; color: #16a34a; }
.ob-panel-badge--red   { background: #fee2e2; color: #dc2626; }
[data-bs-theme="dark"] .ob-panel-badge--green { background: #052e16; color: #4ade80; }
[data-bs-theme="dark"] .ob-panel-badge--red   { background: #450a0a; color: #f87171; }

.ob-item {
  display: flex; align-items: center; gap: 10px;
  padding: .6rem 1.1rem;
  border-bottom: 1px solid var(--dash-divider);
}
.ob-item:last-child { border-bottom: none; }

.ob-item-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.ob-item-body { flex: 1; min-width: 0; }
.ob-item-title {
  font-size: .81rem; font-weight: 600;
  color: var(--bs-body-color); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ob-item-sub {
  font-size: .69rem; color: var(--bs-secondary-color);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ob-item-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 10px; border-radius: 5px;
  font-size: .69rem; font-weight: 600;
  border: 1px solid #e2e8f0;
  background: #fff; color: #374151;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: border-color .12s, background .12s, color .12s;
}
.ob-item-btn i { font-size: .63rem; }
.ob-item-btn:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.ob-item-btn--risk:hover { border-color: #dc2626; color: #dc2626; background: #fef2f2; }
[data-bs-theme="dark"] .ob-item-btn { background: #1e2a3a; border-color: #3a4d66; color: #94a3b8; }
[data-bs-theme="dark"] .ob-item-btn:hover { border-color: #3b82f6; color: #93c5fd; background: #0c1a3a; }

/* Responsive */
@media (max-width: 820px) {
  .ob-hero   { grid-template-columns: 1fr; }
  .ob-stats  { flex-wrap: wrap; border-top: 1px solid var(--dash-divider); }
  .ob-stat   { min-width: 33%; border-bottom: 1px solid var(--dash-divider); }
  .ob-panels { grid-template-columns: 1fr; }
  .ob-panel--left { border-right: none; border-bottom: 1px solid var(--dash-divider); }
}

/* Legacy brief-* hidden — no longer rendered */
.brief-shell { display: none; }

/* ══════════════════════════════════════
   TEAM AVAILABILITY — visual bars
══════════════════════════════════════ */
.dash-avail-bar-track {
  flex: 1;
  height: 5px;
  background: var(--dash-divider);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 10px;
}
.dash-avail-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.45s ease;
  min-width: 2px;
}

/* ══════════════════════════════════════
   TEAM CAPACITY — enhancements
══════════════════════════════════════ */
.cap-row--overloaded { background: rgba(239,68,68,0.04) !important; }
.cap-row--leave      { background: rgba(156,163,175,0.06) !important; opacity: .85; }
.cap-row--overloaded:hover { background: rgba(239,68,68,0.07) !important; }

/* ── Column alignment fix ──────────────────────────────────── */
/* Member col: fixed width so it doesn't expand and push everything */
#dash-capacity-tbody tr td:nth-child(1),
#dash-capacity-tbody tr td:nth-child(1) ~ td { vertical-align: middle; }

/* Target the capacity table headers via the parent card */
.dash-card .board-table thead th:nth-child(1) { width: 200px; min-width: 160px; text-align: left; }
.dash-card .board-table thead th:nth-child(2) { width: 80px;  text-align: center; }
.dash-card .board-table thead th:nth-child(3) { width: 100px; text-align: center; }
.dash-card .board-table thead th:nth-child(4) { width: 90px;  text-align: center; }
.dash-card .board-table thead th:nth-child(5) { width: 120px; text-align: center; }
.dash-card .board-table thead th:nth-child(6) { width: 120px; text-align: left; }
.dash-card .board-table thead th:nth-child(7) { width: 100px; text-align: center; }

/* Match td alignment to th */
#dash-capacity-tbody tr td:nth-child(2) { text-align: center; }
#dash-capacity-tbody tr td:nth-child(3) { text-align: center; }
#dash-capacity-tbody tr td:nth-child(4) { text-align: center; }
#dash-capacity-tbody tr td:nth-child(5) { text-align: center; }
#dash-capacity-tbody tr td:nth-child(7) { text-align: center; }

.cap-workload-wrap {
  width: 100%;
  height: 6px;
  background: var(--dash-divider);
  border-radius: 3px;
  overflow: hidden;
}
.cap-workload-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.45s ease;
  min-width: 2px;
}
.cap-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}
.cap-ai-tip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  color: #7c3aed;
  font-weight: 600;
  margin-top: 2px;
}
.cap-ai-tip i { font-size: 0.7rem; }
.cap-leave-alert {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  color: #f59e0b;
  font-weight: 600;
  margin-top: 2px;
}
.cap-leave-alert i { font-size: 0.7rem; }

/* ══════════════════════════════════════
   RELEASE READINESS indicators
══════════════════════════════════════ */
.rel-readiness {
  margin-top: 6px;
}
.rel-rdy-bar-track {
  width: 100%;
  height: 4px;
  background: var(--dash-divider);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 5px;
}
.rel-rdy-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.45s ease;
  min-width: 2px;
}
.rel-rdy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.rel-rdy-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
}
.rel-rdy-chip i { font-size: 0.68rem; }
.rel-rdy-chip--red    { background: #fee2e2; color: #b91c1c; }
.rel-rdy-chip--blue   { background: #dbeafe; color: #1d4ed8; }
.rel-rdy-chip--green  { background: #dcfce7; color: #15803d; }
[data-bs-theme="dark"] .rel-rdy-chip--red   { background: #450a0a; color: #fca5a5; }
[data-bs-theme="dark"] .rel-rdy-chip--blue  { background: #0c1a3a; color: #93c5fd; }
[data-bs-theme="dark"] .rel-rdy-chip--green { background: #052e16; color: #6ee7b7; }

/* ══════════════════════════════════════
   STANDUP INSIGHTS — AI summary style
══════════════════════════════════════ */
.si-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.6rem 1rem 0.45rem;
  border-bottom: 1px solid var(--dash-divider);
}
.si-ai-icon {
  font-size: 0.85rem;
  color: #7c3aed;
}
.si-ai-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  letter-spacing: 0.03em;
}
.si-bullets {
  padding: 0.5rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.si-bullet {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.81rem;
  line-height: 1.5;
  color: var(--bs-body-color);
}
.si-bullet-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.si-bullet-text strong { font-weight: 700; }

/* ══════════════════════════════════════
   OFFICE HOURS — auto-generated style
══════════════════════════════════════ */
#dash-oh-prep:not(:empty) > .dash-oh-topic:first-child {
  padding-top: 0.75rem;
}

/* ══════════════════════════════════════
   GLOBAL CARD POLISH
══════════════════════════════════════ */
/* Soften card borders site-wide on dashboard */
#page-dashboard .dash-card {
  border-color: var(--dash-card-border);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.04);
}
#page-dashboard .dash-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] #page-dashboard .dash-card {
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* ── QA Board Snapshot ───────────────── */
/* ── QA Board Snapshot — compact metric cards ── */
.snp-shell {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  padding: 0.75rem 0.875rem;
  background: var(--dash-card-bg);
}

/* Individual card */
.snp-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0.6rem 0.75rem 0.55rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.13s, box-shadow 0.13s;
  position: relative;
  border: 1px solid transparent;
}
.snp-card:hover {
  background: var(--dash-page-bg);
  border-color: var(--dash-card-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.snp-card--alert {
  background: rgba(220,38,38,0.03);
}
[data-bs-theme="dark"] .snp-card--alert {
  background: rgba(220,38,38,0.06);
}

/* Top row: icon + alert dot */
.snp-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.55rem;
}
.snp-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.snp-alert-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: snp-pulse 2s ease-in-out infinite;
}
@keyframes snp-pulse {
  0%,100% { opacity:1; }
  50%      { opacity:.35; }
}

/* Count */
.snp-count {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 3px;
}

/* Label */
.snp-label {
  font-size: 0.59rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--bs-secondary-color);
  margin-bottom: 4px;
}

/* Percentage */
.snp-pct {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  margin-bottom: 6px;
}

/* Progress track */
.snp-track {
  width: 100%;
  height: 3px;
  background: var(--dash-divider);
  border-radius: 2px;
  overflow: hidden;
}
.snp-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.45s ease;
  min-width: 2px;
  opacity: 0.75;
}

/* ── Summary row ─────────────────────── */
.snp-summary {
  display: flex;
  align-items: center;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--dash-divider);
  background: var(--dash-card-hdr-bg);
  gap: 0;
}
.snp-sum-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 2px;
}
.snp-sum-val {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bs-body-color);
  line-height: 1.1;
}
.snp-sum-lbl {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}
.snp-sum-div {
  width: 1px;
  height: 28px;
  background: var(--dash-divider);
  flex-shrink: 0;
}
.snp-sum-item--rate .snp-rate-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.snp-rate-track {
  width: 60px;
  height: 3px;
  background: var(--dash-divider);
  border-radius: 2px;
  overflow: hidden;
}
.snp-rate-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.45s ease;
  min-width: 2px;
}

/* Responsive */
@media (max-width: 640px) {
  .snp-shell { grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0.5rem; }
  .snp-summary { flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem; }
  .snp-sum-item { min-width: 45%; }
  .snp-sum-div { display: none; }
}

/* Snapshot container — must be block to show snp-shell/snp-summary children */
.dash-snapshot-grid { display: block; }
/* Legacy snap-item classes no longer used */
.dash-snap-item, .dash-snap-icon, .dash-snap-count,
.dash-snap-label, .dash-snap-bar-wrap, .dash-snap-bar { display: none; }

/* ── Team Availability Summary ───────── */
.dash-avail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.575rem 1rem;
  border-bottom: 1px solid var(--dash-divider);
  transition: background 0.13s;
}
.dash-avail-row:last-child { border-bottom: none; }
.dash-avail-row:hover { background: var(--dash-row-hover); }
.dash-avail-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--bs-body-color);
}
.dash-avail-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-avail-count {
  font-size: 1rem;
  font-weight: 700;
  min-width: 20px;
  text-align: right;
}

/* ── Team Capacity table ─────────────── */
/* Table sits inside .dash-card — tighten it up */
#page-dashboard .dash-card .table {
  margin-bottom: 0;
  font-size: 0.82rem;
}
#page-dashboard .dash-card .table thead tr {
  border-bottom: 2px solid var(--dash-card-border);
}
#page-dashboard .dash-card .table thead th {
  padding: 0.55rem 0.875rem;
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--bs-secondary-color);
  background: var(--dash-card-hdr-bg);
  border-bottom: none;
  white-space: nowrap;
}
#page-dashboard .dash-card .table tbody tr {
  border-bottom: 1px solid var(--dash-divider);
  transition: background 0.13s;
}
#page-dashboard .dash-card .table tbody tr:last-child { border-bottom: none; }
#page-dashboard .dash-card .table tbody tr:hover { background: var(--dash-row-hover); }
#page-dashboard .dash-card .table tbody td {
  padding: 0.65rem 0.875rem;
  vertical-align: middle;
  border-bottom: none;
  font-size: 0.82rem;
}
.dash-cap-bar-wrap {
  width: 68px; height: 4px;
  background: var(--dash-divider);
  border-radius: 2px;
  overflow: hidden;
}
.dash-cap-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.35s ease;
}
.dash-cap-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--dash-radius-xs);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Needs Attention ─────────────────── */
.dash-attention-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--dash-divider);
  transition: background 0.13s;
}
.dash-attention-item:last-child { border-bottom: none; }
.dash-attention-item:hover { background: var(--dash-row-hover); }
.dash-attention-icon {
  width: 26px; height: 26px;
  border-radius: var(--dash-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.dash-attention-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bs-body-color);
  line-height: 1.35;
}
.dash-attention-meta {
  font-size: 0.7rem;
  color: var(--bs-secondary-color);
  margin-top: 2px;
}

/* ── Leave & Availability ────────────── */
.dash-leave-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--dash-divider);
  transition: background 0.13s;
}
.dash-leave-item:last-child { border-bottom: none; }
.dash-leave-item:hover { background: var(--dash-row-hover); }
.dash-leave-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 800;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.dash-leave-info { flex: 1; min-width: 0; }
.dash-leave-name {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--bs-body-color);
  line-height: 1.3;
}
.dash-leave-dates {
  font-size: 0.7rem;
  color: var(--bs-secondary-color);
  margin-top: 1px;
}
.dash-leave-badge {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--dash-radius-xs);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Release Calendar ────────────────── */
.dash-release-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--dash-divider);
  transition: background 0.13s;
}
.dash-release-item:last-child { border-bottom: none; }
.dash-release-item:hover { background: var(--dash-row-hover); }
.dash-release-date-box {
  width: 40px; height: 40px;
  border-radius: var(--dash-radius-sm);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
  line-height: 1.1;
  border: 1px solid transparent;
}
.dash-release-date-day {
  font-size: 1.05rem;
  line-height: 1;
}
.dash-release-date-mon {
  font-size: 0.57rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.75;
  margin-top: 1px;
}
.dash-release-info { flex: 1; min-width: 0; }
.dash-release-name {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--bs-body-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-release-meta {
  font-size: 0.7rem;
  color: var(--bs-secondary-color);
  margin-top: 2px;
}
.dash-release-badge {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--dash-radius-xs);
  flex-shrink: 0;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ── Standup Insights ────────────────── */
.dash-insight-item {
  padding: 0.6rem 0.875rem;
  border-left: 3px solid;
  border-radius: 0 var(--dash-radius-sm) var(--dash-radius-sm) 0;
  margin-bottom: 0.5rem;
  background: var(--dash-page-bg);
  font-size: 0.82rem;
  transition: filter 0.13s;
}
.dash-insight-item:last-child { margin-bottom: 0; }
.dash-insight-item:hover { filter: brightness(0.97); }
.dash-insight-label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 4px;
}
.dash-insight-text {
  color: var(--bs-body-color);
  font-weight: 500;
  line-height: 1.45;
  font-size: 0.82rem;
}

/* ── Office Hours Prep ───────────────── */
.dash-oh-topic {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--dash-divider);
  transition: background 0.13s;
}
.dash-oh-topic:last-child { border-bottom: none; }
.dash-oh-topic:hover { background: var(--dash-row-hover); }
.dash-oh-num {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--faya-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.63rem; font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
  letter-spacing: 0;
}
.dash-oh-text {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--bs-body-color);
  line-height: 1.4;
}
.dash-oh-meta {
  font-size: 0.69rem;
  color: var(--bs-secondary-color);
  margin-top: 2px;
}

/* ── Activity Feed ───────────────────── */
.dash-feed {
  max-height: 310px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--dash-card-border) transparent;
}
.dash-feed::-webkit-scrollbar { width: 4px; }
.dash-feed::-webkit-scrollbar-track { background: transparent; }
.dash-feed::-webkit-scrollbar-thumb { background: var(--dash-card-border); border-radius: 2px; }
.dash-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--dash-divider);
  transition: background 0.13s;
}
.dash-feed-item:last-child { border-bottom: none; }
.dash-feed-item:hover { background: var(--dash-row-hover); }
.dash-feed-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 800;
  flex-shrink: 0;
  letter-spacing: 0.01em;
  margin-top: 1px;
}
.dash-feed-body { flex: 1; min-width: 0; }
.dash-feed-actor {
  font-size: 0.81rem;
  font-weight: 700;
  color: var(--bs-body-color);
}
.dash-feed-action {
  font-size: 0.81rem;
  color: var(--bs-secondary-color);
}
.dash-feed-target {
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--faya-blue);
}
.dash-feed-time {
  font-size: 0.68rem;
  color: var(--bs-secondary-color);
  margin-top: 2px;
  white-space: nowrap;
}

/* ── Empty states ────────────────────── */
.dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.25rem 1.5rem;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  gap: 0.5rem;
  text-align: center;
}
.dash-empty i {
  font-size: 1.75rem;
  opacity: 0.3;
  display: block;
}

/* ── Needs Attention scrollable area ─── */
#dash-attention {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--dash-card-border) transparent;
}
#dash-attention::-webkit-scrollbar { width: 4px; }
#dash-attention::-webkit-scrollbar-track { background: transparent; }
#dash-attention::-webkit-scrollbar-thumb { background: var(--dash-card-border); border-radius: 2px; }

/* ── Padding on padded sections ──────── */
#dash-leave,
#dash-releases,
#dash-oh-prep { padding: 0; }

/* Remove old px-3 pb-3 from inner content wrappers on dashboard */
#page-dashboard .dash-card .px-3 { padding-left: 0 !important; padding-right: 0 !important; }
#page-dashboard .dash-card .pb-3 { padding-bottom: 0 !important; }
#page-dashboard .dash-card .p-3  { padding: 0 !important; }

/* ── AI insight card inside summary ─── */
#page-dashboard .ai-insight-card {
  margin: 0 0.875rem 0.875rem;
  border-radius: var(--dash-radius-sm);
}

/* ── Standup insights inner wrap ─────── */
#dash-standup-insights > div { padding: 0.75rem; }

/* ── OH prep inner wrap — preserve dash-oh-topic's own padding ── */
#dash-oh-prep > div:not(.dash-oh-topic) { padding: 0; }

/* ── Dark mode — comprehensive ─────── */
[data-bs-theme="dark"] .dash-card {
  box-shadow: var(--dash-card-shadow);
}
[data-bs-theme="dark"] .dash-card:hover {
  box-shadow: var(--dash-card-shadow-hover);
}
[data-bs-theme="dark"] .dash-ai-item {
  background: var(--dash-card-hdr-bg);
  border-color: var(--dash-card-border);
}
[data-bs-theme="dark"] .dash-ai-item:hover {
  border-color: var(--faya-blue);
}
[data-bs-theme="dark"] .dash-snap-item:hover,
[data-bs-theme="dark"] .dash-avail-row:hover,
[data-bs-theme="dark"] .dash-attention-item:hover,
[data-bs-theme="dark"] .dash-leave-item:hover,
[data-bs-theme="dark"] .dash-release-item:hover,
[data-bs-theme="dark"] .dash-oh-topic:hover,
[data-bs-theme="dark"] .dash-feed-item:hover {
  background: var(--dash-row-hover);
}
[data-bs-theme="dark"] .dash-insight-item {
  background: var(--dash-card-hdr-bg);
}
[data-bs-theme="dark"] .dash-insight-item:hover {
  filter: brightness(1.06);
}
[data-bs-theme="dark"] #page-dashboard .dash-card .table thead th {
  background: var(--dash-card-hdr-bg);
  color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] #page-dashboard .dash-card .table tbody tr:hover {
  background: var(--dash-row-hover);
}
[data-bs-theme="dark"] .dash-release-date-box {
  border-color: var(--dash-card-border);
}
[data-bs-theme="dark"] .dash-cap-bar-wrap {
  background: var(--dash-card-border);
}
[data-bs-theme="dark"] .dash-snap-icon {
  opacity: 0.85;
}
[data-bs-theme="dark"] .dash-snap-bar-wrap {
  background: var(--dash-card-border);
}

/* ── Responsive: collapse snapshot to 3-col on mobile ── */
@media (max-width: 576px) {
  .dash-snapshot-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-snap-item:nth-child(3) { border-right: none; }
  .dash-snap-item:nth-child(4),
  .dash-snap-item:nth-child(5),
  .dash-snap-item:nth-child(6) { border-top: 1px solid var(--dash-divider); }
  .dash-ai-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════
   WEEKLY AUDIT REPORT
   ══════════════════════════════════════════════════ */

/* Toolbar */
.wr-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.85rem; flex-wrap: wrap;
}
.wr-toolbar-left, .wr-toolbar-right { display: flex; align-items: center; gap: 0.5rem; }

.wr-week-nav {
  display: flex; align-items: center; gap: 0.4rem;
  background: #fff; border: 1.5px solid #e2e8f0;
  border-radius: 8px; padding: 3px 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .wr-week-nav { background: #1e2a3a; border-color: #3a4d66; }
.wr-week-label {
  font-size: 0.84rem; font-weight: 700; color: #1e293b;
  padding: 0 0.5rem; white-space: nowrap; min-width: 200px; text-align: center;
}
[data-bs-theme="dark"] .wr-week-label { color: #e2e8f0; }
.wr-week-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 5px;
  border: none; background: transparent;
  color: #64748b; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: background .1s, color .1s;
}
.wr-week-btn:hover { background: #f1f5f9; color: #0f172a; }
[data-bs-theme="dark"] .wr-week-btn:hover { background: #243042; color: #e2e8f0; }
.wr-week-btn--today { color: #2563eb; font-size: 0.73rem; }

.wr-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0.38rem 0.85rem; border-radius: 7px;
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid transparent; transition: all .12s;
}
.wr-btn--primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.wr-btn--primary:hover { background: #1d4ed8; }
.wr-btn--secondary { background: #fff; color: #374151; border-color: #e2e8f0; }
.wr-btn--secondary:hover { border-color: #2563eb; color: #2563eb; }
[data-bs-theme="dark"] .wr-btn--secondary { background: #1e2a3a; color: #94a3b8; border-color: #3a4d66; }

/* Summary stat bar */
.wr-stat-bar {
  display: flex; align-items: stretch; gap: 0.6rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.wr-stat {
  flex: 1; min-width: 120px;
  background: #fff; border: 1.5px solid #e2e8f0;
  border-radius: 9px; padding: 0.7rem 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .wr-stat { background: #1a2535; border-color: #3a4d66; }
.wr-stat--highlight {
  display: flex; align-items: center; gap: 0.65rem;
  border-color: #fde68a; background: #fffbeb;
}
[data-bs-theme="dark"] .wr-stat--highlight { background: #292000; border-color: #854d0e; }
.wr-stat-ico {
  width: 36px; height: 36px; border-radius: 8px;
  background: #fef3c7; color: #b45309; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.wr-stat-val { font-size: 1.4rem; font-weight: 900; color: #0f172a; line-height: 1; }
[data-bs-theme="dark"] .wr-stat-val { color: #f1f5f9; }
.wr-stat-lbl { font-size: 0.67rem; color: #64748b; margin-top: 3px; font-weight: 500; }

/* Loading / empty states */
.wr-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem; padding: 3rem; color: #64748b; font-size: 0.85rem;
}
.wr-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #e2e8f0; border-top-color: #2563eb;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.wr-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.5rem;
  padding: 3rem; color: #94a3b8; font-size: 0.85rem;
  text-align: center;
}
.wr-empty i { font-size: 2rem; opacity: .4; }

/* Member card grid */
.wr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}

/* Member card */
.wr-card {
  background: #fff; border: 1.5px solid #e2e8f0;
  border-radius: 11px; padding: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  display: flex; flex-direction: column; gap: 0.55rem;
  transition: box-shadow .15s, border-color .15s;
}
.wr-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.09); border-color: #93c5fd; }
[data-bs-theme="dark"] .wr-card { background: #1e2a3a; border-color: #3a4d66; }
[data-bs-theme="dark"] .wr-card:hover { border-color: #3b82f6; }
.wr-card--idle { opacity: .65; }

/* Card header */
.wr-card-hdr { display: flex; align-items: center; gap: 0.65rem; }
.wr-avatar {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  border: 2px solid #e2e8f0; flex-shrink: 0;
}
.wr-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.wr-avatar-init {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; color: #fff;
}
.wr-card-info { flex: 1; min-width: 0; }
.wr-card-name { font-size: 0.87rem; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bs-theme="dark"] .wr-card-name { color: #f1f5f9; }
.wr-card-sub { font-size: 0.68rem; color: #64748b; margin-top: 1px; }

.wr-card-score { text-align: center; flex-shrink: 0; }
.wr-score-num { font-size: 1.25rem; font-weight: 900; display: block; line-height: 1; }
.wr-score-lbl { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }

/* Score progress bar */
.wr-score-bar-wrap {
  height: 4px; background: #f1f5f9; border-radius: 999px; overflow: hidden;
}
[data-bs-theme="dark"] .wr-score-bar-wrap { background: #243042; }
.wr-score-bar { height: 100%; border-radius: 999px; transition: width .5s ease; }

/* KPI row */
.wr-kpi-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0; border: 1px solid #f1f5f9; border-radius: 8px; overflow: hidden;
}
[data-bs-theme="dark"] .wr-kpi-row { border-color: #243042; }
.wr-kpi {
  text-align: center; padding: 0.4rem 0.2rem;
  border-right: 1px solid #f1f5f9;
}
[data-bs-theme="dark"] .wr-kpi { border-right-color: #243042; }
.wr-kpi:last-child { border-right: none; }
.wr-kpi-val { font-size: 0.95rem; font-weight: 800; line-height: 1; }
.wr-kpi-lbl { font-size: 0.58rem; color: #94a3b8; margin-top: 2px; white-space: nowrap; }

/* Standup attendance track */
.wr-std-track {
  height: 3px; background: #f1f5f9; border-radius: 999px; overflow: hidden;
}
[data-bs-theme="dark"] .wr-std-track { background: #243042; }
.wr-std-fill { height: 100%; border-radius: 999px; transition: width .5s ease; }

/* Chips */
.wr-chips-row { display: flex; flex-wrap: wrap; gap: 4px; }
.wr-chip {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 999px;
  font-size: 0.63rem; font-weight: 700; white-space: nowrap;
}
.wr-chip--store { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
[data-bs-theme="dark"] .wr-chip--store { background: #0c1a3a; color: #93c5fd; border-color: #1e3a5f; }
.wr-chip--more { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }

/* View detail button */
.wr-detail-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; padding: 0.4rem;
  border: 1px solid #e2e8f0; border-radius: 7px;
  background: #f8fafc; color: #374151;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  transition: border-color .1s, background .1s, color .1s;
  margin-top: auto;
}
.wr-detail-btn:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
[data-bs-theme="dark"] .wr-detail-btn { background: #1a2535; border-color: #3a4d66; color: #94a3b8; }
[data-bs-theme="dark"] .wr-detail-btn:hover { border-color: #3b82f6; color: #93c5fd; background: #0c1a3a; }

/* Slide-in drawer */
.wr-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 480px; max-width: 95vw;
  background: #fff; border-left: 1.5px solid #e2e8f0;
  box-shadow: -4px 0 24px rgba(0,0,0,.1);
  z-index: 1050;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s ease;
  overflow: hidden;
}
[data-bs-theme="dark"] .wr-drawer { background: #1a2535; border-left-color: #3a4d66; }
.wr-drawer--open { transform: translateX(0); }

.wr-drawer-hdr {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0; background: #f8fafc;
}
[data-bs-theme="dark"] .wr-drawer-hdr { background: #161f2d; border-bottom-color: #2e3d52; }
.wr-drawer-name { font-size: 1rem; font-weight: 800; color: #0f172a; }
[data-bs-theme="dark"] .wr-drawer-name { color: #f1f5f9; }
.wr-drawer-sub { font-size: 0.72rem; color: #64748b; margin-top: 3px; }
.wr-drawer-close {
  width: 28px; height: 28px; border-radius: 6px;
  border: none; background: transparent; color: #64748b;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; flex-shrink: 0;
  transition: background .1s;
}
.wr-drawer-close:hover { background: #fee2e2; color: #dc2626; }

.wr-drawer-body { flex: 1; overflow-y: auto; padding: 0.5rem 0; }
.wr-drawer-section { padding: 0.75rem 1.25rem 0.5rem; }
.wr-drawer-section-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: #94a3b8; margin-bottom: 0.5rem;
}

/* Task rows in drawer */
.wr-task-row {
  display: flex; align-items: flex-start; gap: 0.65rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid #f8fafc;
}
[data-bs-theme="dark"] .wr-task-row { border-bottom-color: #1e2d40; }
.wr-task-row:last-child { border-bottom: none; }
.wr-task-row--done .wr-task-title { color: #0f172a; }
[data-bs-theme="dark"] .wr-task-row--done .wr-task-title { color: #f1f5f9; }
.wr-task-ico { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.wr-task-body { flex: 1; min-width: 0; }
.wr-task-title {
  font-size: 0.81rem; font-weight: 600; color: #374151;
  line-height: 1.35; margin-bottom: 4px;
}
[data-bs-theme="dark"] .wr-task-title { color: #cbd5e1; }
.wr-task-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.wr-task-date { font-size: 0.68rem; color: #94a3b8; flex-shrink: 0; padding-top: 2px; }
.wr-task-empty { font-size: 0.78rem; color: #94a3b8; padding: 0.5rem 0; font-style: italic; }

/* Tags in drawer */
.wr-tag {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: 999px;
  font-size: 0.62rem; font-weight: 700;
  background: #f1f5f9; color: #475569;
}
.wr-tag--jira { background: #eff6ff; color: #2563eb; }
.wr-tag--store { background: #f5f3ff; color: #7c3aed; }
.wr-tag--gate { background: #f0fdf4; color: #16a34a; }
[data-bs-theme="dark"] .wr-tag { background: #243042; color: #94a3b8; }
[data-bs-theme="dark"] .wr-tag--jira { background: #0c1a3a; color: #93c5fd; }

/* ══════════════════════════════════════
   QA BOARD — KPI STRIP & INSIGHTS BAR
   ══════════════════════════════════════ */

.brd-kpi-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  padding: 0;
  margin-bottom: 12px;
  overflow: hidden;
}

.brd-kpi-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  flex: 1;
  min-width: 0;
}

.brd-kpi-card--warn { background: rgba(239,68,68,.03); }
.brd-kpi-card--green { background: rgba(16,185,129,.03); }
[data-bs-theme="dark"] .brd-kpi-card--warn  { background: rgba(239,68,68,.06); }
[data-bs-theme="dark"] .brd-kpi-card--green { background: rgba(16,185,129,.06); }

.brd-kpi-divider {
  width: 1px;
  background: var(--bs-border-color);
  align-self: stretch;
  flex-shrink: 0;
}

.brd-kpi-ico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.brd-kpi-ico--blue   { background: #eff6ff; color: #3b82f6; }
.brd-kpi-ico--teal   { background: #f0fdfa; color: #14b8a6; }
.brd-kpi-ico--purple { background: #faf5ff; color: #8b5cf6; }
.brd-kpi-ico--red    { background: #fef2f2; color: #ef4444; }
.brd-kpi-ico--green  { background: #f0fdf4; color: #10b981; }
[data-bs-theme="dark"] .brd-kpi-ico--blue   { background: #1e3a5f; color: #60a5fa; }
[data-bs-theme="dark"] .brd-kpi-ico--teal   { background: #0d3330; color: #2dd4bf; }
[data-bs-theme="dark"] .brd-kpi-ico--purple { background: #2e1a47; color: #a78bfa; }
[data-bs-theme="dark"] .brd-kpi-ico--red    { background: #3b0a0a; color: #f87171; }
[data-bs-theme="dark"] .brd-kpi-ico--green  { background: #0a2e1a; color: #34d399; }

.brd-kpi-body { min-width: 0; }

.brd-kpi-val {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--bs-body-color);
}

.brd-kpi-val--warn  { color: #ef4444; }
.brd-kpi-val--green { color: #10b981; }

.brd-kpi-lbl {
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Insights bar ─────────────────────────────────── */

.brd-insights-bar {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
  margin-bottom: 10px;
  flex-wrap: wrap;
  row-gap: 4px;
}

.brd-ins-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
}

.brd-ins-val {
  font-weight: 600;
  color: var(--bs-body-color);
}

.brd-ins-val--red { color: #ef4444; font-weight: 700; }

.brd-ins-lbl { color: var(--bs-secondary-color); }

.brd-ins-sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--bs-border-color);
  margin: 0 8px;
  vertical-align: middle;
}

/* ── Toolbar ──────────────────────────────────────── */

.brd-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.brd-search-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
  pointer-events: none;
}

/* ── Section header count badge ───────────────────── */

.brd-hdr-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  background: var(--bs-tertiary-bg);
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bs-secondary-color);
  margin-left: 6px;
}

/* ── Bulk bar inner variant ───────────────────────── */

.brd-bulk-bar--inner {
  border-radius: 8px;
  margin: 6px 0;
}


/* ══════════════════════════════════════════════════════════════
   STANDUP NOTES — sdn-* components
   ══════════════════════════════════════════════════════════════ */

.sdn-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 16px; background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color); flex-wrap: wrap;
}
.sdn-toolbar-left  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sdn-toolbar-right { display: flex; align-items: center; gap: 6px; }
.sdn-date-nav  { display: flex; align-items: center; gap: 4px; }
.sdn-date-wrap { position: relative; display: flex; align-items: center; }
.sdn-date-input {
  border: 1px solid var(--bs-border-color); border-radius: 7px;
  padding: 5px 10px; font-size: 0.83rem; background: var(--bs-body-bg);
  color: var(--bs-body-color); cursor: pointer;
}
.sdn-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; min-width: 30px; padding: 0 8px;
  border: 1px solid var(--bs-border-color); border-radius: 7px;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  font-size: 0.8rem; cursor: pointer; transition: background .12s;
}
.sdn-nav-btn:hover { background: var(--bs-tertiary-bg); }
.sdn-today-btn { font-size: 0.78rem; font-weight: 600; padding: 0 12px; }
.sdn-select {
  border: 1px solid var(--bs-border-color); border-radius: 7px;
  padding: 5px 28px 5px 10px; font-size: 0.82rem;
  background: var(--bs-body-bg); color: var(--bs-body-color); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.sdn-select--sm { font-size: 0.75rem; padding: 3px 24px 3px 8px; }
.sdn-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 14px; border-radius: 7px;
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all .12s;
}
.sdn-btn--primary { background: #2563eb; color: #fff; }
.sdn-btn--primary:hover { background: #1d4ed8; }
.sdn-btn--ghost {
  background: transparent; color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.sdn-btn--ghost:hover { background: var(--bs-tertiary-bg); }
.sdn-btn--draft { background: #7c3aed; color: #fff; }
.sdn-btn--draft:hover { background: #6d28d9; }
.sdn-btn--sm { height: 26px; padding: 0 10px; font-size: 0.75rem; }
.sdn-autosave {
  font-size: 0.72rem; color: var(--bs-secondary-color);
  opacity: 0; transition: opacity .3s;
}
.sdn-autosave.visible { opacity: 1; }
.sdn-statusbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 16px; font-size: 0.78rem; color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color);
}
.sdn-status-badge {
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 600;
  background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
}
.sdn-status-sep { color: var(--bs-border-color); }
.sdn-tab-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 12px; border-radius: 6px; font-size: 0.78rem; font-weight: 500;
  background: transparent; border: none; color: var(--bs-secondary-color); cursor: pointer;
  transition: all .12s;
}
.sdn-tab-btn.active, .sdn-tab-btn:hover {
  background: var(--bs-body-bg); color: var(--bs-body-color);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.sdn-layout {
  display: flex; height: calc(100vh - 200px); min-height: 500px;
  overflow: hidden;
}
.sdn-sidebar {
  width: 240px; flex-shrink: 0; border-right: 1px solid var(--bs-border-color);
  display: flex; flex-direction: column; background: var(--bs-body-bg); overflow: hidden;
}
.sdn-sidebar-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; font-size: 0.78rem; font-weight: 600;
  border-bottom: 1px solid var(--bs-border-color);
}
.sdn-sidebar-search {
  position: relative; padding: 8px 10px;
  border-bottom: 1px solid var(--bs-border-color);
}
.sdn-sidebar-search-ico {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--bs-secondary-color); font-size: 0.8rem;
}
.sdn-sidebar-search-inp {
  width: 100%; padding: 5px 8px 5px 28px; font-size: 0.78rem;
  border: 1px solid var(--bs-border-color); border-radius: 6px;
  background: var(--bs-body-bg); color: var(--bs-body-color);
}
.sdn-date-list { flex: 1; overflow-y: auto; }
.sdn-editor {
  flex: 1; display: flex; flex-direction: column;
  overflow-y: auto; padding: 16px; gap: 12px;
}
/* sdn-attendees-bar base — overridden by final block below */
.sdn-attendees-bar { display: flex; }
.sdn-attendees-lbl { display: flex; }
.sdn-chip-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1; }
.sdn-attendee-sel {
  font-size: 0.75rem; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
  color: var(--bs-body-color);
}
.sdn-add-all-btn {
  font-size: 0.72rem; padding: 3px 10px; border-radius: 6px;
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
  color: var(--bs-secondary-color); cursor: pointer; flex-shrink: 0;
}
.sdn-add-all-btn:hover { background: var(--bs-tertiary-bg); }
.sdn-draft-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: #f5f3ff;
  border: 1px solid #c4b5fd; border-radius: 8px;
}
[data-bs-theme="dark"] .sdn-draft-banner { background: #2e1a47; border-color: #6d28d9; }
.sdn-draft-banner-left { display: flex; align-items: center; gap: 10px; flex: 1; }
.sdn-draft-banner-title { font-size: 0.82rem; font-weight: 600; color: #6d28d9; }
.sdn-draft-banner-sub   { font-size: 0.72rem; color: var(--bs-secondary-color); }
.sdn-banner-dismiss {
  background: none; border: none; color: var(--bs-secondary-color);
  cursor: pointer; font-size: 0.9rem; padding: 2px 6px; border-radius: 4px;
}
.sdn-sections { display: flex; flex-direction: column; gap: 12px; }
.sdn-section  { display: flex; flex-direction: column; gap: 0; }
.sdn-section-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px 8px 0 0; font-size: 0.8rem; font-weight: 600;
}
.sdn-hdr--teal  { background: #f0fdfa; color: #0d9488; border: 1px solid #99f6e4; }
.sdn-hdr--blue  { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.sdn-hdr--red   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
[data-bs-theme="dark"] .sdn-hdr--teal  { background: #0d3330; color: #2dd4bf; border-color: #134e4a; }
[data-bs-theme="dark"] .sdn-hdr--blue  { background: #1e3a5f; color: #60a5fa; border-color: #1e40af; }
[data-bs-theme="dark"] .sdn-hdr--red   { background: #3b0a0a; color: #f87171; border-color: #7f1d1d; }
.sdn-copy-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 5px; font-size: 0.72rem;
  background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.1);
  color: inherit; cursor: pointer; transition: background .12s;
}
.sdn-copy-btn:hover { background: rgba(255,255,255,.9); }
.sdn-none-badge {
  font-size: 0.7rem; padding: 1px 8px; border-radius: 8px;
  background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
}
.sdn-task-count-badge {
  font-size: 0.7rem; padding: 1px 8px; border-radius: 8px;
  background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; font-weight: 600;
}
.sdn-ta-wrap { position: relative; }
.sdn-ta {
  width: 100%; min-height: 90px; padding: 10px 12px;
  border: 1px solid var(--bs-border-color); border-top: none;
  border-radius: 0 0 8px 8px; font-size: 0.83rem; line-height: 1.5;
  resize: vertical; background: var(--bs-body-bg); color: var(--bs-body-color);
  font-family: inherit; transition: border-color .15s;
}
.sdn-ta:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.sdn-ta--today { min-height: 120px; }
.sdn-ta-foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; padding: 3px 8px; font-size: 0.68rem; color: var(--bs-secondary-color);
}
.sdn-check { color: #10b981; font-size: 0.9rem; }
.sdn-char  { color: var(--bs-secondary-color); }
.sdn-preview-panel { flex: 1; overflow-y: auto; padding: 20px 24px; }
.sdn-preview-content { font-size: 0.85rem; line-height: 1.65; color: var(--bs-body-color); }

/* ══════════════════════════════════════════════════════════════
   KNOWLEDGE HUB — kb2-* toolbar, search, stats, tags
   ══════════════════════════════════════════════════════════════ */

.kb2-page-hdr  { margin-bottom: 16px; }
.kb2-page-title { font-size: 1.35rem; font-weight: 700; color: var(--bs-body-color); margin: 0 0 4px; }
.kb2-page-sub  { font-size: 0.83rem; color: var(--bs-secondary-color); }
.kb2-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.kb2-search-wrap {
  position: relative; flex: 1; min-width: 200px; max-width: 460px;
}
.kb2-search-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--bs-secondary-color); font-size: 0.85rem; pointer-events: none;
}
.kb2-search-inp {
  width: 100%; padding: 7px 80px 7px 32px;
  border: 1px solid var(--bs-border-color); border-radius: 8px;
  font-size: 0.82rem; background: var(--bs-body-bg); color: var(--bs-body-color);
  transition: border-color .15s;
}
.kb2-search-inp:focus { outline: none; border-color: #3b82f6; }
.kb2-search-kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 3px;
}
.kb2-search-kbd span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; font-size: 0.65rem; font-weight: 600;
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
  border-radius: 4px; color: var(--bs-secondary-color);
}
.kb2-filter-group { display: flex; align-items: center; gap: 6px; }
.kb2-sel {
  padding: 6px 28px 6px 10px; font-size: 0.8rem;
  border: 1px solid var(--bs-border-color); border-radius: 8px;
  background: var(--bs-body-bg); color: var(--bs-body-color); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.kb2-view-toggle {
  display: flex; gap: 2px; background: var(--bs-tertiary-bg);
  border-radius: 8px; padding: 3px; border: 1px solid var(--bs-border-color);
}
.kb2-view-btn {
  width: 30px; height: 28px; border: none; border-radius: 6px;
  background: transparent; color: var(--bs-secondary-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; cursor: pointer; transition: all .12s;
}
.kb2-view-btn.active {
  background: var(--bs-body-bg); color: var(--bs-body-color);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.kb2-toolbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.kb2-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 14px; border-radius: 8px;
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all .12s; white-space: nowrap;
}
.kb2-btn--primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.kb2-btn--primary:hover { background: #1d4ed8; }
.kb2-btn--ghost {
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.kb2-btn--ghost:hover { background: var(--bs-tertiary-bg); }
.kb2-tag-strip {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
  min-height: 28px; align-items: center;
}
.kb2-stats-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
  font-size: 0.75rem; color: var(--bs-secondary-color);
}
.kb2-tag-chips { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.kb2-tag-input {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--bs-border-color); border-radius: 8px;
  padding: 4px 8px; background: var(--bs-body-bg); flex-wrap: wrap; min-height: 38px;
}
.kb2-tag-text {
  border: none; outline: none; font-size: 0.82rem;
  background: transparent; color: var(--bs-body-color); min-width: 80px;
}
.kb2-linked-tasks { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.kb2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

/* ══════════════════════════════════════════════════════════════
   BULK ACTION BAR — bbl-* components
   ══════════════════════════════════════════════════════════════ */

.bbl-count-wrap { display: flex; align-items: center; }
.bbl-count {
  font-size: 0.78rem; font-weight: 600; color: var(--bs-body-color);
  white-space: nowrap;
}
.bbl-sep {
  width: 1px; height: 20px; background: var(--bs-border-color);
  margin: 0 8px; flex-shrink: 0;
}
.bbl-group { display: flex; align-items: center; gap: 4px; }
.bbl-group--icon { gap: 2px; }
.bbl-control { display: flex; align-items: center; gap: 3px; }
.bbl-sel {
  height: 28px; padding: 0 24px 0 8px; font-size: 0.75rem;
  border: 1px solid var(--bs-border-color); border-radius: 6px;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  appearance: none; cursor: pointer;
}
.bbl-btn {
  height: 28px; padding: 0 10px; border-radius: 6px; font-size: 0.75rem;
  cursor: pointer; border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg); color: var(--bs-body-color); transition: all .12s;
}
.bbl-btn--apply {
  background: #2563eb; color: #fff; border-color: #2563eb;
  width: 28px; padding: 0; display: flex; align-items: center; justify-content: center;
}
.bbl-btn--apply:hover { background: #1d4ed8; }
.bbl-icon-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 8px; border-radius: 6px; font-size: 0.73rem;
  background: transparent; border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color); cursor: pointer; transition: background .12s;
}
.bbl-icon-btn:hover { background: var(--bs-tertiary-bg); }
.bbl-pool-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 10px; border-radius: 6px; font-size: 0.73rem;
  background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa;
  cursor: pointer; font-weight: 600;
}
.bbl-pool-btn:hover { background: #ffedd5; }
.bbl-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; font-size: 0.85rem;
  background: transparent; border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color); cursor: pointer; transition: background .12s;
}
.bbl-close:hover { background: var(--bs-tertiary-bg); }

/* ══════════════════════════════════════════════════════════════
   SETTINGS PREFIX MAPPING — pfx-* components
   ══════════════════════════════════════════════════════════════ */

.pfx-section { margin-bottom: 20px; }
.pfx-section-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.pfx-icon { font-size: 1rem; margin-right: 5px; color: #2563eb; }
.pfx-desc { font-size: 0.78rem; color: var(--bs-secondary-color); margin-top: 3px; }
.pfx-badge {
  font-size: 0.72rem; padding: 3px 10px; border-radius: 20px; font-weight: 600;
  background: color-mix(in srgb, var(--faya-blue) 10%, var(--bs-body-bg));
  color: var(--faya-blue); border: 1px solid color-mix(in srgb, var(--faya-blue) 25%, transparent);
  white-space: nowrap;
}

/* Rules list */
.pfx-rules-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.pfx-rule-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  font-size: 0.82rem;
}
.pfx-rule-prefix {
  font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.82rem;
  background: color-mix(in srgb, var(--faya-blue) 10%, var(--bs-body-bg));
  color: var(--faya-blue); border: 1px solid color-mix(in srgb, var(--faya-blue) 20%, transparent);
  padding: 2px 9px; border-radius: 5px; min-width: 48px; text-align: center;
}
.pfx-rule-arrow { color: var(--bs-secondary-color); font-size: 0.78rem; flex-shrink: 0; }
.pfx-rule-store { flex: 1; color: var(--bs-body-color); font-size: 0.82rem; display: flex; align-items: center; }
.pfx-rule-del {
  margin-left: auto; border: none; background: transparent; cursor: pointer;
  color: var(--bs-secondary-color); padding: 4px 6px; border-radius: 5px;
  font-size: 0.75rem; display: flex; align-items: center; transition: background .12s, color .12s;
}
.pfx-rule-del:hover { background: #fee2e2; color: #dc2626; }
[data-bs-theme="dark"] .pfx-rule-del:hover { background: rgba(220,38,38,.15); color: #f87171; }

/* Empty state */
.pfx-empty {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 8px; margin-bottom: 14px;
  background: var(--bs-tertiary-bg); border: 1px dashed var(--bs-border-color);
  font-size: 0.78rem; color: var(--bs-secondary-color);
}
.pfx-empty-icon { font-size: 1.1rem; opacity: .5; flex-shrink: 0; }

/* Add new rule section */
.pfx-add-section {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 14px; margin-top: 4px;
}
.pfx-add-label {
  font-size: 0.73rem; font-weight: 700; color: var(--bs-secondary-color);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px;
}

/* Add row */
.pfx-add-row {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
}
.pfx-add-field { display: flex; flex-direction: column; gap: 5px; }
.pfx-field-label { font-size: 0.73rem; font-weight: 600; color: var(--bs-body-color); }
.pfx-key-input {
  width: 160px; height: 36px; padding: 0 10px; font-size: 0.85rem;
  font-family: ui-monospace, monospace; font-weight: 600;
  border: 1.5px solid #b8c2d0; border-radius: 7px;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.pfx-key-input::placeholder { font-weight: 400; opacity: .55; }
.pfx-key-input:focus { border-color: var(--faya-blue); box-shadow: 0 0 0 3px rgba(46,117,182,.12); }
[data-bs-theme="dark"] .pfx-key-input { background: #1e2a3a; border-color: #3a4d66; }
.pfx-store-field { min-width: 200px; }
.pfx-add-arrow {
  display: flex; align-items: center; padding-bottom: 6px;
  color: var(--bs-secondary-color); font-size: 0.9rem;
}
.pfx-add-btn { height: 36px; align-self: flex-end; }

/* ══════════════════════════════════════════════════════════════
   LEAVE CALENDAR — lc-* components
   ══════════════════════════════════════════════════════════════ */

.lc-wrap { width: 100%; }
.lc-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: none; border-radius: 5px;
  background: transparent; color: var(--bs-secondary-color); cursor: pointer;
  font-size: 0.8rem; transition: background .12s;
}
.lc-nav-btn:hover { background: var(--bs-tertiary-bg); }
.lc-month-lbl {
  font-size: 0.78rem; font-weight: 600; color: var(--bs-body-color);
  min-width: 80px; text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   POINTS TO DISCUSS — dc-* additional columns
   ══════════════════════════════════════════════════════════════ */

.dc-td-discuss  { max-width: 340px; }
.dc-td-topic    { min-width: 80px; }
.dc-td-status   { min-width: 90px; }
.dc-td-priority { min-width: 80px; text-align: center; }
.dc-td-reporter { min-width: 100px; }
.dc-td-jira     { min-width: 90px; }
.dc-td-created  { min-width: 90px; white-space: nowrap; }
.dc-td-actions  { width: 60px; text-align: center; }
.dc-reporter-info { font-size: 0.75rem; color: var(--bs-secondary-color); }
.dc-page-nav {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 10px 0; font-size: 0.78rem; color: var(--bs-secondary-color);
}
.dc-action-btn--danger {
  color: #dc2626 !important; background: none; border: none; cursor: pointer;
  font-size: 0.82rem; padding: 3px 6px; border-radius: 5px;
}
.dc-action-btn--danger:hover { background: #fef2f2; }

/* ══════════════════════════════════════════════════════════════
   WORK REPORT / AUDIT — wr-* additional components
   ══════════════════════════════════════════════════════════════ */

.wr-page-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.wr-page-hdr-left  { display: flex; align-items: center; gap: 12px; }
.wr-page-title-row { display: flex; align-items: baseline; gap: 10px; }
.wr-page-title { font-size: 1.2rem; font-weight: 700; color: var(--bs-body-color); }
.wr-live-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600;
  background: #dcfce7; color: #166534; border: 1px solid #bbf7d0;
}
.wr-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #16a34a;
  animation: pulse 2s infinite;
}
.wr-month-sel {
  padding: 5px 28px 5px 10px; font-size: 0.82rem;
  border: 1px solid var(--bs-border-color); border-radius: 8px;
  background: var(--bs-body-bg); color: var(--bs-body-color); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.wr-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bs-border-color); margin-bottom: 16px; }
.wr-tab {
  padding: 8px 16px; font-size: 0.82rem; font-weight: 500; cursor: pointer;
  border: none; background: none; color: var(--bs-secondary-color);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .12s;
}
.wr-tab.active, .wr-tab:hover { color: #2563eb; border-bottom-color: #2563eb; }
.wr-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1040;
}
.wr-drawer-hdr-left { display: flex; align-items: center; gap: 10px; }
.wr-indiv-member-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--bs-border-color);
}
.wr-monthly-body    { padding: 4px 0; }
.wr-monthly-metrics {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.wr-stat-ico-sm {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; flex-shrink: 0;
}
.wr-week-divider {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--bs-secondary-color);
  padding: 8px 0 4px; border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 6px;
}

/* ══════════════════════════════════════════════════════════════
   MISC MISSING COMPONENTS
   ══════════════════════════════════════════════════════════════ */

/* QA Board done row */
.brd-done-row { cursor: pointer; }
.brd-done-row:hover td { background: color-mix(in srgb, var(--bs-success) 9%, var(--bs-body-bg)) !important; }

/* Dashboard AI content */
.dash-ai-content { font-size: 0.82rem; line-height: 1.6; color: var(--bs-body-color); }

/* Settings admin danger row */
.sadmin-danger-row--red td { color: #dc2626 !important; }

/* Snapshot sum-item rate */
.snp-sum-item--rate .snp-val { color: #10b981; font-weight: 700; }

/* Team member filter chips */
.tm-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }

/* Hover background utility */
.hover-bg:hover { background: var(--bs-tertiary-bg); }

/* SI bullet text */
.si-bullet-text { font-size: 0.82rem; line-height: 1.5; }


/* ══════════════════════════════════════════════════════════════
   PATCHES — Fixes for bak/new HTML mismatch
   ══════════════════════════════════════════════════════════════ */

/* Knowledge Hub list view — compact rows */
.kb-list { gap: 0 !important; }
.kb-list .kb-card {
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
  padding: 10px 12px !important;
  align-items: center;
}
.kb-list .kb-card:first-child { border-radius: 8px 8px 0 0 !important; border-top: 1px solid var(--bs-border-color) !important; border-left: 1px solid var(--bs-border-color) !important; border-right: 1px solid var(--bs-border-color) !important; }
.kb-list .kb-card:last-child  { border-radius: 0 0 8px 8px !important; border-left: 1px solid var(--bs-border-color) !important; border-right: 1px solid var(--bs-border-color) !important; }
.kb-list .kb-card-icon { width: 30px !important; height: 30px !important; font-size: .85rem !important; flex-shrink: 0; }
.kb-list .kb-card-body { flex-direction: row !important; align-items: center; gap: 12px; flex-wrap: nowrap !important; }
.kb-list .kb-card-preview { display: none !important; }
.kb-list .kb-card-tags { display: none !important; }
.kb-list .kb-card-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .85rem; }
.kb-list .kb-card-meta { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.kb-list .kb-card-actions { opacity: 1 !important; flex-shrink: 0; }

/* Weekly Report spin animation */
@keyframes spin { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════════════════════════════
   QA BOARD ENHANCEMENTS — Status inline, Due cell, KPI borders
   ══════════════════════════════════════════════════════════════ */

/* ── Inline status select ──────────────────────────────────── */
.brd-status-inline {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--status-color, #6b7280);
  border-radius: 6px;
  padding: 3px 22px 3px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--status-color, #6b7280);
  text-align: center;
  text-align-last: center;
  background-color: color-mix(in srgb, var(--status-color, #6b7280) 10%, var(--bs-body-bg));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  cursor: pointer;
  min-width: 110px;
  transition: border-color .15s, background .15s;
  white-space: nowrap;
}
.brd-status-inline:hover { filter: brightness(1.05); }
.brd-status-inline:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-color,#6b7280) 20%, transparent); }

/* ── Due date cell with edit history ───────────────────────── */
.brd-due-cell { display: flex; flex-direction: column; gap: 3px; }
.brd-due-today { display: flex; align-items: center; gap: 5px; }
.brd-due-badge--today { background: #fff7ed !important; color: #c2410c !important; border: 1px solid #fed7aa; }
.brd-due-date--amber { font-size: 0.75rem; font-weight: 600; color: #c2410c; }
.brd-edit-ago {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.65rem; color: var(--bs-secondary-color);
  opacity: 0.75;
}
.brd-edit-ago i { font-size: 0.6rem; }

/* ── KPI strip — clear defined borders ─────────────────────── */
.brd-kpi-strip {
  border: 1.5px solid var(--bs-border-color) !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.brd-kpi-divider {
  width: 1px;
  background: var(--bs-border-color) !important;
  flex-shrink: 0;
}
.brd-kpi-card {
  border-right: none;
  position: relative;
}

/* ── Insights bar — clear borders ──────────────────────────── */
.brd-insights-bar {
  background: var(--bs-body-bg);
  border: 1.5px solid var(--bs-border-color) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.brd-ins-sep {
  width: 1px !important;
  height: 14px !important;
  background: var(--bs-border-color) !important;
  margin: 0 10px !important;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════
   QA BOARD — FULL UI REFINEMENT (SaaS-grade polish)
   ══════════════════════════════════════════════════════════════ */

/* ── KPI Strip: compact, clear hierarchy ───────────────────── */
.brd-kpi-strip {
  border: 1.5px solid var(--bs-border-color) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  margin-bottom: 10px !important;
}
.brd-kpi-card {
  padding: 10px 18px !important;
  gap: 10px !important;
}
.brd-kpi-card--warn  { background: rgba(239,68,68,.04) !important; }
.brd-kpi-card--green { background: rgba(16,185,129,.04) !important; }
.brd-kpi-ico {
  width: 32px !important; height: 32px !important;
  border-radius: 7px !important; font-size: 0.95rem !important;
}
.brd-kpi-val {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
.brd-kpi-card--warn  .brd-kpi-val { color: #dc2626 !important; }
.brd-kpi-card--green .brd-kpi-val { color: #059669 !important; }
.brd-kpi-lbl { font-size: 0.68rem !important; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.brd-kpi-divider { background: var(--bs-border-color) !important; }

/* ── Insights bar: contained, clear borders ─────────────────── */
.brd-insights-bar {
  background: var(--bs-body-bg) !important;
  border: 1.5px solid var(--bs-border-color) !important;
  border-radius: 8px !important;
  padding: 5px 14px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  gap: 0 !important;
}
.brd-ins-item { padding: 0 4px !important; gap: 5px !important; }
.brd-ins-val  { font-size: 0.8rem !important; font-weight: 700 !important; }
.brd-ins-lbl  { font-size: 0.72rem !important; }
.brd-ins-val--red { color: #dc2626 !important; }
.brd-ins-sep  {
  width: 1px !important; height: 14px !important;
  background: var(--bs-border-color) !important;
  margin: 0 10px !important;
}

/* ── Table rows: stronger separation, accent hover ──────────── */
.brd-table { border-collapse: separate !important; border-spacing: 0; }
.brd-table tbody tr {
  border-bottom: 1px solid var(--bs-border-color);
  transition: background .1s, box-shadow .1s;
}
.brd-table tbody td { border-bottom: 1px solid var(--bs-border-color) !important; }
.brd-table tbody tr:not(.row--on-leave):hover {
  background: color-mix(in srgb, var(--faya-blue) 4%, var(--bs-body-bg)) !important;
  box-shadow: inset 3px 0 0 var(--faya-blue);
}
.brd-table tbody tr.row-selected:hover { box-shadow: inset 3px 0 0 var(--faya-blue); }
.brd-table tbody tr.row--overdue:hover { box-shadow: inset 3px 0 0 #dc2626; }
.brd-table tbody tr.row--on-leave:hover { background: rgba(239,68,68,0.08) !important; box-shadow: inset 3px 0 0 #ef4444; }
[data-bs-theme="dark"] .brd-table tbody tr.row--on-leave:hover { background: rgba(239,68,68,0.1) !important; }

/* ── Section header: compact + count inline ─────────────────── */
.brd-section-hdr { padding: 0.6rem 1rem 0.55rem !important; }
.brd-section-title { font-size: 0.82rem !important; }
.brd-section-sub   { font-size: 0.7rem !important; opacity: .7; }
.brd-hdr-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px;
  background: var(--faya-blue); color: #fff;
  border-radius: 9px; font-size: 0.67rem; font-weight: 700;
  margin-left: 6px;
}

/* ── Status inline select: refined ─────────────────────────── */
.brd-status-inline {
  min-width: 105px !important;
  font-size: 0.71rem !important;
  padding: 3px 20px 3px 8px !important;
  border-width: 1.5px !important;
  border-radius: 6px !important;
  text-align: center !important;
  text-align-last: center !important;
}

/* ── Assignee cell: compact, workload dot ───────────────────── */
.brd-assignee-cell { gap: 6px !important; align-items: center; }
.brd-assignee-name { font-size: 0.78rem !important; font-weight: 500; }
.brd-wl-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--bs-body-bg);
}

/* ── Store tag: secondary/muted style ───────────────────────── */
.brd-store-tag {
  font-size: 0.68rem; font-weight: 500;
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 4px; padding: 1px 6px;
  white-space: nowrap;
}

/* ── Due date cell: urgency indicators ──────────────────────── */
.brd-due-cell { display: flex; flex-direction: column; gap: 2px; }
.brd-due-overdue { display: flex; align-items: center; gap: 5px; }
.brd-due-today   { display: flex; align-items: center; gap: 5px; }
.brd-due-badge {
  font-size: 0.62rem !important; font-weight: 700 !important;
  padding: 1px 5px !important; border-radius: 4px !important;
  background: #fef2f2 !important; color: #dc2626 !important;
  border: 1px solid #fecaca !important; text-transform: uppercase; letter-spacing: .03em;
}
.brd-due-badge--today {
  background: #fff7ed !important; color: #c2410c !important;
  border-color: #fed7aa !important;
}
.brd-due-date { font-size: 0.76rem; font-weight: 500; color: var(--bs-body-color); }
.brd-due-date--red   { font-size: 0.74rem; font-weight: 600; color: #dc2626; }
.brd-due-date--amber { font-size: 0.74rem; font-weight: 600; color: #c2410c; }
.brd-edit-ago {
  font-size: 0.63rem !important; color: var(--bs-secondary-color); opacity: .65;
  display: flex; align-items: center; gap: 2px;
}
.brd-edit-ago i { font-size: 0.58rem !important; }

/* ── Toolbar: clean separator ───────────────────────────────── */
.brd-toolbar {
  border-bottom: 1.5px solid var(--bs-border-color) !important;
  padding: 10px 14px !important;
}

/* ── Dark mode adjustments ──────────────────────────────────── */
[data-bs-theme="dark"] .brd-store-tag { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .brd-hdr-count { background: #2563eb; }
[data-bs-theme="dark"] .brd-kpi-strip { box-shadow: 0 1px 4px rgba(0,0,0,.2) !important; }
[data-bs-theme="dark"] .brd-insights-bar { box-shadow: 0 1px 3px rgba(0,0,0,.15) !important; }


/* ══════════════════════════════════════════════════════════════
   QA BOARD — EXACT REFERENCE MATCH
   ══════════════════════════════════════════════════════════════ */

/* ── KPI Strip: icon+number top, label, sub, colored bar ────── */
.brd-kpi-strip {
  display: flex !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
  background: var(--bs-body-bg) !important;
  padding: 0 !important;
  gap: 0 !important;
}
.brd-kpi-card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 20px 0 !important;
  gap: 2px !important;
  position: relative;
  border-right: 1px solid var(--bs-border-color);
  min-width: 0;
}
.brd-kpi-card:last-child { border-right: none; }
.brd-kpi-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.brd-kpi-ico {
  width: 34px !important; height: 34px !important;
  border-radius: 8px !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem !important; flex-shrink: 0;
}
.brd-kpi-val {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--bs-body-color) !important;
  letter-spacing: -0.02em;
}
.brd-kpi-val--warn  { color: #dc2626 !important; }
.brd-kpi-val--green { color: #059669 !important; }
.brd-kpi-lbl {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--bs-body-color) !important;
  margin: 0 !important;
}
.brd-kpi-sub {
  font-size: 0.68rem !important;
  color: var(--bs-secondary-color) !important;
  margin-bottom: 12px;
}
.brd-kpi-bar {
  height: 3px !important;
  width: 100%;
  margin-top: auto;
  border-radius: 0;
}
.brd-kpi-bar--blue   { background: #3b82f6; }
.brd-kpi-bar--teal   { background: #14b8a6; }
.brd-kpi-bar--purple { background: #8b5cf6; }
.brd-kpi-bar--red    { background: #ef4444; }
.brd-kpi-bar--green  { background: #10b981; }

.brd-kpi-ico--blue   { background: #eff6ff !important; color: #3b82f6 !important; }
.brd-kpi-ico--teal   { background: #f0fdfa !important; color: #14b8a6 !important; }
.brd-kpi-ico--purple { background: #faf5ff !important; color: #8b5cf6 !important; }
.brd-kpi-ico--red    { background: #fef2f2 !important; color: #ef4444 !important; }
.brd-kpi-ico--green  { background: #f0fdf4 !important; color: #10b981 !important; }

/* Remove old divider — now using border-right on cards */
.brd-kpi-divider { display: none !important; }

/* ── Insights Bar: mini stat cards ─────────────────────────── */
.brd-insights-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  background: var(--bs-body-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 8px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  flex-wrap: nowrap;
}
.brd-ins-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0 16px 0 0;
  border-right: 1px solid var(--bs-border-color);
  min-width: 80px;
}
.brd-ins-card:last-of-type { border-right: none; }
.brd-ins-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.brd-ins-val {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--bs-body-color) !important;
}
.brd-ins-val--red { color: #dc2626 !important; }
.brd-ins-lbl {
  font-size: 0.68rem !important;
  color: var(--bs-secondary-color) !important;
  white-space: nowrap;
}
.brd-ins-spacer { flex: 1; }
.brd-ins-view-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 7px;
  background: #eff6ff; color: #2563eb;
  border: 1px solid #bfdbfe;
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: background .12s;
}
.brd-ins-view-btn:hover { background: #dbeafe; }

/* ── Workload column ────────────────────────────────────────── */
.brd-col-workload { width: 100px; }
.brd-wl-cell { display: flex; align-items: center; gap: 6px; }
.brd-wl-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.brd-wl-label { font-size: 0.75rem; font-weight: 500; }

/* ── Due date: status line ──────────────────────────────────── */
.brd-due-cell { display: flex; flex-direction: column; gap: 2px; }
.brd-due-date { font-size: 0.78rem; font-weight: 500; color: var(--bs-body-color); }
.brd-due-status {
  font-size: 0.7rem; font-weight: 600;
}
.brd-due-status--overdue  { color: #dc2626; }
.brd-due-status--today    { color: #f59e0b; }
.brd-due-status--upcoming { color: #2563eb; }

/* ── Store tag: muted ───────────────────────────────────────── */
.brd-store-tag {
  font-size: 0.72rem; color: var(--bs-secondary-color);
  font-weight: 400;
}

/* ── Assignee: full name ────────────────────────────────────── */
.brd-assignee-cell { display: flex; align-items: center; gap: 7px; }
.brd-assignee-name { font-size: 0.78rem; font-weight: 500; }

/* ── Dark mode ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .brd-kpi-card { border-right-color: #2e3d52; }
[data-bs-theme="dark"] .brd-ins-card { border-right-color: #2e3d52; }
[data-bs-theme="dark"] .brd-ins-view-btn { background: #1e3a5f; border-color: #1d4ed8; }


/* ══════════════════════════════════════════════════════════════
   KPI + INSIGHTS — EXACT CARD DESIGN MATCH
   ══════════════════════════════════════════════════════════════ */

/* ── KPI Strip: separate white cards, not connected ─────────── */
.brd-kpi-strip {
  display: flex !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
  overflow: visible !important;
}

.brd-kpi-card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.07) !important;
  padding: 18px 20px 0 !important;
  gap: 4px !important;
  overflow: hidden;
  position: relative;
  min-width: 0;
  border-right: 1px solid #e5e7eb !important;
}

[data-bs-theme="dark"] .brd-kpi-card {
  background: var(--bs-body-bg) !important;
  border-color: #2e3d52 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.2) !important;
}

.brd-kpi-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.brd-kpi-ico {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
}

.brd-kpi-val {
  font-size: 1.9rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--bs-body-color) !important;
}

.brd-kpi-lbl {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--bs-body-color) !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.brd-kpi-sub {
  font-size: 0.7rem !important;
  color: var(--bs-secondary-color) !important;
  margin-bottom: 14px !important;
}

.brd-kpi-bar {
  height: 4px !important;
  width: 100% !important;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  border-radius: 0 !important;
}

/* ── Insights bar: single white card ────────────────────────── */
.brd-insights-bar {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 14px 20px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.07) !important;
  margin-bottom: 14px !important;
  flex-wrap: nowrap !important;
}

[data-bs-theme="dark"] .brd-insights-bar {
  background: var(--bs-body-bg) !important;
  border-color: #2e3d52 !important;
}

.brd-ins-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 28px 0 0 !important;
  margin-right: 28px !important;
  border-right: 1px solid #e5e7eb !important;
  flex-direction: row !important;
}

[data-bs-theme="dark"] .brd-ins-card { border-right-color: #2e3d52 !important; }

.brd-ins-card:last-of-type {
  border-right: none !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

.brd-ins-card-top {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.brd-ins-card .brd-ins-card-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}

.brd-ins-val {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: var(--bs-body-color) !important;
}

.brd-ins-lbl {
  font-size: 0.72rem !important;
  color: var(--bs-secondary-color) !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  margin-top: 1px !important;
}

.brd-ins-view-btn {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 7px 16px !important; border-radius: 8px !important;
  background: #eff6ff !important; color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
  font-size: 0.78rem !important; font-weight: 600 !important;
  cursor: pointer !important; white-space: nowrap !important;
  flex-shrink: 0 !important; margin-left: auto !important;
}
.brd-ins-view-btn:hover { background: #dbeafe !important; }


/* ── Table row separators — modern SaaS style ───────────────── */
.brd-table {
  border-collapse: collapse !important;
}
.brd-table thead th {
  border-bottom: 1.5px solid #e5e7eb !important;
  padding-bottom: 10px !important;
}
.brd-table tbody td {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 11px 14px !important;
}
.brd-table tbody tr:last-child td {
  border-bottom: none !important;
}
.brd-table tbody tr:not(.row--on-leave):hover td {
  background: #f8fafc !important;
}
[data-bs-theme="dark"] .brd-table thead th { border-bottom-color: #2e3d52 !important; }
[data-bs-theme="dark"] .brd-table tbody td { border-bottom-color: #1e2a38 !important; }
[data-bs-theme="dark"] .brd-table tbody tr:not(.row--on-leave):hover td { background: rgba(255,255,255,.03) !important; }
.brd-table tbody tr.row--on-leave:hover td { background: rgba(239,68,68,0.08) !important; }
[data-bs-theme="dark"] .brd-table tbody tr.row--on-leave:hover td { background: rgba(239,68,68,0.1) !important; }


/* ══════════════════════════════════════════════════════════════
   STANDUP NOTES — FULL SaaS UI POLISH
   ══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ───────────────────────────────────────────── */
#page-standup { background: var(--bs-body-bg); }

/* ── Toolbar ────────────────────────────────────────────────── */
.sdn-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: var(--bs-body-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
}
.sdn-toolbar-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sdn-toolbar-right { display: flex; align-items: center; gap: 8px; }

/* Date nav */
.sdn-date-nav { display: flex; align-items: center; gap: 4px; }
.sdn-nav-btn {
  width: 30px; height: 30px;
  border: 1px solid var(--bs-border-color);
  border-radius: 7px;
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; cursor: pointer;
  transition: all .12s;
}
.sdn-nav-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border-color: var(--faya-blue); }
.sdn-today-btn { font-size: 0.75rem; font-weight: 600; width: auto; padding: 0 10px; color: var(--faya-blue); border-color: #bfdbfe; background: #eff6ff; }
.sdn-today-btn:hover { background: #dbeafe; }
.sdn-date-wrap {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--bs-border-color);
  border-radius: 7px;
  background: var(--bs-body-bg);
}
.sdn-date-input {
  border: none; background: transparent;
  font-size: 0.83rem; font-weight: 600;
  color: var(--bs-body-color); cursor: pointer;
  outline: none; width: 115px;
}
.sdn-select {
  border: 1px solid var(--bs-border-color);
  border-radius: 7px; padding: 5px 28px 5px 10px;
  font-size: 0.8rem; background: var(--bs-body-bg);
  color: var(--bs-body-color); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}

/* Buttons */
.sdn-btn {
  height: 34px; padding: 0 14px; border-radius: 8px;
  font-size: 0.8rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; border: 1px solid transparent;
  transition: all .12s; white-space: nowrap;
}
.sdn-btn--ghost { background: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }
.sdn-btn--ghost:hover { background: var(--bs-tertiary-bg); }
.sdn-btn--draft { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.sdn-btn--draft:hover { background: #ede9fe; }
.sdn-btn--primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.sdn-btn--primary:hover { background: #1d4ed8; }
.sdn-btn--sm { height: 28px; padding: 0 10px; font-size: 0.74rem; }

/* ── Status bar ─────────────────────────────────────────────── */
.sdn-statusbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: var(--bs-tertiary-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 8px !important;
  margin-bottom: 10px !important;
  font-size: 0.75rem !important;
  color: var(--bs-secondary-color) !important;
}
.sdn-status-badge {
  padding: 2px 8px; border-radius: 10px;
  font-size: 0.68rem; font-weight: 600;
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
  text-transform: uppercase; letter-spacing: .03em;
}
.sdn-status-sep { color: var(--bs-border-color); }
.sdn-tab-btn {
  height: 28px; padding: 0 10px; border-radius: 6px;
  font-size: 0.75rem; font-weight: 500;
  background: transparent; border: none;
  color: var(--bs-secondary-color); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all .12s;
}
.sdn-tab-btn.active, .sdn-tab-btn:hover {
  background: var(--bs-body-bg); color: var(--bs-body-color);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ── Main layout ────────────────────────────────────────────── */
.sdn-layout {
  display: flex !important;
  height: calc(100vh - 230px) !important;
  min-height: 520px !important;
  gap: 12px !important;
  overflow: hidden !important;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sdn-sidebar {
  width: 230px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--bs-body-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.sdn-sidebar-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 0.75rem; font-weight: 700;
  color: var(--bs-secondary-color);
  text-transform: uppercase; letter-spacing: .04em;
}
.sdn-sidebar-search {
  position: relative;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bs-border-color);
}
.sdn-sidebar-search-ico {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--bs-secondary-color); font-size: 0.78rem; pointer-events: none;
}
.sdn-sidebar-search-inp {
  width: 100%; padding: 5px 8px 5px 28px; font-size: 0.78rem;
  border: 1px solid var(--bs-border-color); border-radius: 6px;
  background: var(--bs-tertiary-bg); color: var(--bs-body-color);
  outline: none; transition: border-color .15s;
}
.sdn-sidebar-search-inp:focus { border-color: #3b82f6; background: var(--bs-body-bg); }
.sdn-date-list { flex: 1; overflow-y: auto; }
.sdn-select--sm { font-size: 0.72rem; padding: 2px 20px 2px 6px; height: 26px; }

/* ── Editor panel ───────────────────────────────────────────── */
.sdn-editor {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow-y: auto !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* ── Attendees bar (mid-file stub, final rule wins) ─────────── */
.sdn-attendees-bar { display: flex !important; }
.sdn-attendees-lbl {
  font-size: 0.72rem; font-weight: 700;
  color: var(--bs-secondary-color);
  text-transform: uppercase; letter-spacing: .04em;
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.sdn-chip-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.sdn-attendee-sel {
  font-size: 0.78rem; padding: 5px 10px; border-radius: 7px;
  border: 1.5px solid var(--bs-border-color);
  background: var(--bs-body-bg); color: var(--bs-body-color);
  cursor: pointer; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.sdn-attendee-sel:hover { border-color: #8a96a8; }
.sdn-attendee-sel:focus { border-color: var(--faya-blue); box-shadow: 0 0 0 3px rgba(46,117,182,.1); }
[data-bs-theme="dark"] .sdn-attendee-sel { background: #1e2a3a; border-color: #3a4d66; }

.sdn-add-all-btn {
  font-size: 0.78rem; padding: 5px 12px; border-radius: 7px;
  border: 1.5px solid var(--bs-border-color); background: var(--bs-body-bg);
  color: var(--bs-body-color); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
  font-weight: 500; transition: all .15s;
}
.sdn-add-all-btn:hover { background: var(--faya-blue); border-color: var(--faya-blue); color: #fff; }
[data-bs-theme="dark"] .sdn-add-all-btn { background: #1e2a3a; border-color: #3a4d66; }
[data-bs-theme="dark"] .sdn-add-all-btn:hover { background: var(--faya-blue); border-color: var(--faya-blue); color: #fff; }

/* ── Draft banner ───────────────────────────────────────────── */
.sdn-draft-banner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  background: #f5f3ff !important;
  border: 1px solid #ddd6fe !important;
  border-radius: 8px !important;
}
[data-bs-theme="dark"] .sdn-draft-banner { background: #2e1a47 !important; border-color: #6d28d9 !important; }
.sdn-draft-banner-left { display: flex; align-items: center; gap: 10px; flex: 1; }
.sdn-draft-banner-title { font-size: 0.82rem; font-weight: 700; color: #7c3aed; }
.sdn-draft-banner-sub   { font-size: 0.72rem; color: var(--bs-secondary-color); margin-top: 1px; }
.sdn-banner-dismiss {
  background: none; border: none; color: var(--bs-secondary-color);
  cursor: pointer; font-size: 0.9rem; padding: 2px 4px; border-radius: 4px;
}
.sdn-banner-dismiss:hover { background: rgba(0,0,0,.06); }

/* ── Sections ───────────────────────────────────────────────── */
.sdn-sections { display: flex; flex-direction: column; gap: 10px; }
.sdn-section  {
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bs-body-bg);
}
.sdn-section-hdr {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
  border-radius: 0 !important;
}
.sdn-hdr--teal  { background: #f0fdfa !important; color: #0d9488 !important; border-bottom-color: #99f6e4 !important; }
.sdn-hdr--blue  { background: #eff6ff !important; color: #2563eb !important; border-bottom-color: #bfdbfe !important; }
.sdn-hdr--red   { background: #fef2f2 !important; color: #dc2626 !important; border-bottom-color: #fecaca !important; }
.sdn-hdr--amber { background: #fffbeb !important; color: #b45309 !important; border-bottom-color: #fde68a !important; }
[data-bs-theme="dark"] .sdn-hdr--teal  { background: #0d3330 !important; color: #2dd4bf !important; border-bottom-color: #134e4a !important; }
[data-bs-theme="dark"] .sdn-hdr--blue  { background: #1e3a5f !important; color: #60a5fa !important; border-bottom-color: #1e40af !important; }
[data-bs-theme="dark"] .sdn-hdr--red   { background: #3b0a0a !important; color: #f87171 !important; border-bottom-color: #7f1d1d !important; }
[data-bs-theme="dark"] .sdn-hdr--amber { background: #292100 !important; color: #fbbf24 !important; border-bottom-color: #78350f !important; }

/* ── Task Pool in standup ─────────────────────────────────── */
.sdn-pool-toggle {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  border: none; /* override button default */
}
.sdn-pool-toggle:hover { filter: brightness(.97); }
.sdn-pool-badge {
  font-size: 0.65rem; font-weight: 700; padding: 1px 7px;
  border-radius: 10px; background: #fde68a; color: #92400e;
  flex-shrink: 0;
}
[data-bs-theme="dark"] .sdn-pool-badge { background: #78350f; color: #fbbf24; }
.sdn-pool-hint {
  font-size: 0.68rem; font-weight: 400; opacity: .7;
}
.sdn-pool-chevron { transition: transform .2s; font-size: 0.8rem; }

.sdn-pool-body {
  border-top: none;
}
.sdn-pool-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid #f8fafc;
  transition: background .1s;
}
[data-bs-theme="dark"] .sdn-pool-item { border-bottom-color: #1e2535; }
.sdn-pool-item:last-child { border-bottom: none; }
.sdn-pool-item:hover { background: #fffbeb; }
[data-bs-theme="dark"] .sdn-pool-item:hover { background: rgba(251,191,36,.05); }
.sdn-pool-key {
  font-size: 0.68rem; font-weight: 700; font-family: monospace;
  color: #2563eb; background: #eff6ff; border: 1px solid #bfdbfe;
  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
  white-space: nowrap;
}
[data-bs-theme="dark"] .sdn-pool-key { color: #60a5fa; background: #1e3a5f; border-color: #1e40af; }
.sdn-pool-key--empty { color: #94a3b8; background: #f8fafc; border-color: #e2e8f0; }
.sdn-pool-summary {
  flex: 1; min-width: 0;
  font-size: 0.79rem; color: #334155;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-bs-theme="dark"] .sdn-pool-summary { color: #cbd5e1; }
.sdn-pool-meta {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.sdn-pool-empty {
  padding: 14px 16px; font-size: 0.78rem; color: #94a3b8;
  display: flex; align-items: center; gap: 6px;
}

.sdn-copy-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 5px; font-size: 0.7rem; font-weight: 600;
  background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.1);
  color: inherit; cursor: pointer; transition: background .12s;
}
.sdn-copy-btn:hover { background: rgba(255,255,255,.9); }
.sdn-none-badge {
  font-size: 0.68rem; padding: 2px 8px; border-radius: 8px;
  background: rgba(255,255,255,.6); color: inherit;
  border: 1px solid rgba(0,0,0,.1); font-weight: 600;
}
.sdn-task-count-badge {
  font-size: 0.68rem; padding: 2px 8px; border-radius: 8px;
  background: #dbeafe; color: #1d4ed8;
  border: 1px solid #bfdbfe; font-weight: 700;
}

/* ── Textarea ───────────────────────────────────────────────── */
.sdn-ta-wrap { position: relative; }
.sdn-ta {
  width: 100% !important;
  min-height: 100px !important;
  padding: 12px 14px !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 0.83rem !important;
  line-height: 1.6 !important;
  resize: vertical !important;
  background: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  font-family: inherit !important;
  outline: none !important;
}
.sdn-ta--today { min-height: 140px !important; }
.sdn-ta:focus  { background: color-mix(in srgb, var(--faya-blue) 2%, var(--bs-body-bg)) !important; }
.sdn-ta-foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; padding: 4px 10px;
  background: var(--bs-tertiary-bg);
  border-top: 1px solid var(--bs-border-color);
  font-size: 0.68rem; color: var(--bs-secondary-color);
}
.sdn-check { color: #10b981; }
.sdn-autosave { font-size: 0.7rem; color: var(--bs-secondary-color); opacity: 0; transition: opacity .3s; }
.sdn-autosave.visible { opacity: 1; }

/* ── Preview panel ──────────────────────────────────────────── */
.sdn-preview-panel { flex: 1; overflow-y: auto; padding: 16px 20px; background: var(--bs-body-bg); }
.sdn-preview-content { font-size: 0.85rem; line-height: 1.7; color: var(--bs-body-color); }


/* ══════════════════════════════════════════════════════════════
   STANDUP NOTES — BORDER + LAYOUT FIX
   ══════════════════════════════════════════════════════════════ */

#page-standup { background: #f8fafc !important; padding: 16px !important; }
[data-bs-theme="dark"] #page-standup { background: #0f1623 !important; }

.sdn-toolbar {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
}
[data-bs-theme="dark"] .sdn-toolbar { background: var(--bs-body-bg) !important; border-color: #2e3d52 !important; }

.sdn-statusbar {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
[data-bs-theme="dark"] .sdn-statusbar { background: var(--bs-body-bg) !important; border-color: #2e3d52 !important; }

.sdn-layout {
  gap: 14px !important;
  margin-top: 12px !important;
}

.sdn-sidebar {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
}
[data-bs-theme="dark"] .sdn-sidebar { background: var(--bs-body-bg) !important; border-color: #2e3d52 !important; }

/* ── Attendees bar — final definitive rule ───────────────────── */
.sdn-attendees-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}
[data-bs-theme="dark"] .sdn-attendees-bar {
  background: #1a2539 !important;
  border-color: #263548 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}
.sdn-attendees-lbl {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding-right: 10px !important;
  margin-right: 2px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: #64748b !important;
  border-right: 1.5px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
[data-bs-theme="dark"] .sdn-attendees-lbl { color: #64748b !important; border-right-color: #263548 !important; }
.sdn-attendees-lbl .ti { font-size: 0.88rem !important; color: #2563eb !important; }
.sdn-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.sdn-attendee-sel {
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 0.78rem !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  cursor: pointer !important;
  outline: none !important;
  flex-shrink: 0 !important;
  transition: border-color .15s, background .15s !important;
}
.sdn-attendee-sel:hover { border-color: #94a3b8 !important; }
.sdn-attendee-sel:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important; }
[data-bs-theme="dark"] .sdn-attendee-sel { background: #1e2a3a !important; border-color: #2d4059 !important; color: #94a3b8 !important; }
.sdn-add-all-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all .15s !important;
}
.sdn-add-all-btn:hover { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; }
[data-bs-theme="dark"] .sdn-add-all-btn { background: #1e2a3a !important; border-color: #2d4059 !important; color: #64748b !important; }
[data-bs-theme="dark"] .sdn-add-all-btn:hover { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; }

.sdn-draft-banner {
  border: 1.5px solid #ddd6fe !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(124,58,237,.08) !important;
}

.sdn-section {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
  overflow: hidden !important;
}
[data-bs-theme="dark"] .sdn-section { background: var(--bs-body-bg) !important; border-color: #2e3d52 !important; }

.sdn-section-hdr {
  border-bottom: 1.5px solid rgba(0,0,0,.07) !important;
  padding: 11px 16px !important;
}
.sdn-hdr--teal  { border-bottom-color: #99f6e4 !important; }
.sdn-hdr--blue  { border-bottom-color: #bfdbfe !important; }
.sdn-hdr--red   { border-bottom-color: #fecaca !important; }

.sdn-ta {
  background: #ffffff !important;
  padding: 14px 16px !important;
}
[data-bs-theme="dark"] .sdn-ta { background: var(--bs-body-bg) !important; }

.sdn-ta-foot {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 5px 12px !important;
}
[data-bs-theme="dark"] .sdn-ta-foot { background: #1a2232 !important; border-top-color: #2e3d52 !important; }

.sdn-sidebar-hdr {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}
[data-bs-theme="dark"] .sdn-sidebar-hdr { background: #161f2d !important; border-bottom-color: #2e3d52 !important; }

.sdn-sidebar-search { border-bottom: 1px solid #e2e8f0 !important; background: #ffffff !important; }
[data-bs-theme="dark"] .sdn-sidebar-search { background: var(--bs-body-bg) !important; border-bottom-color: #2e3d52 !important; }

.sdn-sidebar-search-inp {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
}
.sdn-sidebar-search-inp:focus { background: #ffffff !important; border-color: #3b82f6 !important; }


/* ══════════════════════════════════════════════════════════════
   KNOWLEDGE HUB — FULL SaaS UI POLISH
   ══════════════════════════════════════════════════════════════ */

#page-knowledge { background: #f8fafc !important; padding: 16px !important; }
[data-bs-theme="dark"] #page-knowledge { background: #0f1623 !important; }

/* ── Page header ────────────────────────────────────────────── */
.kb2-page-hdr { margin-bottom: 16px !important; }
.kb2-page-title {
  font-size: 1.4rem !important; font-weight: 800 !important;
  color: var(--bs-body-color) !important; margin: 0 0 3px !important;
}
.kb2-page-sub { font-size: 0.82rem !important; color: var(--bs-secondary-color) !important; }

/* ── Toolbar: white card ────────────────────────────────────── */
.kb2-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
  margin-bottom: 12px !important;
}
[data-bs-theme="dark"] .kb2-toolbar { background: var(--bs-body-bg) !important; border-color: #2e3d52 !important; }

.kb2-search-wrap {
  position: relative !important; flex: 1 !important;
  min-width: 180px !important; max-width: 380px !important;
}
.kb2-search-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--bs-secondary-color); font-size: 0.85rem; pointer-events: none;
}
.kb2-search-inp {
  width: 100% !important; padding: 7px 10px 7px 32px !important;
  border: 1.5px solid #e2e8f0 !important; border-radius: 8px !important;
  font-size: 0.82rem !important; background: #f8fafc !important;
  color: var(--bs-body-color) !important; outline: none !important;
  transition: border-color .15s, background .15s !important;
}
.kb2-search-inp:focus { border-color: #3b82f6 !important; background: #fff !important; }
.kb2-search-kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 2px;
}
.kb2-search-kbd span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; font-size: 0.62rem; font-weight: 700;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px;
  color: var(--bs-secondary-color);
}

.kb2-sel {
  padding: 6px 28px 6px 10px !important; font-size: 0.8rem !important;
  border: 1.5px solid #e2e8f0 !important; border-radius: 8px !important;
  background: #ffffff !important; color: var(--bs-body-color) !important;
  cursor: pointer !important; appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 8px center !important;
}
[data-bs-theme="dark"] .kb2-sel { background-color: var(--bs-body-bg) !important; border-color: #2e3d52 !important; }

.kb2-view-toggle {
  display: flex !important; gap: 2px !important;
  background: #f1f5f9 !important; border-radius: 8px !important;
  padding: 3px !important; border: 1.5px solid #e2e8f0 !important;
}
.kb2-view-btn {
  width: 30px !important; height: 28px !important; border: none !important;
  border-radius: 6px !important; background: transparent !important;
  color: var(--bs-secondary-color) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 0.85rem !important; cursor: pointer !important; transition: all .12s !important;
}
.kb2-view-btn.active {
  background: #ffffff !important; color: #2563eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.1) !important;
}

.kb2-toolbar-actions { display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; }
.kb2-btn {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  height: 34px !important; padding: 0 14px !important; border-radius: 8px !important;
  font-size: 0.8rem !important; font-weight: 600 !important; cursor: pointer !important;
  border: 1.5px solid transparent !important; white-space: nowrap !important; transition: all .12s !important;
}
.kb2-btn--ghost { background: #fff !important; color: var(--bs-body-color) !important; border-color: #e2e8f0 !important; }
.kb2-btn--ghost:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; }
.kb2-btn--primary { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; }
.kb2-btn--primary:hover { background: #1d4ed8 !important; }

/* ── Tag strip ──────────────────────────────────────────────── */
.kb2-tag-strip {
  display: flex !important; gap: 6px !important; flex-wrap: wrap !important;
  align-items: center !important; margin-bottom: 12px !important;
}

/* ── List container: white card ─────────────────────────────── */
.kb-list {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
  display: flex !important; flex-direction: column !important; gap: 0 !important;
}
[data-bs-theme="dark"] .kb-list { background: var(--bs-body-bg) !important; border-color: #2e3d52 !important; }

/* ── List row item ──────────────────────────────────────────── */
.kb-list .kb-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background .1s !important;
}
[data-bs-theme="dark"] .kb-list .kb-card { border-bottom-color: #1e2a38 !important; }
.kb-list .kb-card:last-child { border-bottom: none !important; }
.kb-list .kb-card:hover { background: #f8fafc !important; }
[data-bs-theme="dark"] .kb-list .kb-card:hover { background: rgba(255,255,255,.03) !important; }

/* ── Icon ───────────────────────────────────────────────────── */
.kb-list .kb-card-icon {
  width: 36px !important; height: 36px !important;
  border-radius: 8px !important; font-size: 1rem !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ── Body ───────────────────────────────────────────────────── */
.kb-list .kb-card-body {
  flex: 1 !important; min-width: 0 !important;
  display: flex !important; flex-direction: column !important;
  gap: 4px !important;
}
.kb-card-title {
  font-size: 0.85rem !important; font-weight: 600 !important;
  color: var(--bs-body-color) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kb-list .kb-card:hover .kb-card-title { color: #2563eb !important; }
.kb-card-meta {
  display: flex !important; align-items: center !important;
  gap: 8px !important; flex-wrap: wrap !important;
}
.kb-type-chip {
  font-size: 0.67rem !important; font-weight: 600 !important;
  padding: 1px 7px !important; border-radius: 4px !important;
  white-space: nowrap;
}
.kb-url-display {
  font-size: 0.71rem !important; color: var(--bs-secondary-color) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.kb-date-chip {
  font-size: 0.71rem !important; color: var(--bs-secondary-color) !important;
  display: inline-flex; align-items: center; gap: 3px;
}
.kb-date-chip i { font-size: 0.65rem !important; }

/* ── Hide preview/tags in list mode ─────────────────────────── */
.kb-list .kb-card-preview { display: none !important; }
.kb-list .kb-card-tags    { display: none !important; }

/* ── Action buttons: visible, clean ─────────────────────────── */
.kb-list .kb-card-actions, .kb-card-actions {
  display: flex !important; align-items: center !important;
  gap: 4px !important; flex-shrink: 0 !important;
  opacity: 0 !important; transition: opacity .15s !important;
}
.kb-list .kb-card:hover .kb-card-actions,
.kb-card:hover .kb-card-actions { opacity: 1 !important; }

.kb-act-btn {
  width: 30px !important; height: 30px !important;
  border-radius: 7px !important; border: 1px solid #e2e8f0 !important;
  background: #ffffff !important; cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 0.82rem !important; color: var(--bs-secondary-color) !important;
  transition: all .12s !important;
}
.kb-act-btn:hover { border-color: #cbd5e1 !important; color: var(--bs-body-color) !important; background: #f8fafc !important; }
.kb-act-btn--edit:hover  { color: #2563eb !important; border-color: #bfdbfe !important; background: #eff6ff !important; }
.kb-act-btn--danger:hover { color: #dc2626 !important; border-color: #fecaca !important; background: #fef2f2 !important; }

/* ── Existing btn classes used in actions ───────────────────── */
.kb-list .kb-card-actions .btn-ghost-primary,
.kb-list .kb-card-actions .btn-ghost-secondary {
  width: 30px !important; height: 30px !important;
  border-radius: 7px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border: 1px solid #e2e8f0 !important; background: #ffffff !important;
  font-size: 0.82rem !important;
}

/* ── Grid view ──────────────────────────────────────────────── */
.kb-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important;
}
.kb-grid .kb-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
  padding: 16px !important;
  transition: box-shadow .15s, border-color .15s !important;
}
.kb-grid .kb-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
  border-color: #bfdbfe !important;
}


/* ══════════════════════════════════════════════════════════════
   KNOWLEDGE HUB — UI ENHANCEMENT v2
   Clean SaaS-grade list view, action buttons, badges, toolbar
   ══════════════════════════════════════════════════════════════ */

/* ── Page background ────────────────────────────────────────── */
#page-knowledge {
  background: #f4f6f9 !important;
  padding: 20px 24px !important;
}
[data-bs-theme="dark"] #page-knowledge { background: #0d1117 !important; }

/* ── Page header ────────────────────────────────────────────── */
.kb2-page-hdr { margin-bottom: 18px !important; }
.kb2-page-title {
  font-size: 1.3rem !important; font-weight: 700 !important;
  letter-spacing: -0.01em !important; color: var(--bs-body-color) !important;
  margin: 0 0 2px !important;
}
.kb2-page-sub { font-size: 0.8rem !important; color: var(--bs-secondary-color) !important; }

/* ── Toolbar card ───────────────────────────────────────────── */
.kb2-toolbar {
  display: flex !important; align-items: center !important;
  gap: 8px !important; flex-wrap: wrap !important;
  padding: 10px 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 0 transparent !important;
  margin-bottom: 10px !important;
}
[data-bs-theme="dark"] .kb2-toolbar {
  background: #161b22 !important;
  border-color: #30363d !important;
}

/* ── Search input ───────────────────────────────────────────── */
.kb2-search-inp {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 7px !important;
  font-size: 0.81rem !important;
  padding: 7px 76px 7px 32px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.kb2-search-inp:focus {
  border-color: #3b82f6 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.1) !important;
}
[data-bs-theme="dark"] .kb2-search-inp {
  background: #0d1117 !important; border-color: #30363d !important;
}

/* ── Filter selects ─────────────────────────────────────────── */
.kb2-sel {
  height: 34px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 7px !important;
  font-size: 0.79rem !important;
  background-color: #fff !important;
  padding: 0 28px 0 10px !important;
  color: var(--bs-body-color) !important;
  transition: border-color .15s !important;
}
.kb2-sel:focus { border-color: #3b82f6 !important; outline: none !important; }
[data-bs-theme="dark"] .kb2-sel { background-color: #161b22 !important; border-color: #30363d !important; }

/* ── View-toggle pill ───────────────────────────────────────── */
.kb2-view-toggle {
  background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important; padding: 3px !important;
}
.kb2-view-btn {
  width: 28px !important; height: 26px !important; border-radius: 5px !important;
  font-size: 0.8rem !important;
}
.kb2-view-btn.active {
  background: #fff !important; color: #2563eb !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
}

/* ── Toolbar action buttons ─────────────────────────────────── */
.kb2-btn {
  height: 32px !important; padding: 0 12px !important;
  border-radius: 7px !important; font-size: 0.79rem !important;
  font-weight: 600 !important; gap: 5px !important;
  transition: all .13s !important;
}
.kb2-btn--ghost {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #374151 !important;
}
.kb2-btn--ghost:hover {
  background: #f8fafc !important;
  border-color: #c7d2e0 !important;
  color: #111827 !important;
}
[data-bs-theme="dark"] .kb2-btn--ghost {
  background: #161b22 !important; border-color: #30363d !important; color: var(--bs-body-color) !important;
}
.kb2-btn--primary {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(37,99,235,.3) !important;
}
.kb2-btn--primary:hover { background: #1d4ed8 !important; box-shadow: 0 2px 6px rgba(37,99,235,.35) !important; }

/* ── Stats / filter chip bar ────────────────────────────────── */
.kb2-stats-row {
  margin-bottom: 10px !important;
  gap: 6px !important;
}
.kb-stat-chip {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 3px 10px !important; border-radius: 20px !important;
  font-size: 0.72rem !important; font-weight: 600 !important;
  cursor: pointer !important; transition: opacity .12s, transform .1s !important;
  line-height: 1.6 !important;
}
.kb-stat-chip:hover { opacity: .8 !important; transform: translateY(-1px) !important; }
.kb-stat-all {
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  color: #374151 !important;
}
[data-bs-theme="dark"] .kb-stat-all { background: #161b22 !important; border-color: #30363d !important; color: var(--bs-body-color) !important; }

/* ══════════════════════════════════════════════════════════════
   LIST VIEW — table-like rows inside a bordered card container
   ══════════════════════════════════════════════════════════════ */

/* Wrap the list in a bordered card */
.kb-list {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  overflow: hidden !important;
  display: flex !important; flex-direction: column !important; gap: 0 !important;
}
[data-bs-theme="dark"] .kb-list {
  background: #161b22 !important; border-color: #30363d !important;
}

/* Table header row (cosmetic, rendered via ::before on first child) */
.kb-list::before {
  content: '' !important;
  display: block !important;
  height: 3px !important;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%) !important;
  flex-shrink: 0 !important;
}

/* Row */
.kb-list .kb-card {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 12px !important;
  padding: 11px 16px !important;
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background .1s !important;
  position: relative !important;
}
[data-bs-theme="dark"] .kb-list .kb-card { border-bottom-color: #21262d !important; }
.kb-list .kb-card:last-child { border-bottom: none !important; }

/* Left accent on hover */
.kb-list .kb-card::before {
  content: '' !important;
  position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important; border-radius: 0 !important;
  background: transparent !important;
  transition: background .15s !important;
}
.kb-list .kb-card:hover {
  background: #f8fafc !important;
}
.kb-list .kb-card:hover::before {
  background: #2563eb !important;
}
[data-bs-theme="dark"] .kb-list .kb-card:hover { background: rgba(255,255,255,.03) !important; }
[data-bs-theme="dark"] .kb-list .kb-card:hover::before { background: #3b82f6 !important; }

/* Hover title color */
.kb-list .kb-card:hover .kb-card-title { color: #2563eb !important; }
[data-bs-theme="dark"] .kb-list .kb-card:hover .kb-card-title { color: #60a5fa !important; }

/* ── Icon ───────────────────────────────────────────────────── */
.kb-list .kb-card-icon {
  width: 34px !important; height: 34px !important;
  border-radius: 8px !important; font-size: 0.95rem !important;
  flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}

/* ── Body ───────────────────────────────────────────────────── */
.kb-list .kb-card-body {
  flex: 1 !important; min-width: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 3px !important;
}
.kb-list .kb-card-title {
  font-size: 0.85rem !important; font-weight: 600 !important;
  white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important; line-height: 1.35 !important;
  transition: color .12s !important;
}
.kb-list .kb-card-meta {
  display: flex !important; align-items: center !important;
  gap: 6px !important; flex-wrap: wrap !important;
}

/* ── Type badge ─────────────────────────────────────────────── */
.kb-type-chip {
  display: inline-flex !important; align-items: center !important;
  font-size: 0.66rem !important; font-weight: 700 !important;
  padding: 2px 8px !important; border-radius: 5px !important;
  letter-spacing: 0.02em !important; white-space: nowrap !important;
  line-height: 1.6 !important;
}

/* ── URL domain chip ────────────────────────────────────────── */
.kb-url-display {
  font-size: 0.71rem !important;
  color: var(--bs-secondary-color) !important;
  white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important; max-width: 180px !important;
  font-family: ui-monospace, monospace !important;
  background: #f1f5f9 !important;
  padding: 1px 6px !important; border-radius: 4px !important;
}
[data-bs-theme="dark"] .kb-url-display { background: #21262d !important; }

/* ── Date chip ──────────────────────────────────────────────── */
.kb-date-chip {
  font-size: 0.7rem !important;
  color: var(--bs-secondary-color) !important;
  display: inline-flex !important; align-items: center !important; gap: 3px !important;
  white-space: nowrap !important;
}
.kb-date-chip i { font-size: 0.65rem !important; opacity: .75 !important; }

/* ══════════════════════════════════════════════════════════════
   ACTION BUTTONS — polished icon button group
   ══════════════════════════════════════════════════════════════ */

/* Always visible in list, fade in on grid */
.kb-list .kb-card-actions,
.kb-card-actions {
  display: flex !important; align-items: center !important;
  gap: 3px !important; flex-shrink: 0 !important;
  opacity: 0 !important; transition: opacity .15s !important;
}
.kb-list .kb-card-actions { opacity: 1 !important; }
.kb-card:hover .kb-card-actions { opacity: 1 !important; }

/* Divider before action group */
.kb-list .kb-card-actions::before {
  content: '' !important;
  width: 1px !important; height: 18px !important;
  background: #e2e8f0 !important;
  margin-right: 5px !important; flex-shrink: 0 !important;
}
[data-bs-theme="dark"] .kb-list .kb-card-actions::before { background: #30363d !important; }

/* Individual action buttons */
.kb-act-btn {
  width: 28px !important; height: 28px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 0.78rem !important;
  color: #9ca3af !important;
  transition: all .12s !important;
}
.kb-act-btn:hover {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #374151 !important;
}
.kb-act-btn--edit:hover {
  color: #2563eb !important;
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}
.kb-act-btn--danger:hover {
  color: #dc2626 !important;
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}
[data-bs-theme="dark"] .kb-act-btn:hover { background: #21262d !important; border-color: #30363d !important; color: var(--bs-body-color) !important; }
[data-bs-theme="dark"] .kb-act-btn--edit:hover { color: #60a5fa !important; background: #1c2a3a !important; border-color: #1d3a5f !important; }
[data-bs-theme="dark"] .kb-act-btn--danger:hover { color: #f87171 !important; background: #2d1b1b !important; border-color: #7f1d1d !important; }

/* Primary/secondary icon buttons inside actions */
.kb-card-actions .btn-ghost-primary,
.kb-card-actions .btn-ghost-secondary,
.kb-card-actions .btn {
  width: 28px !important; height: 28px !important;
  border-radius: 6px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  font-size: 0.78rem !important; color: #9ca3af !important;
  transition: all .12s !important;
}
.kb-card-actions .btn-ghost-primary:hover {
  color: #2563eb !important; background: #eff6ff !important; border-color: #bfdbfe !important;
}
.kb-card-actions .btn-ghost-secondary:hover {
  color: #374151 !important; background: #f1f5f9 !important; border-color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════════════════
   GRID VIEW — refined cards
   ══════════════════════════════════════════════════════════════ */
.kb-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important;
}
.kb-grid .kb-card {
  border: 1px solid #e8edf2 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  transition: box-shadow .15s, border-color .15s, transform .1s !important;
}
.kb-grid .kb-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.09) !important;
  border-color: #93c5fd !important;
  transform: translateY(-1px) !important;
}
[data-bs-theme="dark"] .kb-grid .kb-card {
  background: #161b22 !important; border-color: #30363d !important;
}
[data-bs-theme="dark"] .kb-grid .kb-card:hover {
  border-color: #3b82f6 !important; box-shadow: 0 4px 14px rgba(0,0,0,.3) !important;
}

/* ── Empty state ────────────────────────────────────────────── */
.kb-empty {
  background: #ffffff !important;
  border: 1px dashed #d1d5db !important;
  border-radius: 10px !important;
  min-height: 200px !important;
}
[data-bs-theme="dark"] .kb-empty { background: #161b22 !important; border-color: #30363d !important; }


/* ══════════════════════════════════════════════════════════════
   BULK ACTION BAR v2 — bbl2-* components
   Floating contextual toolbar · appears on row selection
   ══════════════════════════════════════════════════════════════ */

/* ── Container ──────────────────────────────────────────────── */
.bbl2-bar {
  display: none;                        /* hidden by default     */
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;

  margin-bottom: 8px;
  padding: 0 12px;
  min-height: 46px;

  background: #ffffff;
  border: 1.5px solid #2563eb;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(37,99,235,.12), 0 0 0 3px rgba(37,99,235,.06);

  animation: bbl2SlideIn .18s cubic-bezier(.4,0,.2,1);
}
.bbl2-bar.active { display: flex; }

@keyframes bbl2SlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Inner variant (inside a section card — pool) */
.bbl2-bar--inner {
  border-color: #6366f1;
  box-shadow: 0 2px 10px rgba(99,102,241,.1), 0 0 0 3px rgba(99,102,241,.06);
  margin: 0 0 8px;
  border-radius: 8px;
}

/* Dark mode */
[data-bs-theme="dark"] .bbl2-bar {
  background: #161b22;
  border-color: #3b82f6;
  box-shadow: 0 2px 16px rgba(59,130,246,.18), 0 0 0 3px rgba(59,130,246,.08);
}
[data-bs-theme="dark"] .bbl2-bar--inner {
  border-color: #818cf8;
  box-shadow: 0 2px 12px rgba(129,140,248,.14);
}

/* ── Count pill ─────────────────────────────────────────────── */
.bbl2-count-wrap {
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px 0 4px; flex-shrink: 0;
}
.bbl2-count-icon {
  width: 26px; height: 26px; border-radius: 6px;
  background: #eff6ff; color: #2563eb;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; flex-shrink: 0;
}
[data-bs-theme="dark"] .bbl2-count-icon { background: #1e3a5f; color: #60a5fa; }
.bbl2-count {
  font-size: 0.8rem; font-weight: 700; color: #2563eb; white-space: nowrap;
}
[data-bs-theme="dark"] .bbl2-count { color: #60a5fa; }

/* ── Vertical divider ───────────────────────────────────────── */
.bbl2-divider {
  width: 1px; height: 24px; background: #e2e8f0;
  flex-shrink: 0; margin: 0 10px;
}
[data-bs-theme="dark"] .bbl2-divider { background: #30363d; }

/* ── Labelled control group ─────────────────────────────────── */
.bbl2-group {
  display: flex; flex-direction: column; gap: 2px;
  flex-shrink: 0; padding: 5px 0;
}
.bbl2-group-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #94a3b8;
  display: flex; align-items: center; gap: 3px;
  line-height: 1; padding-left: 2px;
}
.bbl2-group-label .ti { font-size: 0.65rem; }
[data-bs-theme="dark"] .bbl2-group-label { color: #64748b; }

/* ── Select + apply combo ───────────────────────────────────── */
.bbl2-combo {
  display: flex; align-items: center; gap: 0;
}
.bbl2-sel {
  height: 28px;
  padding: 0 24px 0 8px;
  font-size: 0.78rem; font-weight: 500;
  border: 1px solid #e2e8f0;
  border-right: none;
  border-radius: 6px 0 0 6px;
  background: #f8fafc;
  color: var(--bs-body-color);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  cursor: pointer;
  min-width: 130px;
  transition: border-color .12s;
}
.bbl2-sel:focus {
  outline: none; border-color: #3b82f6; background: #fff;
}
[data-bs-theme="dark"] .bbl2-sel {
  background-color: #0d1117; border-color: #30363d; color: var(--bs-body-color);
}
.bbl2-apply-btn {
  height: 28px; width: 30px;
  border: 1px solid #2563eb;
  border-radius: 0 6px 6px 0;
  background: #2563eb; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; cursor: pointer;
  transition: background .12s;
  flex-shrink: 0;
}
.bbl2-apply-btn:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* ── Action icon buttons group ──────────────────────────────── */
.bbl2-actions-group {
  display: flex; align-items: center; gap: 2px;
  flex-shrink: 0; padding: 0 2px;
}
.bbl2-action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 9px;
  border: 1px solid #e2e8f0; border-radius: 6px;
  background: #f8fafc; color: #374151;
  font-size: 0.75rem; font-weight: 500; cursor: pointer;
  white-space: nowrap; transition: all .12s;
}
.bbl2-action-btn .ti { font-size: 0.78rem; }
.bbl2-action-btn:hover {
  background: #eff6ff; border-color: #bfdbfe; color: #2563eb;
}
[data-bs-theme="dark"] .bbl2-action-btn {
  background: #21262d; border-color: #30363d; color: var(--bs-body-color);
}
[data-bs-theme="dark"] .bbl2-action-btn:hover {
  background: #1e3a5f; border-color: #3b82f6; color: #60a5fa;
}

/* ── Move to Pool button ────────────────────────────────────── */
.bbl2-move-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 11px;
  border: 1px solid #fed7aa; border-radius: 6px;
  background: #fff7ed; color: #c2410c;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: all .12s;
}
.bbl2-move-btn:hover { background: #ffedd5; border-color: #fdba74; }
[data-bs-theme="dark"] .bbl2-move-btn {
  background: #2d1b0e; border-color: #92400e; color: #fb923c;
}

/* ── Close / dismiss button ─────────────────────────────────── */
.bbl2-close-btn {
  width: 30px; height: 30px;
  border: 1px solid #e2e8f0; border-radius: 7px;
  background: transparent; color: #94a3b8;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.82rem; cursor: pointer; flex-shrink: 0;
  transition: all .12s;
}
.bbl2-close-btn:hover {
  background: #fef2f2; border-color: #fecaca; color: #dc2626;
}
[data-bs-theme="dark"] .bbl2-close-btn:hover {
  background: #2d1b1b; border-color: #7f1d1d; color: #f87171;
}


/* ══════════════════════════════════════════════════════════════
   AUDIT REPORT — Enhanced UI v2
   wrc-* member cards · wrd-* drawer · wrt-* monthly table · wri-* individual
   ══════════════════════════════════════════════════════════════ */

/* ── Member cards grid ──────────────────────────────────────── */
.wr-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important;
}

.wrc-card {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .1s;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.wrc-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.09);
  border-color: #93c5fd;
  transform: translateY(-1px);
}
[data-bs-theme="dark"] .wrc-card {
  background: #161b22; border-color: #30363d;
}
[data-bs-theme="dark"] .wrc-card:hover { border-color: #3b82f6; box-shadow: 0 4px 16px rgba(0,0,0,.3); }

/* Top row: avatar + name + score */
.wrc-card-top { display: flex; align-items: center; gap: 10px; }
.wrc-avatar-wrap { flex-shrink: 0; }
.wrc-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #e2e8f0; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: #475569;
}
.wrc-info { flex: 1; min-width: 0; }
.wrc-name {
  font-size: .87rem; font-weight: 700; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-bs-theme="dark"] .wrc-name { color: #f1f5f9; }
.wrc-sub { font-size: .7rem; color: #64748b; margin-top: 2px; line-height: 1.4; }
.wrc-score {
  font-size: 1.15rem; font-weight: 900;
  min-width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; flex-shrink: 0;
}

/* Score bar */
.wrc-bar-wrap { padding: 0 2px; }
.wrc-bar-track {
  height: 5px; border-radius: 999px;
  background: #f1f5f9; overflow: hidden;
}
[data-bs-theme="dark"] .wrc-bar-track { background: #21262d; }
.wrc-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width .5s ease;
}

/* Chips */
.wrc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.wrc-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .7rem; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
}
.wrc-chip .ti { font-size: .65rem; }
.wrc-chip--green  { background: #dcfce7; color: #16a34a; }
.wrc-chip--blue   { background: #dbeafe; color: #2563eb; }
.wrc-chip--red    { background: #fee2e2; color: #dc2626; }
.wrc-chip--indigo { background: #e0e7ff; color: #4f46e5; }
.wrc-chip--gray   { background: #f1f5f9; color: #94a3b8; }

/* Footer */
.wrc-footer {
  border-top: 1px solid #f1f5f9;
  padding-top: 8px; margin-top: 2px;
}
[data-bs-theme="dark"] .wrc-footer { border-top-color: #21262d; }
.wrc-view-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 600; color: #94a3b8;
  transition: color .12s;
}
.wrc-card:hover .wrc-view-link { color: #2563eb; }

/* ── Drawer header enhancements ─────────────────────────────── */
.wr-drawer {
  width: 520px !important;
}
.wr-drawer-hdr {
  padding: 16px 20px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e8edf2 !important;
  align-items: flex-start !important;
}
[data-bs-theme="dark"] .wr-drawer-hdr {
  background: #161b22 !important;
  border-bottom-color: #30363d !important;
}
.wr-drawer-hdr-left { flex-direction: column !important; gap: 6px !important; align-items: flex-start !important; }
.wr-drawer-name {
  font-size: 1.05rem !important; font-weight: 800 !important;
  color: #0f172a !important;
}
[data-bs-theme="dark"] .wr-drawer-name { color: #f1f5f9 !important; }

.wrd-score-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 4px;
}
.wrd-score-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
}
.wrd-meta-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .68rem; font-weight: 600;
  padding: 2px 7px; border-radius: 10px;
}
.wrd-meta-chip .ti { font-size: .62rem; }
.wrd-meta-chip--green  { background: #dcfce7; color: #16a34a; }
.wrd-meta-chip--blue   { background: #dbeafe; color: #2563eb; }
.wrd-meta-chip--red    { background: #fee2e2; color: #dc2626; }
.wrd-meta-chip--indigo { background: #e0e7ff; color: #4f46e5; }

/* ── Drawer body sections ───────────────────────────────────── */
.wr-drawer-body { padding: 0 !important; }

.wrd-section {
  border-bottom: 1px solid #f1f5f9;
}
[data-bs-theme="dark"] .wrd-section { border-bottom-color: #21262d; }
.wrd-section:last-child { border-bottom: none; }

.wrd-section-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 20px 8px;
  border-bottom: 1px solid transparent;
  position: sticky; top: 0; z-index: 1;
}
.wrd-section-ico { font-size: .9rem; flex-shrink: 0; }
.wrd-section-label {
  font-size: .71rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; flex: 1;
}
.wrd-section-count {
  font-size: .68rem; font-weight: 800;
  padding: 1px 8px; border-radius: 20px;
}

.wrd-section-body { padding: 4px 0 8px; }

/* Task rows in drawer */
.wrd-task-row {
  display: flex; align-items: flex-start;
  padding: 8px 20px;
  transition: background .1s;
  border-bottom: 1px solid #f8fafc;
}
[data-bs-theme="dark"] .wrd-task-row { border-bottom-color: #1a1f29; }
.wrd-task-row:last-child { border-bottom: none; }
.wrd-task-row:hover { background: #f8fafc; }
[data-bs-theme="dark"] .wrd-task-row:hover { background: rgba(255,255,255,.03); }

.wrd-task-row--overdue { background: #fff8f8 !important; }
[data-bs-theme="dark"] .wrd-task-row--overdue { background: rgba(220,38,38,.06) !important; }

.wrd-row-left { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }

.wrd-row-icon {
  font-size: .9rem; flex-shrink: 0; margin-top: 2px;
}
.wrd-row-icon--done    { color: #10b981; }
.wrd-row-icon--active  { color: #3b82f6; }
.wrd-row-icon--overdue { color: #ef4444; }

.wrd-row-body { flex: 1; min-width: 0; }
.wrd-row-title {
  font-size: .82rem; font-weight: 600;
  color: #1e293b; line-height: 1.4;
  margin-bottom: 5px;
}
[data-bs-theme="dark"] .wrd-row-title { color: #e2e8f0; }
.wrd-task-row--done .wrd-row-title { color: #475569; }
[data-bs-theme="dark"] .wrd-task-row--done .wrd-row-title { color: #94a3b8; }

.wrd-row-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.wrd-jira-link {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .68rem; font-weight: 700; font-family: ui-monospace, monospace;
  background: #eff6ff; color: #2563eb;
  padding: 1px 7px; border-radius: 4px;
  text-decoration: none; transition: background .1s;
}
.wrd-jira-link:hover { background: #dbeafe; color: #1d4ed8; }
[data-bs-theme="dark"] .wrd-jira-link { background: #1e3a5f; color: #60a5fa; }

.wrd-jira-empty {
  font-size: .66rem; color: #94a3b8; font-style: italic;
}

.wrd-priority-badge {
  font-size: .66rem; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
}
.wrd-store-tag {
  font-size: .66rem; font-weight: 600;
  background: #f5f3ff; color: #7c3aed;
  padding: 1px 6px; border-radius: 4px;
}

.wrd-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 40px 20px;
  color: #94a3b8; font-size: .83rem;
}
.wrd-empty .ti { font-size: 2rem; opacity: .4; }

/* ── Monthly table ──────────────────────────────────────────── */
.wrt-table-wrap {
  border: 1px solid #e8edf2; border-radius: 10px;
  overflow: hidden; margin-top: 4px;
}
[data-bs-theme="dark"] .wrt-table-wrap { border-color: #30363d; }

.wrt-table {
  width: 100%; border-collapse: collapse;
  font-size: .8rem;
}
.wrt-table thead tr {
  background: #f8fafc;
  border-bottom: 1px solid #e8edf2;
}
[data-bs-theme="dark"] .wrt-table thead tr { background: #161b22; border-bottom-color: #30363d; }
.wrt-table th {
  padding: 9px 14px; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: #94a3b8; text-align: left; white-space: nowrap;
}
.wrt-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background .1s;
}
[data-bs-theme="dark"] .wrt-table tbody tr { border-bottom-color: #21262d; }
.wrt-table tbody tr:last-child { border-bottom: none; }
.wrt-table tbody tr:hover { background: #f8fafc; }
[data-bs-theme="dark"] .wrt-table tbody tr:hover { background: rgba(255,255,255,.03); }
.wrt-table td { padding: 9px 14px; color: var(--bs-body-color); vertical-align: middle; }
.wrt-summary { max-width: 300px; }
.wrt-jira-key {
  font-family: ui-monospace, monospace; font-size: .72rem; font-weight: 700;
  color: #2563eb; text-decoration: none;
  background: #eff6ff; padding: 2px 7px; border-radius: 4px;
  display: inline-block;
}
.wrt-jira-key:hover { background: #dbeafe; }
[data-bs-theme="dark"] .wrt-jira-key { background: #1e3a5f; color: #60a5fa; }
.wrt-priority { font-size: .72rem; font-weight: 700; }
.wrt-store {
  font-size: .72rem; background: #f5f3ff; color: #7c3aed;
  padding: 1px 6px; border-radius: 4px; font-weight: 600;
}
.wrt-assignee { font-size: .78rem; font-weight: 500; }
.wrt-no-val { color: #94a3b8; font-size: .72rem; }
.wrt-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 48px 20px;
  color: #94a3b8; font-size: .83rem;
  border: 1px dashed #d1d5db; border-radius: 10px;
}
.wrt-empty .ti { font-size: 2rem; opacity: .4; }

/* ── Individual view cards ──────────────────────────────────── */
.wri-member-card {
  background: #fff; border: 1px solid #e8edf2;
  border-radius: 10px; overflow: hidden;
  margin-bottom: 12px;
}
[data-bs-theme="dark"] .wri-member-card { background: #161b22; border-color: #30363d; }

.wri-member-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e8edf2;
}
[data-bs-theme="dark"] .wri-member-hdr { background: #1a1f29; border-bottom-color: #30363d; }

.wri-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e2e8f0; display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: #475569; flex-shrink: 0;
}
.wri-member-info { flex: 1; min-width: 0; }
.wri-member-name { font-size: .87rem; font-weight: 700; color: var(--bs-body-color); }
.wri-member-sub { display: flex; gap: 6px; margin-top: 3px; }
.wri-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .68rem; font-weight: 600;
  padding: 1px 7px; border-radius: 10px;
}
.wri-badge--green { background: #dcfce7; color: #16a34a; }
.wri-badge--blue  { background: #dbeafe; color: #2563eb; }

.wri-task-list { padding: 4px 0; }
.wri-task-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 16px;
  border-bottom: 1px solid #f8fafc;
  transition: background .1s;
}
[data-bs-theme="dark"] .wri-task-row { border-bottom-color: #1a1f29; }
.wri-task-row:last-child { border-bottom: none; }
.wri-task-row:hover { background: #f8fafc; }
[data-bs-theme="dark"] .wri-task-row:hover { background: rgba(255,255,255,.03); }
.wri-task-row .ti {
  font-size: .88rem; flex-shrink: 0; margin-top: 2px;
}
.wri-ico--done   { color: #10b981; }
.wri-ico--active { color: #3b82f6; }
.wri-task-body { flex: 1; min-width: 0; }
.wri-task-title {
  font-size: .8rem; font-weight: 600;
  color: #1e293b; line-height: 1.4; display: block; margin-bottom: 4px;
}
[data-bs-theme="dark"] .wri-task-title { color: #e2e8f0; }
.wri-task-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.wri-jira-key {
  font-family: ui-monospace, monospace; font-size: .67rem; font-weight: 700;
  background: #eff6ff; color: #2563eb;
  padding: 1px 6px; border-radius: 4px;
  text-decoration: none;
}
.wri-jira-key:hover { background: #dbeafe; }
[data-bs-theme="dark"] .wri-jira-key { background: #1e3a5f; color: #60a5fa; }
.wri-priority { font-size: .67rem; font-weight: 700; }
.wri-store {
  font-size: .67rem; font-weight: 600;
  background: #f5f3ff; color: #7c3aed;
  padding: 1px 5px; border-radius: 4px;
}
.wri-no-tasks {
  padding: 10px 16px; font-size: .78rem;
  color: #94a3b8; font-style: italic;
}


/* ══════════════════════════════════════════════════════════════
   TEAM CAPACITY & WORKLOAD — tcw-* components v2
   ══════════════════════════════════════════════════════════════ */

/* ── Table ──────────────────────────────────────────────────── */
.tcw-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.82rem; table-layout: fixed;
}

/* Column widths — fixed so headers always align with cells */
.tcw-col-member  { width: 190px; }
.tcw-col-num     { width: 90px; }
.tcw-col-leave   { width: 120px; }
.tcw-col-bar     { width: 220px; }
.tcw-col-status  { width: 120px; }

/* ── Header ─────────────────────────────────────────────────── */
.tcw-th {
  padding: 9px 12px;
  font-size: 0.67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #94a3b8; text-align: left;
  background: #f8fafc;
  border-bottom: 1.5px solid #e8edf2;
  white-space: nowrap;
}
[data-bs-theme="dark"] .tcw-th {
  background: #161b22; border-bottom-color: #30363d; color: #64748b;
}
.tcw-col-num { text-align: center !important; }
.tcw-th.tcw-col-num { text-align: center; }

/* ── Cells ──────────────────────────────────────────────────── */
.tcw-td {
  padding: 10px 12px; vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
}
[data-bs-theme="dark"] .tcw-td { border-bottom-color: #21262d; }
.tcw-td-num  { text-align: center; }
.tcw-td-leave { text-align: left; }
.tcw-td-status { text-align: left; }

/* ── Rows ───────────────────────────────────────────────────── */
.tcw-row { transition: background .1s; }
.tcw-row:last-child .tcw-td { border-bottom: none; }
.tcw-row:hover .tcw-td { background: #f8fafc; }
[data-bs-theme="dark"] .tcw-row:hover .tcw-td { background: rgba(255,255,255,.025); }

.tcw-row--overloaded .tcw-td { background: #fff8f8 !important; }
[data-bs-theme="dark"] .tcw-row--overloaded .tcw-td { background: rgba(220,38,38,.06) !important; }
.tcw-row--overloaded:hover .tcw-td { background: #fef2f2 !important; }

.tcw-row--busy .tcw-td { background: #fffdf5 !important; }
[data-bs-theme="dark"] .tcw-row--busy .tcw-td { background: rgba(245,158,11,.04) !important; }

.tcw-row--on-leave .tcw-td { opacity: .7; }

/* ── Member cell ────────────────────────────────────────────── */
.tcw-member-cell { display: flex; align-items: flex-start; gap: 9px; }
.tcw-member-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tcw-member-name {
  font-size: 0.83rem; font-weight: 600; color: var(--bs-body-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcw-member-name--muted { color: #94a3b8 !important; }

/* ── Number values ──────────────────────────────────────────── */
.tcw-num {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.85rem; font-weight: 700; color: var(--bs-body-color);
}
.tcw-num--warn   { color: #d97706 !important; }
.tcw-num--danger { color: #dc2626 !important; }
.tcw-num--purple { color: #7c3aed !important; }
.tcw-num--orange { color: #ea580c !important; }
.tcw-num-zero    { font-size: 0.78rem; color: #d1d5db; font-weight: 500; }

/* Inline dot indicators */
.tcw-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 0.58rem; font-weight: 800;
  margin-left: 3px; flex-shrink: 0;
}
.tcw-dot--red    { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.tcw-dot--orange { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }

/* ── Leave badge ────────────────────────────────────────────── */
.tcw-leave-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 0.71rem; font-weight: 600; white-space: nowrap;
}
.tcw-leave-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}

/* ── Workload bar ────────────────────────────────────────────── */
.tcw-bar-row { display: flex; flex-direction: column; gap: 3px; }
.tcw-bar-track {
  height: 6px; border-radius: 999px;
  background: #f1f5f9; overflow: hidden; width: 100%;
}
[data-bs-theme="dark"] .tcw-bar-track { background: #21262d; }
.tcw-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width .4s ease;
}
.tcw-bar-label {
  font-size: 0.67rem; color: #94a3b8; white-space: nowrap;
}

/* ── Status badge ────────────────────────────────────────────── */
.tcw-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.tcw-status-badge .ti { font-size: 0.72rem; }

/* ── AI hint under member name ──────────────────────────────── */
.tcw-ai-hint {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.66rem; color: #6366f1; font-weight: 600;
  background: #eef2ff; border: 1px solid #c7d2fe;
  padding: 1px 6px; border-radius: 4px;
  white-space: nowrap; margin-top: 1px;
}
.tcw-ai-hint .ti { font-size: 0.62rem; }

.tcw-leave-alert {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.66rem; color: #dc2626; font-weight: 600;
  background: #fef2f2; border: 1px solid #fecaca;
  padding: 1px 6px; border-radius: 4px;
  white-space: nowrap; margin-top: 1px;
}
.tcw-leave-alert .ti { font-size: 0.62rem; }

/* ── AI banner at top of card ───────────────────────────────── */
.tcw-ai-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 16px;
  background: #eef2ff;
  border-bottom: 1px solid #c7d2fe;
  font-size: 0.79rem; color: #3730a3;
}
.tcw-ai-banner--warn {
  background: #fffbeb; border-bottom-color: #fde68a; color: #92400e;
}
[data-bs-theme="dark"] .tcw-ai-banner {
  background: #1e1b4b; border-bottom-color: #3730a3; color: #a5b4fc;
}
[data-bs-theme="dark"] .tcw-ai-banner--warn {
  background: #2d1f00; border-bottom-color: #92400e; color: #fcd34d;
}
.tcw-ai-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.tcw-ai-text { line-height: 1.5; }

/* ── Header summary chips ───────────────────────────────────── */
.tcw-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.69rem; font-weight: 700;
  padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}
.tcw-chip .ti { font-size: 0.65rem; }
.tcw-chip--blue  { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.tcw-chip--red   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.tcw-chip--amber { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.tcw-chip--green { background: #f0fdf4; color: #059669; border: 1px solid #bbf7d0; }


/* ══════════════════════════════════════════════════════════════
   AUDIT REPORT — PREMIUM REDESIGN v3
   Inspired by Linear · Stripe · Vercel · Attio · ClickUp 3.0
   All wr-* and wrc-* classes are overridden here with !important
   to guarantee render without touching the original declarations.
   ══════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────── */
#page-weeklyreport {
  background: #f4f6f9 !important;
  padding: 20px 24px 32px !important;
  min-height: 100vh;
}
[data-bs-theme="dark"] #page-weeklyreport { background: #0d1117 !important; }

/* ── Page header ────────────────────────────────────────────── */
.wr-page-hdr {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 0 !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #e8edf2 !important;
  margin-bottom: 20px !important;
}
[data-bs-theme="dark"] .wr-page-hdr { border-bottom-color: #21262d !important; }

.wr-page-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.wr-page-title {
  font-size: 1.18rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
}
[data-bs-theme="dark"] .wr-page-title { color: #f1f5f9 !important; }

/* Live badge */
.wr-live-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  background: #f0fdf4 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
  letter-spacing: 0.03em !important;
}
.wr-live-dot {
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important;
  background: #16a34a !important;
  box-shadow: 0 0 0 2px #bbf7d0 !important;
  animation: livepulse 2s ease-in-out infinite !important;
}
@keyframes liveplus { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes liveplus { 0%,100%{box-shadow:0 0 0 2px #bbf7d0} 50%{box-shadow:0 0 0 4px #bbf7d066} }
@keyframes liveplus { 0%,100%{opacity:1;box-shadow:0 0 0 2px #bbf7d0} 50%{opacity:.6;box-shadow:0 0 0 5px #bbf7d040} }
@keyframes liveplus { 0%,100%{box-shadow:0 0 0 2px #bbf7d0,0 0 0 4px transparent} 50%{box-shadow:0 0 0 2px #bbf7d0,0 0 0 5px #bbf7d044} }

/* Week nav */
.wr-week-nav {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 3px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
[data-bs-theme="dark"] .wr-week-nav {
  background: #161b22 !important;
  border-color: #30363d !important;
}
.wr-week-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .12s !important;
}
.wr-week-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
[data-bs-theme="dark"] .wr-week-btn:hover {
  background: #21262d !important;
  color: #e2e8f0 !important;
}
.wr-week-label {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding: 5px 12px !important;
  min-width: 160px !important;
  text-align: center !important;
  white-space: nowrap !important;
  background: #f8fafc !important;
  border-radius: 5px !important;
  border: 1px solid #f1f5f9 !important;
}
[data-bs-theme="dark"] .wr-week-label {
  color: #f1f5f9 !important;
  background: #0d1117 !important;
  border-color: #21262d !important;
}
.wr-week-btn--today {
  color: #2563eb !important;
  font-size: 0.72rem !important;
  margin-left: 2px !important;
}

/* Action buttons */
.wr-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 32px !important;
  padding: 0 13px !important;
  border-radius: 7px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: all .13s !important;
  white-space: nowrap !important;
}
.wr-btn--primary {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #2563eb !important;
  box-shadow: 0 1px 3px rgba(37,99,235,.25) !important;
}
.wr-btn--primary:hover { background: #1d4ed8 !important; box-shadow: 0 2px 6px rgba(37,99,235,.35) !important; }
.wr-btn--secondary {
  background: #fff !important;
  color: #374151 !important;
  border-color: #e2e8f0 !important;
}
.wr-btn--secondary:hover {
  background: #f8fafc !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
}
[data-bs-theme="dark"] .wr-btn--secondary {
  background: #161b22 !important;
  color: #94a3b8 !important;
  border-color: #30363d !important;
}

/* ── Tab bar ────────────────────────────────────────────────── */
.wr-tabs {
  display: flex !important;
  gap: 4px !important;
  background: #fff !important;
  border: 1px solid #e8edf2 !important;
  border-radius: 10px !important;
  padding: 4px !important;
  margin-bottom: 20px !important;
  width: fit-content !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
[data-bs-theme="dark"] .wr-tabs {
  background: #161b22 !important;
  border-color: #30363d !important;
}
.wr-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
  border-radius: 7px !important;
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .13s !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
}
.wr-tab .ti { font-size: 0.78rem !important; }
.wr-tab:hover {
  background: #f8fafc !important;
  color: #374151 !important;
}
.wr-tab.active {
  background: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(37,99,235,.3) !important;
}
[data-bs-theme="dark"] .wr-tab:hover { background: #21262d !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .wr-tab.active { background: #2563eb !important; color: #fff !important; }

/* ── KPI stat strip ─────────────────────────────────────────── */
.wr-stat-bar {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}
@media (max-width: 900px) { .wr-stat-bar { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 600px) { .wr-stat-bar { grid-template-columns: repeat(2,1fr) !important; } }

.wr-stat {
  background: #fff !important;
  border: 1px solid #e8edf2 !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: box-shadow .15s, transform .1s !important;
  cursor: default !important;
  position: relative !important;
  overflow: hidden !important;
  min-width: 0 !important;
  flex: unset !important;
}
.wr-stat:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.07) !important;
  transform: translateY(-1px) !important;
}
[data-bs-theme="dark"] .wr-stat {
  background: #161b22 !important;
  border-color: #30363d !important;
}

/* Subtle top-border accent per stat */
.wr-stat:nth-child(1)::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:#10b981; border-radius:12px 12px 0 0; }
.wr-stat:nth-child(2)::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:#3b82f6; border-radius:12px 12px 0 0; }
.wr-stat:nth-child(3)::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:#8b5cf6; border-radius:12px 12px 0 0; }
.wr-stat:nth-child(4)::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:#06b6d4; border-radius:12px 12px 0 0; }
.wr-stat:nth-child(5)::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:#f59e0b; border-radius:12px 12px 0 0; }

.wr-stat-ico-sm {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  flex-shrink: 0 !important;
}

.wr-stat-val {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
[data-bs-theme="dark"] .wr-stat-val { color: #f1f5f9 !important; }

.wr-stat-lbl {
  font-size: 0.68rem !important;
  color: #94a3b8 !important;
  margin-top: 4px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

/* Top performer stat: no special yellow bg — use accent border only */
.wr-stat--highlight {
  border-color: #fde68a !important;
  background: #fffdf5 !important;
}
[data-bs-theme="dark"] .wr-stat--highlight {
  background: #1a1500 !important;
  border-color: #713f12 !important;
}

/* ── Member cards grid ──────────────────────────────────────── */
.wr-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 14px !important;
}

/* ── Member card ────────────────────────────────────────────── */
.wrc-card {
  background: #fff !important;
  border: 1px solid #e8edf2 !important;
  border-radius: 14px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  cursor: pointer !important;
  transition: box-shadow .18s, border-color .18s, transform .12s !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  overflow: hidden !important;
  position: relative !important;
}
.wrc-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.1) !important;
  border-color: #93c5fd !important;
  transform: translateY(-2px) !important;
}
[data-bs-theme="dark"] .wrc-card {
  background: #161b22 !important;
  border-color: #30363d !important;
}
[data-bs-theme="dark"] .wrc-card:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.3) !important;
}

/* Top colour band — dynamically set inline in JS via --wrc-accent */
.wrc-card::before {
  content: '' !important;
  display: block !important;
  height: 3px !important;
  background: var(--wrc-accent, #e2e8f0) !important;
  border-radius: 14px 14px 0 0 !important;
}

/* Card body padding wrapper */
.wrc-card-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 16px 16px 12px !important;
}

.wrc-avatar-wrap { flex-shrink: 0; }
.wrc-info { flex: 1 !important; min-width: 0 !important; }

.wrc-name {
  font-size: 0.87rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.01em !important;
}
[data-bs-theme="dark"] .wrc-name { color: #f1f5f9 !important; }

.wrc-sub {
  font-size: 0.7rem !important;
  color: #94a3b8 !important;
  margin-top: 3px !important;
  line-height: 1.4 !important;
}

/* Score pill — top-right */
.wrc-score {
  flex-shrink: 0 !important;
  min-width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
.wrc-score::after {
  content: 'pts' !important;
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  opacity: .6 !important;
  margin-top: 2px !important;
}

/* Progress bar strip */
.wrc-bar-wrap {
  padding: 0 16px 10px !important;
}
.wrc-bar-track {
  height: 4px !important;
  background: #f1f5f9 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
[data-bs-theme="dark"] .wrc-bar-track { background: #21262d !important; }
.wrc-bar-fill {
  height: 100% !important;
  border-radius: 999px !important;
  transition: width .6s cubic-bezier(.4,0,.2,1) !important;
}

/* Chips row */
.wrc-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  padding: 0 16px 14px !important;
}
.wrc-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
}
.wrc-chip .ti { font-size: 0.65rem !important; }
.wrc-chip--green  { background: #f0fdf4 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; }
.wrc-chip--blue   { background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }
.wrc-chip--red    { background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; }
.wrc-chip--gray   { background: #f9fafb !important; color: #9ca3af !important; border: 1px solid #e5e7eb !important; }

/* Card footer */
.wrc-footer {
  border-top: 1px solid #f1f5f9 !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
[data-bs-theme="dark"] .wrc-footer { border-top-color: #21262d !important; }

.wrc-view-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.71rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  transition: color .12s !important;
}
.wrc-card:hover .wrc-view-link { color: #2563eb !important; }

/* ── Drawer ──────────────────────────────────────────────────── */
.wr-drawer {
  width: 520px !important;
  background: #fff !important;
  border-left: 1px solid #e8edf2 !important;
  box-shadow: -8px 0 40px rgba(0,0,0,.1) !important;
}
[data-bs-theme="dark"] .wr-drawer {
  background: #0d1117 !important;
  border-left-color: #21262d !important;
}

.wr-drawer-hdr {
  padding: 20px 22px 16px !important;
  background: #fff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  gap: 12px !important;
}
[data-bs-theme="dark"] .wr-drawer-hdr {
  background: #0d1117 !important;
  border-bottom-color: #21262d !important;
}

.wr-drawer-name {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
}
[data-bs-theme="dark"] .wr-drawer-name { color: #f1f5f9 !important; }

.wr-drawer-close {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  color: #94a3b8 !important;
  border: 1px solid #e8edf2 !important;
  background: transparent !important;
  transition: all .12s !important;
}
.wr-drawer-close:hover {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}
[data-bs-theme="dark"] .wr-drawer-close { border-color: #30363d !important; }

/* ── Month select ────────────────────────────────────────────── */
.wr-month-sel {
  height: 32px !important;
  padding: 0 28px 0 10px !important;
  font-size: 0.78rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--bs-body-color) !important;
  cursor: pointer !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
[data-bs-theme="dark"] .wr-month-sel {
  background-color: #161b22 !important;
  border-color: #30363d !important;
}


/* ══════════════════════════════════════════════════════════════
   DASHBOARD SECTIONS v2 — ds2-* card shell · na-* · lv-* · rel-* · si2-*
   Premium SaaS redesign: Needs Attention, Leave, Releases, Standup
   ══════════════════════════════════════════════════════════════ */

/* ── Shared card shell ──────────────────────────────────────── */
.ds2-card {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-bs-theme="dark"] .ds2-card {
  background: #161b22;
  border-color: #30363d;
}

/* Card header */
.ds2-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
  gap: 10px;
}
[data-bs-theme="dark"] .ds2-card-hdr { border-bottom-color: #21262d; }

.ds2-hdr-left  { display: flex; align-items: center; gap: 9px; }
.ds2-hdr-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* Header icon pill */
.ds2-hdr-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; flex-shrink: 0;
}
.ds2-hdr-icon--red    { background: #fef2f2; color: #dc2626; }
.ds2-hdr-icon--orange { background: #fff7ed; color: #ea580c; }
.ds2-hdr-icon--purple { background: #faf5ff; color: #7c3aed; }
.ds2-hdr-icon--indigo { background: #eef2ff; color: #4f46e5; }
[data-bs-theme="dark"] .ds2-hdr-icon--red    { background: #2d1b1b; color: #f87171; }
[data-bs-theme="dark"] .ds2-hdr-icon--orange { background: #2d1a0e; color: #fb923c; }
[data-bs-theme="dark"] .ds2-hdr-icon--purple { background: #1e1047; color: #a78bfa; }
[data-bs-theme="dark"] .ds2-hdr-icon--indigo { background: #1a1f47; color: #818cf8; }

.ds2-hdr-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
}
[data-bs-theme="dark"] .ds2-hdr-title { color: #f1f5f9; }

/* Count badge */
.ds2-hdr-count {
  font-size: 0.67rem; font-weight: 800;
  padding: 1px 7px; border-radius: 20px;
  display: none;
}
.ds2-hdr-count[style*="display"],
.ds2-hdr-count:not(:empty) { display: inline-flex; }
.ds2-hdr-count--red { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* Navigation buttons */
.ds2-nav-btn {
  width: 26px; height: 26px;
  border: 1px solid #e2e8f0; border-radius: 6px;
  background: transparent; color: #64748b;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; cursor: pointer;
  transition: all .12s;
}
.ds2-nav-btn:hover { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
[data-bs-theme="dark"] .ds2-nav-btn { border-color: #30363d; color: #94a3b8; }
[data-bs-theme="dark"] .ds2-nav-btn:hover { background: #21262d; color: #e2e8f0; }

.ds2-month-lbl {
  font-size: 0.76rem; font-weight: 700;
  color: #374151; min-width: 80px; text-align: center;
}
[data-bs-theme="dark"] .ds2-month-lbl { color: #e2e8f0; }

/* Add button */
.ds2-add-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 10px;
  border: 1px solid #e2e8f0; border-radius: 6px;
  background: #fff; color: #374151;
  font-size: 0.73rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all .12s;
}
.ds2-add-btn .ti { font-size: 0.72rem; }
.ds2-add-btn:hover { background: #f8fafc; border-color: #2563eb; color: #2563eb; }
[data-bs-theme="dark"] .ds2-add-btn { background: #161b22; border-color: #30363d; color: #94a3b8; }
[data-bs-theme="dark"] .ds2-add-btn:hover { border-color: #3b82f6; color: #60a5fa; }

/* Scrollable body */
.ds2-card-body { padding: 4px 0; flex: 1; }
.ds2-scroll { max-height: 320px; overflow-y: auto; }
.ds2-scroll::-webkit-scrollbar { width: 4px; }
.ds2-scroll::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

/* ══════════════════════════════════════════════════════════════
   NEEDS ATTENTION — na-*
   ══════════════════════════════════════════════════════════════ */

.na-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid #f8fafc;
  transition: background .1s;
  position: relative;
}
[data-bs-theme="dark"] .na-item { border-bottom-color: #1a1f29; }
.na-item:last-child { border-bottom: none; }
.na-item:hover { background: #fafbfc; }
[data-bs-theme="dark"] .na-item:hover { background: rgba(255,255,255,.025); }

/* Left accent line */
.na-type-bar {
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 2px 2px 0;
}

.na-icon-wrap {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; flex-shrink: 0; margin-left: 8px;
}

.na-body { flex: 1; min-width: 0; }

.na-title {
  font-size: 0.81rem; font-weight: 600;
  color: #1e293b; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 5px;
}
[data-bs-theme="dark"] .na-title { color: #e2e8f0; }

.na-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.na-badge {
  font-size: 0.63rem; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
  white-space: nowrap;
}
.na-meta-text {
  font-size: 0.71rem; color: #94a3b8; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Empty state */
.na-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 36px 20px; text-align: center;
}
.na-empty-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: #f0fdf4; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #10b981;
}
.na-empty-text { font-size: 0.78rem; color: #94a3b8; }

/* ══════════════════════════════════════════════════════════════
   LEAVE & AVAILABILITY — lv-*
   ══════════════════════════════════════════════════════════════ */

/* ── Leave section headers ─────────────────────────────────── */
.lv-section { border-bottom: 1px solid #f1f5f9; }
.lv-section:last-child { border-bottom: none; }
[data-bs-theme="dark"] .lv-section { border-bottom-color: #1e2535; }

.lv-section-hdr {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 16px; background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  position: sticky; top: 0; z-index: 1;
}
[data-bs-theme="dark"] .lv-section-hdr { background: #161e2d; border-bottom-color: #1e2535; }

/* History header is a button */
.lv-section-hdr--btn {
  width: 100%; text-align: left; border: none; cursor: pointer;
  transition: background .12s;
}
.lv-section-hdr--btn:hover { background: #f1f5f9; }
[data-bs-theme="dark"] .lv-section-hdr--btn:hover { background: #1a2535; }

.lv-section-title {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: #64748b;
}
[data-bs-theme="dark"] .lv-section-title { color: #64748b; }

/* Status dot */
.lv-section-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.lv-dot--today    { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.2); }
.lv-dot--upcoming { background: #3b82f6; }
.lv-dot--history  { background: #cbd5e1; }

/* Count badge */
.lv-section-badge {
  font-size: 0.62rem; font-weight: 700; padding: 1px 6px;
  border-radius: 10px; flex-shrink: 0;
}
.lv-badge--today    { background: #dcfce7; color: #15803d; }
.lv-badge--upcoming { background: #dbeafe; color: #1d4ed8; }
.lv-badge--history  { background: #f1f5f9; color: #64748b; }
[data-bs-theme="dark"] .lv-badge--today    { background: rgba(16,185,129,.15); color: #34d399; }
[data-bs-theme="dark"] .lv-badge--upcoming { background: rgba(59,130,246,.15); color: #60a5fa; }
[data-bs-theme="dark"] .lv-badge--history  { background: #1e2535; color: #64748b; }

/* History chevron */
.lv-history-chevron { transition: transform .2s; }

/* Empty row */
.lv-empty-row {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px; font-size: 0.76rem; color: #94a3b8;
}
.lv-empty-row .ti { font-size: 0.8rem; color: #10b981; }

/* More link */
.lv-more-link {
  padding: 6px 18px; font-size: 0.7rem; color: #64748b;
  font-weight: 500;
}

/* ── Leave row items ───────────────────────────────────────── */
.lv-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid #f8fafc;
  transition: background .1s;
}
[data-bs-theme="dark"] .lv-item { border-bottom-color: #1a1f29; }
.lv-section .lv-item:last-child { border-bottom: none; }
.lv-item:hover { background: #fafbfc; }
[data-bs-theme="dark"] .lv-item:hover { background: rgba(255,255,255,.025); }
.lv-item:hover .lv-actions { opacity: 1; }

.lv-avatar { flex-shrink: 0; }
.lv-info   { flex: 1; min-width: 0; }
.lv-name {
  font-size: 0.81rem; font-weight: 600; color: #1e293b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-bs-theme="dark"] .lv-name { color: #e2e8f0; }
.lv-name--muted { color: #94a3b8; font-weight: 500; }
[data-bs-theme="dark"] .lv-name--muted { color: #64748b; }

.lv-date {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.68rem; color: #94a3b8; margin-top: 1px;
}

.lv-badge {
  font-size: 0.65rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
}

.lv-actions {
  display: flex; gap: 3px; flex-shrink: 0;
  opacity: 0; transition: opacity .12s;
}
.lv-item:hover .lv-actions { opacity: 1; }
.lv-act-btn {
  width: 24px; height: 24px; border-radius: 5px;
  border: 1px solid transparent; background: transparent;
  color: #94a3b8; font-size: 0.72rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.lv-act-btn:hover { background: #f1f5f9; border-color: #e2e8f0; color: #374151; }
[data-bs-theme="dark"] .lv-act-btn:hover { background: #1e2d40; border-color: #263548; color: #e2e8f0; }
.lv-act-btn--del:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
[data-bs-theme="dark"] .lv-act-btn--del:hover { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.3); color: #f87171; }

/* ══════════════════════════════════════════════════════════════
   RELEASE CALENDAR — rel-*
   ══════════════════════════════════════════════════════════════ */

.rel-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid #f8fafc;
  transition: background .1s;
}
[data-bs-theme="dark"] .rel-item { border-bottom-color: #1a1f29; }
.rel-item:last-child { border-bottom: none; }
.rel-item:hover { background: #fafbfc; }
[data-bs-theme="dark"] .rel-item:hover { background: rgba(255,255,255,.025); }

/* Date box — compact, bordered */
.rel-date-box {
  width: 42px; min-width: 42px;
  background: #f8fafc;
  border: 1px solid currentColor;
  border-radius: 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 5px 0;
  opacity: .9;
}
[data-bs-theme="dark"] .rel-date-box { background: #0d1117; }

.rel-date-day {
  font-size: 1.05rem; font-weight: 800;
  line-height: 1; letter-spacing: -0.02em;
}
.rel-date-mon {
  font-size: 0.58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 1px;
}

.rel-body { flex: 1; min-width: 0; }

.rel-top-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px; flex-wrap: wrap;
}
.rel-name {
  font-size: 0.83rem; font-weight: 700;
  color: #0f172a; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-bs-theme="dark"] .rel-name { color: #f1f5f9; }

.rel-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.67rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
  flex-shrink: 0;
}

.rel-meta {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.rel-env-chip {
  font-size: 0.65rem; font-weight: 600;
  background: #f1f5f9; color: #475569;
  padding: 1px 7px; border-radius: 4px;
  border: 1px solid #e2e8f0;
}
[data-bs-theme="dark"] .rel-env-chip { background: #21262d; color: #94a3b8; border-color: #30363d; }
.rel-date-text {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.69rem; color: #94a3b8;
}

/* Readiness bar */
.rel-readiness { margin-top: 2px; }
.rel-rdy-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.rel-rdy-bar-track {
  flex: 1; height: 5px; border-radius: 999px;
  background: #f1f5f9; overflow: hidden;
}
[data-bs-theme="dark"] .rel-rdy-bar-track { background: #21262d; }
.rel-rdy-bar { height: 100%; border-radius: 999px; transition: width .4s ease; }
.rel-rdy-pct { font-size: 0.65rem; font-weight: 700; min-width: 28px; text-align: right; }
.rel-rdy-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.rel-rdy-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.62rem; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.rel-rdy-chip .ti { font-size: 0.6rem; }
.rel-rdy-chip--red   { background: #fef2f2; color: #dc2626; }
.rel-rdy-chip--blue  { background: #eff6ff; color: #2563eb; }
.rel-rdy-chip--green { background: #f0fdf4; color: #15803d; }

.rel-actions { display: flex; gap: 3px; flex-shrink: 0; margin-top: 2px; }
.rel-act-btn {
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid transparent; background: transparent;
  color: #94a3b8; font-size: 0.75rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.rel-act-btn:hover { background: #f1f5f9; border-color: #e2e8f0; color: #374151; }
.rel-act-btn--del:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }

/* ══════════════════════════════════════════════════════════════
   STANDUP INSIGHTS — si2-*
   ══════════════════════════════════════════════════════════════ */

.si2-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 10px;
  border-bottom: 1px solid #f1f5f9;
}
[data-bs-theme="dark"] .si2-header { border-bottom-color: #21262d; }

.si2-ai-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.69rem; font-weight: 700;
  background: linear-gradient(135deg, #eef2ff, #faf5ff);
  color: #4f46e5; border: 1px solid #c7d2fe;
  padding: 3px 10px; border-radius: 20px;
  letter-spacing: 0.01em;
}
.si2-ai-pill .ti { font-size: 0.7rem; }
[data-bs-theme="dark"] .si2-ai-pill {
  background: linear-gradient(135deg, #1e1b4b, #2e1047);
  border-color: #4338ca; color: #a5b4fc;
}

.si2-source {
  font-size: 0.69rem; color: #94a3b8; font-weight: 500;
}

.si2-bullets { padding: 6px 0; }

.si2-bullet {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 18px;
  border-bottom: 1px solid #f8fafc;
  transition: background .1s;
}
[data-bs-theme="dark"] .si2-bullet { border-bottom-color: #1a1f29; }
.si2-bullet:last-child { border-bottom: none; }
.si2-bullet:hover { background: #fafbfc; }
[data-bs-theme="dark"] .si2-bullet:hover { background: rgba(255,255,255,.025); }

.si2-bullet-icon {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; flex-shrink: 0; margin-top: 1px;
}
.si2-bullet-text {
  font-size: 0.8rem; line-height: 1.5; color: #374151; flex: 1;
}
[data-bs-theme="dark"] .si2-bullet-text { color: #cbd5e1; }
.si2-bullet-text strong { color: #0f172a; font-weight: 700; }
[data-bs-theme="dark"] .si2-bullet-text strong { color: #f1f5f9; }


/* ══════════════════════════════════════════════════════════════
   KNOWLEDGE HUB — Premium Document Card Redesign v3
   kbc-* components · Notion × Linear × Stripe aesthetic
   ══════════════════════════════════════════════════════════════ */

/* ── List container ─────────────────────────────────────────── */
.kbc-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e4e9f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 0 0 0 transparent !important;
  overflow: hidden !important;
}
[data-bs-theme="dark"] .kbc-list {
  background: #161b22 !important;
  border-color: #30363d !important;
}

/* Top accent line on the list container */
.kbc-list::before {
  content: '' !important;
  display: block !important;
  height: 3px !important;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 60%, #06b6d4 100%) !important;
  flex-shrink: 0 !important;
}

/* ── Grid container ─────────────────────────────────────────── */
.kbc-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 14px !important;
}

/* ══════════════════════════════════════════════════════════════
   DOCUMENT ROW — the core card unit
   ══════════════════════════════════════════════════════════════ */
.kbc-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: transparent;
  border-bottom: 1px solid #f0f4f8;
  cursor: pointer;
  transition: background .12s;
  position: relative;
  min-width: 0;
}
[data-bs-theme="dark"] .kbc-row { border-bottom-color: #1e2530; }
.kbc-list .kbc-row:last-child { border-bottom: none; }

/* Hover */
.kbc-row:hover { background: #f7fafd; }
[data-bs-theme="dark"] .kbc-row:hover { background: rgba(255,255,255,.025); }

/* Left blue indicator on hover */
.kbc-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background .15s;
  border-radius: 0;
}
.kbc-row:hover::before { background: #2563eb; }
[data-bs-theme="dark"] .kbc-row:hover::before { background: #3b82f6; }
.kbc-row:hover .kbc-title { color: #1d4ed8; }
[data-bs-theme="dark"] .kbc-row:hover .kbc-title { color: #60a5fa; }

/* ── Grid mode overrides ────────────────────────────────────── */
.kbc-grid .kbc-row {
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #e4e9f0;
  border-radius: 11px;
  border-bottom: 1px solid #e4e9f0;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: box-shadow .15s, border-color .15s, transform .1s;
  gap: 12px;
}
.kbc-grid .kbc-row::before { display: none; }
.kbc-grid .kbc-row:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.09);
  border-color: #93c5fd;
  transform: translateY(-1px);
  background: #fff;
}
[data-bs-theme="dark"] .kbc-grid .kbc-row {
  background: #161b22;
  border-color: #30363d;
}
[data-bs-theme="dark"] .kbc-grid .kbc-row:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

/* ── Thumbnail / icon area ──────────────────────────────────── */
.kbc-thumb {
  width: 52px;
  min-width: 52px;
  height: 52px;
  margin: 10px 0 10px 14px;
  border-radius: 10px;
  background: var(--kbc-bg, #f1f5f9);
  color: var(--kbc-color, #6b7280);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--kbc-color, #6b7280) 15%, transparent);
  transition: transform .12s;
}
.kbc-row:hover .kbc-thumb { transform: scale(1.04); }

/* File extension label inside thumb */
.kbc-icon-ext {
  position: absolute;
  bottom: -1px; right: -1px;
  background: var(--kbc-color, #6b7280);
  color: #fff;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 3px 0 4px 0;
  line-height: 1.4;
}

/* Grid mode thumb */
.kbc-grid .kbc-thumb {
  width: 44px; min-width: 44px; height: 44px;
  margin: 0; font-size: 1.1rem;
}

/* ── Content area ───────────────────────────────────────────── */
.kbc-content {
  flex: 1;
  min-width: 0;
  padding: 12px 14px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.kbc-grid .kbc-content {
  padding: 0;
  width: 100%;
}

/* Title row */
.kbc-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.kbc-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  letter-spacing: -0.005em;
  transition: color .12s;
}
[data-bs-theme="dark"] .kbc-title { color: #e2e8f0; }

/* Domain label next to title */
.kbc-domain {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  color: #94a3b8;
  font-family: ui-monospace, 'SF Mono', monospace;
  background: #f8fafc;
  border: 1px solid #e8edf2;
  padding: 1px 7px;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
[data-bs-theme="dark"] .kbc-domain { background: #21262d; border-color: #30363d; color: #6b7280; }

/* Meta row */
.kbc-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}

.kbc-meta-sep {
  color: #d1d5db;
  font-size: 0.7rem;
  flex-shrink: 0;
  user-select: none;
}

/* Type chip */
.kbc-type-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: 0.025em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Date chip */
.kbc-date {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}

/* File size */
.kbc-size {
  font-size: 0.69rem;
  color: #94a3b8;
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}

/* Tags */
.kbc-tags {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.kbc-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}
[data-bs-theme="dark"] .kbc-tag { background: #21262d; border-color: #30363d; color: #94a3b8; }
.kbc-tag--more {
  background: #f8fafc;
  color: #94a3b8;
  border-color: #e8edf2;
}

/* ── Action bar ─────────────────────────────────────────────── */
.kbc-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 14px 0 10px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s;
}
/* Always visible in list */
.kbc-list .kbc-actions { opacity: 1; }
/* Fade in on hover for both */
.kbc-row:hover .kbc-actions { opacity: 1; }

/* Grid mode action bar */
.kbc-grid .kbc-actions {
  opacity: 1;
  padding: 0;
  width: 100%;
  border-top: 1px solid #f1f5f9;
  padding-top: 10px;
  margin-top: 2px;
}
[data-bs-theme="dark"] .kbc-grid .kbc-actions { border-top-color: #21262d; }

.kbc-divider {
  width: 1px;
  height: 18px;
  background: #e4e9f0;
  flex-shrink: 0;
  margin: 0 2px;
}
[data-bs-theme="dark"] .kbc-divider { background: #30363d; }

/* Action buttons */
.kbc-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s;
  color: #64748b;
}
.kbc-btn .ti { font-size: 0.78rem; }

/* Primary CTA button */
.kbc-btn--primary {
  background: #f0f7ff;
  border-color: #c7dffe;
  color: #1d4ed8;
  padding: 0 11px;
}
.kbc-btn--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 1px 4px rgba(37,99,235,.25);
}

/* Ghost buttons (copy, edit, delete) */
.kbc-btn--ghost:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #374151;
}
[data-bs-theme="dark"] .kbc-btn--ghost:hover {
  background: #21262d;
  border-color: #30363d;
  color: #e2e8f0;
}

.kbc-btn--edit:hover {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}
.kbc-btn--del:hover {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}
[data-bs-theme="dark"] .kbc-btn--del:hover {
  background: #2d1b1b !important;
  border-color: #7f1d1d !important;
  color: #f87171 !important;
}

/* Hide label on small screens / grid mode */
.kbc-btn-label { font-size: 0.73rem; }
.kbc-grid .kbc-btn-label { display: none; }

/* ── Empty state ─────────────────────────────────────────────── */
.kbc-empty-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 220px !important;
}
.kbc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 48px 24px;
}
.kbc-empty-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: #f1f5f9;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #94a3b8;
}
[data-bs-theme="dark"] .kbc-empty-icon { background: #21262d; }
.kbc-empty-title {
  font-size: 0.9rem; font-weight: 700;
  color: #374151; letter-spacing: -0.01em;
}
[data-bs-theme="dark"] .kbc-empty-title { color: #e2e8f0; }
.kbc-empty-sub {
  font-size: 0.78rem; color: #94a3b8; max-width: 280px; line-height: 1.5;
}



/* ══════════════════════════════════════════════════════════════
   AUDIT REPORT  — ar-*  (Monthly + Individual shared)
   ══════════════════════════════════════════════════════════════ */

/* Page surface — give the audit section its own grey canvas */
#page-weeklyreport {
  background: #f1f5f9;
  padding: 0 !important;
}
[data-bs-theme="dark"] #page-weeklyreport { background: #0d1521; }

/* A thin wrapper so inner content still has side padding */
#wr-panel-monthly,
#wr-panel-individual,
#wr-panel-weekly {
  padding: 16px 20px 20px;
}

/* ── KPI Row ─────────────────────────────────────────────────── */
.ar-kpi-row {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.ar-kpi-card {
  display: flex; align-items: center; gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  position: relative; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow .18s, transform .18s;
}
.ar-kpi-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
  transform: translateY(-1px);
}
[data-bs-theme="dark"] .ar-kpi-card {
  background: #1a2539;
  border-color: #263548;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
[data-bs-theme="dark"] .ar-kpi-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.5); }

/* Top accent stripe */
.ar-kpi-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 12px 12px 0 0;
  background: transparent;
}
#ar-kpi-total  .ar-kpi-card::before,
.ar-kpi-row .ar-kpi-card:nth-child(1)::before { background: #2563eb; }
.ar-kpi-row .ar-kpi-card:nth-child(2)::before { background: #f59e0b; }
.ar-kpi-row .ar-kpi-card:nth-child(3)::before { background: #10b981; }
.ar-kpi-row .ar-kpi-card:nth-child(4)::before { background: #ef4444; }
.ar-kpi-row .ar-kpi-card:nth-child(5)::before { background: #7c3aed; }

.ar-kpi-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.ar-kpi-icon--blue   { background: #eff6ff; color: #2563eb; }
.ar-kpi-icon--amber  { background: #fffbeb; color: #d97706; }
.ar-kpi-icon--green  { background: #f0fdf4; color: #16a34a; }
.ar-kpi-icon--red    { background: #fef2f2; color: #dc2626; }
.ar-kpi-icon--purple { background: #f5f3ff; color: #7c3aed; }
[data-bs-theme="dark"] .ar-kpi-icon--blue   { background: rgba(37,99,235,.18);  }
[data-bs-theme="dark"] .ar-kpi-icon--amber  { background: rgba(217,119,6,.18);  }
[data-bs-theme="dark"] .ar-kpi-icon--green  { background: rgba(22,163,74,.18);  }
[data-bs-theme="dark"] .ar-kpi-icon--red    { background: rgba(220,38,38,.18);  }
[data-bs-theme="dark"] .ar-kpi-icon--purple { background: rgba(124,58,237,.18); }

.ar-kpi-body { flex: 1; min-width: 0; }
.ar-kpi-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #64748b; margin-bottom: 4px;
}
[data-bs-theme="dark"] .ar-kpi-label { color: #94a3b8; }
.ar-kpi-value { font-size: 1.5rem; font-weight: 800; color: #0f172a; line-height: 1; }
[data-bs-theme="dark"] .ar-kpi-value { color: #f1f5f9; }
.ar-kpi-trend { font-size: 0.68rem; margin-top: 4px; }
.ar-trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; }
.ar-trend .ti { font-size: 0.6rem; }
.ar-trend--up   { color: #16a34a; }
.ar-trend--down { color: #dc2626; }
.ar-trend--flat { color: #94a3b8; }

.ar-kpi-spark {
  position: absolute; right: 4px; bottom: 6px; width: 60px; height: 24px; opacity: .5;
}
.ar-kpi-ring-wrap { flex-shrink: 0; }
.ar-kpi-ring { width: 44px; height: 44px; }

/* ── Filter Bar ──────────────────────────────────────────────── */
.ar-filter-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin-bottom: 14px;
}
[data-bs-theme="dark"] .ar-filter-bar {
  background: #1a2539; border-color: #263548;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.ar-filter-sel {
  height: 34px; padding: 0 10px; font-size: 0.8rem; border-radius: 7px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc; color: #0f172a;
  outline: none; cursor: pointer; transition: border-color .15s, box-shadow .15s;
  min-width: 130px;
}
.ar-filter-sel:hover  { border-color: #94a3b8; }
.ar-filter-sel:focus  { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); background: #fff; }
[data-bs-theme="dark"] .ar-filter-sel {
  background: #0f1e2d; border-color: #2d4059; color: #e2e8f0;
}
[data-bs-theme="dark"] .ar-filter-sel:focus { background: #1a2539; }

.ar-search-wrap { position: relative; flex: 1; min-width: 220px; }
.ar-search-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: 0.8rem; pointer-events: none;
}
.ar-search-inp {
  width: 100%; height: 34px; padding: 0 10px 0 32px; font-size: 0.8rem;
  border: 1.5px solid #cbd5e1; border-radius: 7px;
  background: #f8fafc; color: #0f172a; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ar-search-inp::placeholder { color: #94a3b8; }
.ar-search-inp:hover  { border-color: #94a3b8; }
.ar-search-inp:focus  { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); background: #fff; }
[data-bs-theme="dark"] .ar-search-inp {
  background: #0f1e2d; border-color: #2d4059; color: #e2e8f0;
}

.ar-filter-clear {
  height: 34px; padding: 0 14px; border-radius: 7px; font-size: 0.8rem; font-weight: 500;
  border: 1.5px solid #cbd5e1; background: #fff;
  color: #64748b; cursor: pointer; white-space: nowrap; transition: all .15s;
}
.ar-filter-clear:hover { background: #f1f5f9; border-color: #94a3b8; color: #334155; }
[data-bs-theme="dark"] .ar-filter-clear {
  background: #0f1e2d; border-color: #2d4059; color: #94a3b8;
}
[data-bs-theme="dark"] .ar-filter-clear:hover { background: #1a2539; color: #e2e8f0; }

/* ── Panel card base ─────────────────────────────────────────── */
.ar-panel-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  overflow: hidden;
}
[data-bs-theme="dark"] .ar-panel-card {
  background: #1a2539; border-color: #263548;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* ── Split Layout ────────────────────────────────────────────── */
.ar-layout {
  display: flex; gap: 14px;
  height: calc(100vh - 360px); min-height: 420px;
}

/* ── Periods Panel ───────────────────────────────────────────── */
.ar-periods-panel {
  width: 268px; flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  display: flex; flex-direction: column; overflow: hidden;
}
[data-bs-theme="dark"] .ar-periods-panel {
  background: #1a2539; border-color: #263548;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.ar-periods-hdr {
  padding: 13px 15px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex; flex-direction: column; gap: 2px;
}
[data-bs-theme="dark"] .ar-periods-hdr {
  background: #131e2e; border-bottom-color: #263548;
}
.ar-periods-hdr .ti { margin-right: 5px; color: #2563eb; }
.ar-periods-hdr > :first-child { font-size: 0.82rem; font-weight: 700; color: #0f172a; }
[data-bs-theme="dark"] .ar-periods-hdr > :first-child { color: #f1f5f9; }
.ar-periods-sub { font-size: 0.7rem; color: #94a3b8; }
.ar-periods-list { flex: 1; overflow-y: auto; }
.ar-period-row {
  padding: 11px 15px; cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background .1s;
}
[data-bs-theme="dark"] .ar-period-row { border-bottom-color: #1e2d40; }
.ar-period-row:last-child { border-bottom: none; }
.ar-period-row:hover { background: #f8fafc; }
[data-bs-theme="dark"] .ar-period-row:hover { background: #1e2d40; }
.ar-period-row--active {
  background: #eff6ff !important;
  border-left: 3px solid #2563eb;
}
[data-bs-theme="dark"] .ar-period-row--active {
  background: rgba(37,99,235,.12) !important;
}
.ar-period-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.ar-period-name { font-size: 0.82rem; font-weight: 600; color: #1e293b; }
[data-bs-theme="dark"] .ar-period-name { color: #e2e8f0; }
.ar-period-cur-badge {
  font-size: 0.6rem; font-weight: 700; padding: 1px 7px; border-radius: 20px;
  background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe;
}
[data-bs-theme="dark"] .ar-period-cur-badge { background: rgba(37,99,235,.2); color: #93c5fd; border-color: rgba(37,99,235,.3); }
.ar-period-meta { font-size: 0.7rem; color: #94a3b8; margin-bottom: 6px; }
.ar-period-overdue { color: #dc2626; font-weight: 600; }
.ar-period-rate { color: #16a34a; font-weight: 500; }
.ar-period-bar-track {
  height: 4px; background: #e2e8f0; border-radius: 4px; overflow: hidden;
}
[data-bs-theme="dark"] .ar-period-bar-track { background: #263548; }
.ar-period-bar-fill {
  height: 100%; background: linear-gradient(90deg,#2563eb,#3b82f6);
  border-radius: 4px; transition: width .4s ease;
}
.ar-periods-empty { padding: 1.5rem; text-align: center; color: #94a3b8; font-size: 0.8rem; }
.ar-view-all-btn {
  margin: 10px 12px 12px; padding: 8px;
  border-radius: 8px; border: 1.5px dashed #cbd5e1;
  background: transparent; color: #64748b; font-size: 0.78rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: all .15s; font-weight: 500;
}
.ar-view-all-btn:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
[data-bs-theme="dark"] .ar-view-all-btn { border-color: #2d4059; color: #64748b; }
[data-bs-theme="dark"] .ar-view-all-btn:hover { border-color: #3b82f6; color: #3b82f6; background: rgba(37,99,235,.1); }

/* ── Table Panel ─────────────────────────────────────────────── */
.ar-table-panel {
  flex: 1; min-width: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  display: flex; flex-direction: column; overflow: hidden;
}
[data-bs-theme="dark"] .ar-table-panel {
  background: #1a2539; border-color: #263548;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.ar-table-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #e2e8f0;
  background: #f8fafc; flex-shrink: 0;
}
[data-bs-theme="dark"] .ar-table-hdr { background: #131e2e; border-bottom-color: #263548; }
.ar-table-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.85rem; font-weight: 700; color: #0f172a;
}
[data-bs-theme="dark"] .ar-table-title { color: #f1f5f9; }
.ar-table-title .ti { color: #2563eb; }
.ar-table-count { font-weight: 400; color: #94a3b8; font-size: 0.78rem; }
.ar-export-btn {
  height: 30px; padding: 0 12px; border-radius: 7px; font-size: 0.77rem; font-weight: 500;
  border: 1.5px solid #cbd5e1; background: #ffffff;
  color: #334155; cursor: pointer; display: flex; align-items: center; gap: 5px;
  transition: all .15s;
}
.ar-export-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #0f172a; }
[data-bs-theme="dark"] .ar-export-btn {
  background: #1a2539; border-color: #2d4059; color: #94a3b8;
}
[data-bs-theme="dark"] .ar-export-btn:hover { background: #263548; color: #e2e8f0; }

.ar-table-wrap { flex: 1; overflow: auto; }
.ar-table {
  width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.ar-table thead { position: sticky; top: 0; z-index: 2; }
.ar-table thead th {
  padding: 9px 13px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #64748b;
  background: #f8fafc; border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
[data-bs-theme="dark"] .ar-table thead th {
  background: #131e2e; border-bottom-color: #263548; color: #64748b;
}
.ar-table tbody tr { border-bottom: 1px solid #f1f5f9; transition: background .1s; }
[data-bs-theme="dark"] .ar-table tbody tr { border-bottom-color: #1e2d40; }
.ar-table tbody tr:last-child { border-bottom: none; }
.ar-table tbody tr:hover { background: #f8fafc; }
[data-bs-theme="dark"] .ar-table tbody tr:hover { background: #1e2d40; }
.ar-row--done   { background: rgba(16,185,129,.03) !important; }
[data-bs-theme="dark"] .ar-row--done { background: rgba(16,185,129,.06) !important; }
.ar-row--done:hover { background: rgba(16,185,129,.07) !important; }
.ar-row--overdue { background: rgba(239,68,68,.04) !important; }
[data-bs-theme="dark"] .ar-row--overdue { background: rgba(239,68,68,.08) !important; }
.ar-row--overdue:hover { background: rgba(239,68,68,.09) !important; }

.ar-table td { padding: 9px 13px; vertical-align: middle; }
.ar-th-key     { width: 96px; }
.ar-th-summary { min-width: 210px; }
.ar-th-priority{ width: 90px; }
.ar-th-assignee{ width: 140px; }
.ar-th-store   { width: 110px; }
.ar-th-status  { width: 114px; }
.ar-th-date    { width: 108px; }
.ar-th-actions { width: 40px; }

.ar-jira-link {
  font-family: ui-monospace, monospace; font-size: 0.78rem; font-weight: 700;
  color: #2563eb; text-decoration: none;
}
.ar-jira-link:hover { text-decoration: underline; color: #1d4ed8; }
.ar-no-val { color: #cbd5e1; font-size: 0.78rem; }
[data-bs-theme="dark"] .ar-no-val { color: #334155; }

.ar-summary-text { display: block; color: #1e293b; line-height: 1.4; font-size: 0.82rem; }
[data-bs-theme="dark"] .ar-summary-text { color: #e2e8f0; }
.ar-overdue-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.62rem; font-weight: 700; color: #dc2626;
  background: #fef2f2; border: 1px solid #fecaca;
  padding: 1px 6px; border-radius: 10px; margin-top: 3px;
}
.ar-pri { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; }
.ar-pri--critical { color: #dc2626; }
.ar-pri--high     { color: #d97706; }
.ar-pri--medium   { color: #2563eb; }
.ar-pri--low      { color: #94a3b8; }
.ar-assignee-cell { display: flex; align-items: center; gap: 7px; }
.ar-assignee-name { font-size: 0.8rem; color: #334155; }
[data-bs-theme="dark"] .ar-assignee-name { color: #cbd5e1; }
.ar-av {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: #2E75B6; color: #fff; font-size: 0.58rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ar-store-tag {
  display: inline-block; font-size: 0.71rem; font-weight: 500;
  padding: 2px 8px; border-radius: 5px;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  color: #475569;
}
[data-bs-theme="dark"] .ar-store-tag { background: #1e2d40; border-color: #263548; color: #94a3b8; }

/* Status badges */
.ar-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.71rem; font-weight: 600; padding: 3px 9px;
  border-radius: 20px; white-space: nowrap; border: 1px solid transparent;
}
.ar-badge--open     { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ar-badge--progress { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.ar-badge--reopened { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.ar-badge--review   { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.ar-badge--done     { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.ar-badge--blocked  { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

.ar-date-cell { display: flex; flex-direction: column; gap: 1px; }
.ar-date-main { font-size: 0.78rem; color: #334155; }
[data-bs-theme="dark"] .ar-date-main { color: #94a3b8; }
.ar-date-time { font-size: 0.66rem; color: #94a3b8; }

.ar-action-btn {
  width: 28px; height: 28px; border: none; background: transparent; cursor: pointer;
  border-radius: 6px; color: #94a3b8; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.ar-action-btn:hover { background: #eff6ff; color: #2563eb; }

.ar-empty-row, .ar-loading {
  text-align: center; padding: 3rem; color: #94a3b8; font-size: 0.83rem;
}

/* ── Pagination ──────────────────────────────────────────────── */
.ar-pagination {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-top: 1px solid #e2e8f0;
  background: #f8fafc; font-size: 0.78rem; flex-shrink: 0; flex-wrap: wrap;
}
[data-bs-theme="dark"] .ar-pagination { background: #131e2e; border-top-color: #263548; }
.ar-page-info { color: #64748b; flex: 1; }
.ar-page-btns { display: flex; align-items: center; gap: 3px; }
.ar-page-btn {
  min-width: 28px; height: 28px; padding: 0 7px;
  border: 1px solid #e2e8f0; border-radius: 6px;
  background: #fff; color: #475569; font-size: 0.78rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .12s; font-weight: 500;
}
.ar-page-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; color: #1e293b; }
.ar-page-btn--active {
  background: #2563eb !important; color: #fff !important;
  border-color: #2563eb !important; box-shadow: 0 1px 3px rgba(37,99,235,.35);
}
.ar-page-btn:disabled { opacity: .4; cursor: default; }
.ar-page-ellipsis { color: #94a3b8; padding: 0 3px; }
.ar-page-size-wrap { display: flex; align-items: center; gap: 6px; color: #64748b; }
.ar-page-size-sel {
  height: 28px; padding: 0 6px; border-radius: 6px; font-size: 0.78rem;
  border: 1px solid #e2e8f0; background: #fff; color: #334155;
}
[data-bs-theme="dark"] .ar-page-btn { background: #1a2539; border-color: #263548; color: #94a3b8; }
[data-bs-theme="dark"] .ar-page-btn:hover:not(:disabled) { background: #1e2d40; color: #e2e8f0; }
[data-bs-theme="dark"] .ar-page-size-sel { background: #1a2539; border-color: #263548; color: #94a3b8; }

/* ══════════════════════════════════════════════════════════════
   INDIVIDUAL AUDIT REPORT — ai-* components
   ══════════════════════════════════════════════════════════════ */

.ai-layout {
  display: flex; gap: 14px;
  height: calc(100vh - 380px); min-height: 420px;
}

/* ── Members Panel ───────────────────────────────────────────── */
.ai-members-panel {
  width: 288px; flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  display: flex; flex-direction: column; overflow: hidden;
}
[data-bs-theme="dark"] .ai-members-panel {
  background: #1a2539; border-color: #263548;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.ai-members-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 15px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
}
[data-bs-theme="dark"] .ai-members-hdr { background: #131e2e; border-bottom-color: #263548; }
.ai-members-title {
  font-size: 0.82rem; font-weight: 700; color: #0f172a;
  display: flex; align-items: center; gap: 6px;
}
[data-bs-theme="dark"] .ai-members-title { color: #f1f5f9; }
.ai-members-title .ti { color: #2563eb; }
.ai-members-count { font-size: 0.72rem; color: #94a3b8; }
.ai-members-list { flex: 1; overflow-y: auto; }
.ai-members-empty { padding: 1.5rem; text-align: center; color: #94a3b8; font-size: 0.8rem; }

.ai-member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background .1s;
}
[data-bs-theme="dark"] .ai-member-row { border-bottom-color: #1e2d40; }
.ai-member-row:last-child { border-bottom: none; }
.ai-member-row:hover { background: #f8fafc; }
[data-bs-theme="dark"] .ai-member-row:hover { background: #1e2d40; }
.ai-member-row--active {
  background: #eff6ff !important;
  border-left: 3px solid #2563eb;
}
[data-bs-theme="dark"] .ai-member-row--active { background: rgba(37,99,235,.12) !important; }
.ai-member-av-wrap { flex-shrink: 0; }
.ai-av {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.ai-member-info { flex: 1; min-width: 0; }
.ai-member-name {
  font-size: 0.82rem; font-weight: 600; color: #1e293b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-bs-theme="dark"] .ai-member-name { color: #e2e8f0; }
.ai-member-role { font-size: 0.7rem; color: #94a3b8; margin-top: 1px; }
.ai-member-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.ai-stat-num { font-size: 0.82rem; font-weight: 700; color: #334155; line-height: 1.2; }
[data-bs-theme="dark"] .ai-stat-num { color: #cbd5e1; }
.ai-stat-num--red { color: #dc2626 !important; }
.ai-stat-lbl { font-size: 0.63rem; color: #94a3b8; }
.ai-stat-lbl--red { color: #dc2626 !important; }
.ai-member-arrow { font-size: 0.72rem; color: #cbd5e1; flex-shrink: 0; }

/* ── Member Dashboard Panel ──────────────────────────────────── */
.ai-dash-panel {
  flex: 1; min-width: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  display: flex; flex-direction: column; overflow: hidden;
}
[data-bs-theme="dark"] .ai-dash-panel {
  background: #1a2539; border-color: #263548;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.ai-dash-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: #94a3b8; font-size: 0.83rem;
}
.ai-dash-empty .ti { font-size: 2.5rem; opacity: .2; }
#ai-dash-content { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* Member header */
.ai-member-hdr {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 16px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
}
[data-bs-theme="dark"] .ai-member-hdr { background: #131e2e; border-bottom-color: #263548; }
.ai-hdr-identity { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ai-hdr-av-wrap { flex-shrink: 0; }
.ai-hdr-av {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700; color: #fff;
}
.ai-hdr-name { font-size: 1rem; font-weight: 700; color: #0f172a; }
[data-bs-theme="dark"] .ai-hdr-name { color: #f1f5f9; }
.ai-hdr-role { font-size: 0.75rem; color: #64748b; margin-top: 2px; }

.ai-hdr-stats {
  display: flex; align-items: stretch; flex: 1;
  justify-content: flex-end; flex-wrap: wrap;
}
.ai-hdr-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 0 18px; border-right: 1px solid #e2e8f0;
}
[data-bs-theme="dark"] .ai-hdr-stat { border-right-color: #263548; }
.ai-hdr-stat:last-child { border-right: none; }
.ai-hdr-stat-val { font-size: 1.3rem; font-weight: 800; color: #0f172a; line-height: 1; }
[data-bs-theme="dark"] .ai-hdr-stat-val { color: #f1f5f9; }
.ai-hdr-stat--blue  .ai-hdr-stat-val { color: #2563eb; }
.ai-hdr-stat--amber .ai-hdr-stat-val { color: #d97706; }
.ai-hdr-stat--green .ai-hdr-stat-val { color: #16a34a; }
.ai-hdr-stat--red   .ai-hdr-stat-val { color: #dc2626; }
.ai-hdr-stat-lbl {
  font-size: 0.64rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #94a3b8;
  display: flex; align-items: center; gap: 4px;
}
.ai-hdr-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ai-hdr-stat--rate { border-right: none; }
.ai-hdr-rate-wrap {
  position: relative; display: flex; align-items: center;
  justify-content: center; width: 46px; height: 46px;
}
.ai-hdr-ring { width: 46px; height: 46px; position: absolute; inset: 0; }
.ai-hdr-rate-val {
  position: absolute; font-size: 0.62rem; font-weight: 800; color: #7c3aed; z-index: 1;
}
.ai-hdr-rate-trend { font-size: 0.63rem; color: #94a3b8; margin-top: 2px; }

/* Tabs */
.ai-tabs {
  display: flex; align-items: center; gap: 0;
  padding: 0 16px; border-bottom: 1px solid #e2e8f0;
  background: #fff; flex-shrink: 0;
}
[data-bs-theme="dark"] .ai-tabs { background: #1a2539; border-bottom-color: #263548; }
.ai-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 14px; font-size: 0.8rem; font-weight: 600;
  color: #94a3b8; border: none; background: none;
  border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.ai-tab:hover { color: #475569; }
[data-bs-theme="dark"] .ai-tab:hover { color: #cbd5e1; }
.ai-tab.active { color: #2563eb; border-bottom-color: #2563eb; }
.ai-tabs-export { margin-left: auto; padding: 7px 0; }

/* Table wrapper inside individual panel */
.ai-table-wrap {
  flex: 1; overflow: auto;
  max-height: calc(100vh - 560px);
}

/* Due date */
.ai-due-date { font-size: 0.78rem; color: #475569; font-weight: 500; }
[data-bs-theme="dark"] .ai-due-date { color: #94a3b8; }
.ai-due--overdue { color: #dc2626 !important; font-weight: 700; }
.ai-due--soon    { color: #d97706 !important; font-weight: 700; }

/* Timeline */
.ai-timeline {
  padding: 16px 20px; overflow-y: auto;
  max-height: calc(100vh - 540px);
}
.ai-tl-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 3rem; color: #94a3b8; font-size: 0.83rem;
}
.ai-tl-group { margin-bottom: 20px; }
.ai-tl-date {
  font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: #94a3b8; margin-bottom: 10px; padding-bottom: 7px;
  border-bottom: 1px solid #f1f5f9;
}
[data-bs-theme="dark"] .ai-tl-date { border-bottom-color: #1e2d40; }
.ai-tl-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 8px 0; border-bottom: 1px solid #f8fafc;
}
[data-bs-theme="dark"] .ai-tl-item { border-bottom-color: #1e2d40; }
.ai-tl-item:last-child { border-bottom: none; }
.ai-tl-dot {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.ai-tl-body { flex: 1; min-width: 0; }
.ai-tl-title { font-size: 0.8rem; color: #1e293b; margin-bottom: 5px; line-height: 1.4; }
[data-bs-theme="dark"] .ai-tl-title { color: #e2e8f0; }
.ai-tl-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ai-tl-time { font-size: 0.67rem; color: #94a3b8; flex-shrink: 0; margin-top: 3px; }

/* KPI row inside individual panel uses same ar-kpi-* classes */
#ai-kpi-row { margin-bottom: 14px; }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD AI SUMMARY — enhanced date / quote / health strip
   ══════════════════════════════════════════════════════════════ */

/* ── Top strip ───────────────────────────────────────────────── */
.ob-topstrip {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px;
  background: #ffffff;
  border-bottom: 1.5px solid #e2e8f0;
  border-radius: 12px 12px 0 0;
}
[data-bs-theme="dark"] .ob-topstrip {
  background: #131e2e; border-bottom-color: #1e2d40;
}

/* Calendar widget */
.ob-date-block { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ob-date-cal {
  width: 44px; height: 44px; border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .ob-date-cal { border-color: #263548; }
.ob-date-cal-month {
  width: 100%; background: #2563eb; color: #fff;
  font-size: 0.55rem; font-weight: 800; letter-spacing: .08em;
  text-align: center; padding: 2px 0; line-height: 1.1;
}
.ob-date-cal-day {
  font-size: 1.1rem; font-weight: 800; color: #1e293b; line-height: 1.3;
}
[data-bs-theme="dark"] .ob-date-cal-day { color: #f1f5f9; }
.ob-date-info { display: flex; flex-direction: column; gap: 2px; }
.ob-date-full { font-size: 0.85rem; font-weight: 700; color: #1e293b; }
[data-bs-theme="dark"] .ob-date-full { color: #f1f5f9; }
.ob-date-time {
  font-size: 0.72rem; color: #64748b;
  display: flex; align-items: center; gap: 4px;
}
.ob-date-time .ti { font-size: 0.72rem; }

/* Quote widget */
.ob-quote-block {
  flex: 1; display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 16px; background: #f8fafc; border-radius: 8px;
  border: 1px solid #e2e8f0; min-width: 200px;
}
[data-bs-theme="dark"] .ob-quote-block { background: #1a2539; border-color: #263548; }
.ob-quote-icon { font-size: 1.2rem; color: #7c3aed; opacity: .7; flex-shrink: 0; margin-top: 1px; }
.ob-quote-body { min-width: 0; }
.ob-quote-text {
  font-size: 0.78rem; font-style: italic; color: #334155; line-height: 1.4;
}
[data-bs-theme="dark"] .ob-quote-text { color: #cbd5e1; }
.ob-quote-author { font-size: 0.68rem; font-weight: 600; color: #64748b; margin-top: 3px; }

/* Board health ring */
.ob-health-block {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 6px 14px 6px 10px; border-radius: 10px;
  border: 1.5px solid #e2e8f0; background: #ffffff;
}
[data-bs-theme="dark"] .ob-health-block { background: #1a2539; border-color: #263548; }
.ob-health-ring-wrap { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.ob-health-ring { width: 44px; height: 44px; }
.ob-health-pct {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 0.65rem; font-weight: 800;
}
.ob-health-info { display: flex; flex-direction: column; gap: 2px; }
.ob-health-label { font-size: 0.78rem; font-weight: 700; }
.ob-health-sub { font-size: 0.67rem; color: #64748b; }

/* ── AI badge pulse ──────────────────────────────────────────── */
.ob-ai-badge {
  display: inline-flex; align-items: center; gap: 6px;
  position: relative;
}
.ob-ai-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #10b981;
  flex-shrink: 0; animation: ob-pulse 2s ease-in-out infinite;
}
@keyframes ob-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

/* ── Stat icon wrapper ───────────────────────────────────────── */
.ob-stat-icon-wrap {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; margin-bottom: 6px;
}

/* ── Panel count badge ───────────────────────────────────────── */
.ob-panel-count {
  margin-left: auto; font-size: 0.68rem; font-weight: 700;
  padding: 1px 7px; border-radius: 10px;
  background: #dcfce7; color: #15803d;
}
.ob-panel-count--red { background: #fee2e2; color: #dc2626; }
.ob-panel-count:empty { display: none; }

/* Adjust ob-shell to remove old border-radius on hero top */
.ob-shell { border-radius: 12px; overflow: hidden; }
.ob-hero { border-radius: 0; }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD HEADER REDESIGN — dh-* components
   ══════════════════════════════════════════════════════════════ */

/* ── Page header ─────────────────────────────────────────────── */
.dh-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.dh-greeting {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em;
  color: #0f172a; line-height: 1.2;
}
[data-bs-theme="dark"] .dh-greeting { color: #f1f5f9; }
.dh-sub { font-size: 0.83rem; color: #64748b; margin-top: 2px; }
.dh-header-right { display: flex; align-items: center; gap: 10px; }
.dh-updated { font-size: 0.75rem; color: #94a3b8; display: flex; align-items: center; gap: 5px; }
.dh-updated .ti { font-size: 0.72rem; }
.dh-refresh-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 12px; border-radius: 7px;
  border: 1.5px solid #e2e8f0; background: #fff;
  font-size: 0.75rem; font-weight: 600; color: #475569; cursor: pointer;
  transition: all .15s;
}
.dh-refresh-btn:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
[data-bs-theme="dark"] .dh-refresh-btn { background: #1e2a3a; border-color: #2d4059; color: #94a3b8; }

/* ── Status pills row ────────────────────────────────────────── */
.dh-pills-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.dh-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.dh-pill .ti { font-size: 0.72rem; }

/* ── AI Summary gradient card ────────────────────────────────── */
/* ── AI Executive Summary card ───────────────────────────────── */
.dh-ai-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  background: #ffffff;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  border-left: 4px solid #7c3aed;
  padding: 20px 24px 20px 22px;
  position: relative;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  min-height: 0;
}
[data-bs-theme="dark"] .dh-ai-card {
  background: #1a2539;
  border-color: #263548;
  border-left-color: #7c3aed;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* Left: title + bullets + actions */
.dh-ai-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dh-ai-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #7c3aed;
}
.dh-ai-title .ti { font-size: 0.78rem; color: #7c3aed; }
[data-bs-theme="dark"] .dh-ai-title { color: #a78bfa; }
[data-bs-theme="dark"] .dh-ai-title .ti { color: #a78bfa; }

/* Bullets: 2-column grid */
.dh-ai-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}
.dh-ai-bullet {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 0.8rem; color: #334155; line-height: 1.45;
}
[data-bs-theme="dark"] .dh-ai-bullet { color: #cbd5e1; }
.dh-ai-bullet .ti {
  font-size: 0.62rem; color: #16a34a; flex-shrink: 0; margin-top: 3px;
  background: #dcfce7; border-radius: 50%;
  width: 15px; height: 15px; display: flex; align-items: center; justify-content: center;
}
[data-bs-theme="dark"] .dh-ai-bullet .ti { background: rgba(22,163,74,.2); }

/* Action buttons */
.dh-ai-actions {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px;
}
.dh-ai-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px; border-radius: 6px;
  font-size: 0.71rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc; color: #475569;
  transition: all .15s;
}
.dh-ai-btn .ti { font-size: 0.7rem; }
.dh-ai-btn:hover { border-color: #7c3aed; color: #7c3aed; background: #f5f3ff; }
[data-bs-theme="dark"] .dh-ai-btn { background: #1e2d40; border-color: #263548; color: #94a3b8; }
[data-bs-theme="dark"] .dh-ai-btn:hover { border-color: #7c3aed; color: #a78bfa; background: rgba(124,58,237,.1); }
.dh-ai-btn--primary {
  background: #7c3aed; color: #fff;
  border-color: #7c3aed; box-shadow: 0 1px 4px rgba(124,58,237,.3);
}
.dh-ai-btn--primary:hover { background: #6d28d9; border-color: #6d28d9; color: #fff; }

/* Board health panel */
.dh-ai-health {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: #f8fafc; border: 1.5px solid #e2e8f0;
  border-radius: 10px; padding: 14px 20px;
  min-width: 130px; flex-shrink: 0;
}
[data-bs-theme="dark"] .dh-ai-health { background: #131e2e; border-color: #263548; }
.dh-ai-health-title {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #64748b;
}
[data-bs-theme="dark"] .dh-ai-health-title { color: #64748b; }
.dh-ai-health-ring {
  position: relative; width: 80px; height: 80px; margin: 4px 0;
}
.dh-ai-health-ring svg { width: 80px; height: 80px; }
.dh-ai-health-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 900;
}
.dh-ai-health-label { font-size: 0.78rem; font-weight: 700; }
.dh-ai-health-sub { font-size: 0.62rem; color: #94a3b8; }

/* ── KPI cards below AI card ─────────────────────────────────── */
.ob-stats--cards {
  display: grid !important;
  grid-template-columns: repeat(5,1fr);
  gap: 10px; margin-bottom: 0;
}
.ob-stats--cards .ob-stat {
  border-right: none !important;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  padding: 14px 14px 12px;
  background: #ffffff !important;
}
[data-bs-theme="dark"] .ob-stats--cards .ob-stat {
  background: #1a2535 !important; border-color: #263548;
}
.ob-stats--cards .ob-stat:hover { background: #fafbff !important; box-shadow: 0 3px 10px rgba(0,0,0,.08); transform: translateY(-1px); }
[data-bs-theme="dark"] .ob-stats--cards .ob-stat:hover { background: #1e2d40 !important; }

/* (dh-ai-card light/dark overrides now consolidated in base styles above) */

/* ═══════════════════════════════════════════════════════════════
   STATUS LOG — actions button + popover
═══════════════════════════════════════════════════════════════ */

/* Actions cell: log button + menu side by side */
.brd-actions-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
}

/* View-only badge for restricted task rows */
.brd-readonly-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  color: #94a3b8; font-size: 0.85rem; flex-shrink: 0;
}

/* History / Status Log icon button */
.brd-log-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.brd-log-btn:hover {
  background: #f1f5f9;
  color: #3b82f6;
}
[data-bs-theme="dark"] .brd-log-btn:hover {
  background: #1e293b;
  color: #60a5fa;
}

/* Popover card */
.sl-popover {
  width: 360px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
}
[data-bs-theme="dark"] .sl-popover {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.sl-pop-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
}
[data-bs-theme="dark"] .sl-pop-hdr {
  background: #0f172a;
  border-color: #1e293b;
  color: #e2e8f0;
}
.sl-pop-hdr i { color: #3b82f6; }
.sl-pop-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 0.8rem;
  padding: 0 2px;
  line-height: 1;
}
.sl-pop-close:hover { color: #475569; }

.sl-pop-body { padding: 10px 12px; max-height: 240px; overflow-y: auto; }
.sl-loading { font-size: 0.78rem; color: #94a3b8; font-style: italic; }

/* Current status row — clean, no color on text */
.sl-current {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}
[data-bs-theme="dark"] .sl-current { border-color: #263548; }
.sl-current-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sl-current-status {
  font-size: 0.8rem; font-weight: 600;
  color: #1e293b;
}
[data-bs-theme="dark"] .sl-current-status { color: #e2e8f0; }
.sl-current-age {
  font-size: 0.68rem; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
}
.sl-age--green { background:#f0fdf4; color:#15803d; }
.sl-age--amber { background:#fffbeb; color:#92400e; }
.sl-age--red   { background:#fff1f2; color:#be123c; }
[data-bs-theme="dark"] .sl-age--green { background:#14532d30; color:#86efac; }
[data-bs-theme="dark"] .sl-age--amber { background:#3d280010; color:#fde68a; }
[data-bs-theme="dark"] .sl-age--red   { background:#4c050520; color:#fda4af; }

/* Log entries */
.sl-entries { display: flex; flex-direction: column; }
.sl-entry {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid #f8fafc;
}
.sl-entry:last-child { border-bottom: none; }
[data-bs-theme="dark"] .sl-entry { border-color: #1e293b; }

.sl-entry-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; margin-top: 5px;
}
.sl-entry-dot--created { background: #cbd5e1; }

.sl-entry-detail { flex: 1; min-width: 0; }
.sl-entry-label {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.77rem; font-weight: 500;
  color: #334155; margin-bottom: 2px;
}
[data-bs-theme="dark"] .sl-entry-label { color: #cbd5e1; }
.sl-from { color: #64748b; }
[data-bs-theme="dark"] .sl-from { color: #94a3b8; }
.sl-to   { color: #1e293b; font-weight: 600; }
[data-bs-theme="dark"] .sl-to { color: #f1f5f9; }
.sl-arrow { font-size: 0.6rem; color: #cbd5e1; flex-shrink: 0; }

.sl-entry-meta {
  font-size: 0.68rem; color: #94a3b8;
  display: flex; flex-wrap: wrap; gap: 2px;
}
.sl-held { color: #94a3b8; }

.sl-no-history {
  font-size: 0.74rem; color: #94a3b8;
  font-style: italic; line-height: 1.5;
  padding: 8px 0;
}

/* ═══════════════════════════════════════════════════════════════
   STATUS TIMELINE (modal)
═══════════════════════════════════════════════════════════════ */
.tsh-body { padding: 4px 0 8px; }
.tsh-loading, .tsh-empty {
  font-size: 0.8rem; color: #94a3b8;
  padding: 12px 2px; font-style: italic;
}
.tsh-timeline { display: flex; flex-direction: column; gap: 0; }
.tsh-entry { display: flex; gap: 12px; }
.tsh-line-wrap {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; width: 24px;
}
.tsh-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1;
}
.tsh-connector { flex: 1; width: 2px; background: #e2e8f0; min-height: 18px; }
[data-bs-theme="dark"] .tsh-connector { background: #334155; }
.tsh-content { padding: 1px 0 18px; flex: 1; }
.tsh-row1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.tsh-from { font-size: 0.78rem; color: #64748b; font-weight: 500; }
.tsh-arrow { font-size: 0.7rem; color: #94a3b8; }
.tsh-to { font-size: 0.82rem; font-weight: 700; }
.tsh-row2 { font-size: 0.72rem; color: #94a3b8; display: flex; align-items: center; gap: 4px; }
.tsh-sep { color: #cbd5e1; }
.tsh-dur { font-weight: 500; }
.tsh-current-badge {
  font-size: 0.72rem; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  background: #f1f5f9; margin-left: 8px;
}
[data-bs-theme="dark"] .tsh-current-badge { background: #1e293b; }
[data-bs-theme="dark"] .tsh-from { color: #94a3b8; }

/* ═══════════════════════════════════════════════════════════════
   TASK COMMENTS / DISCUSSION
═══════════════════════════════════════════════════════════════ */
.tsc-body { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; min-height: 20px; }
.tsc-loading, .tsc-empty {
  font-size: 0.8rem; color: #94a3b8; font-style: italic; padding: 4px 0;
}
.tsc-count {
  font-size: 0.68rem; font-weight: 700;
  background: #3b82f6; color: #fff;
  padding: 1px 6px; border-radius: 10px; margin-left: 6px;
}
.tsc-comment { display: flex; gap: 10px; }
.tsc-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 0.68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0; margin-top: 2px;
}
.tsc-comment-body { flex: 1; min-width: 0; }
.tsc-comment-hdr {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.tsc-author { font-size: 0.78rem; font-weight: 700; color: #1e293b; }
[data-bs-theme="dark"] .tsc-author { color: #e2e8f0; }
.tsc-time { font-size: 0.7rem; color: #94a3b8; flex: 1; }
.tsc-delete-btn {
  background: none; border: none; padding: 0 2px;
  color: #cbd5e1; cursor: pointer; font-size: 0.75rem;
  opacity: 0; transition: opacity 0.15s;
}
.tsc-comment:hover .tsc-delete-btn { opacity: 1; }
.tsc-delete-btn:hover { color: #dc2626; }
.tsc-comment-text {
  font-size: 0.8rem; color: #374151; line-height: 1.5;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 6px; padding: 8px 10px;
}
[data-bs-theme="dark"] .tsc-comment-text { background: #1e293b; border-color: #334155; color: #cbd5e1; }

/* Compose area */
.tsc-compose { display: flex; gap: 10px; margin-top: 4px; }
.tsc-compose-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 0.68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0; margin-top: 2px;
  background: #3b82f6;
}
.tsc-compose-right { flex: 1; }
.tsc-textarea {
  width: 100%; font-size: 0.82rem;
  border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 8px 10px; resize: none; line-height: 1.5;
  color: #1e293b; background: #fff;
  transition: border-color 0.15s;
  font-family: inherit;
}
.tsc-textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px #3b82f620; }
[data-bs-theme="dark"] .tsc-textarea { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-bs-theme="dark"] .tsc-textarea:focus { border-color: #3b82f6; }
.tsc-compose-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
}
.tsc-hint { font-size: 0.68rem; color: #94a3b8; }
.tsc-post-btn {
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px;
  background: #3b82f6; color: #fff; border: none; border-radius: 6px;
  cursor: pointer; transition: background 0.15s;
}
.tsc-post-btn:hover { background: #2563eb; }

/* ═══════════════════════════════════════════════════════════════
   REOPEN PATTERN PANEL  v2
═══════════════════════════════════════════════════════════════ */
.brd-pill-red { background: #fee2e2; color: #991b1b; }
[data-bs-theme="dark"] .brd-pill-red { background: #7f1d1d; color: #fecaca; }
.brd-hdr-hint { font-size: 0.72rem; color: #94a3b8; font-weight: 400; }
.brd-status-chip {
  display: inline-block; font-size: 0.68rem; font-weight: 600;
  padding: 2px 9px; border-radius: 10px; border: 1px solid;
  white-space: nowrap;
}

/* Card accent */
#reopen-pattern-card {
  border-left: 3px solid #dc2626 !important;
}
[data-bs-theme="dark"] #reopen-pattern-card { border-left-color: #f87171 !important; }

/* Table rows */
.rop-row { transition: background 0.1s; cursor: pointer; }
.rop-row:hover { background: #fef2f2 !important; }
[data-bs-theme="dark"] .rop-row:hover { background: rgba(239,68,68,0.07) !important; }

/* Reopens count column */
.rop-col-count { text-align: center; width: 100px; }
.rop-badge-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Count badge — severity tiers */
.rop-badge {
  display: inline-block; font-size: 0.72rem; font-weight: 800;
  padding: 2px 9px; border-radius: 20px; letter-spacing: 0.02em;
  border: 1px solid transparent; line-height: 1.5;
}
.rop-badge--low  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.rop-badge--mid  { background: #fecaca; color: #7f1d1d; border-color: #f87171; }
.rop-badge--high { background: #dc2626; color: #fff;    border-color: #b91c1c; }
[data-bs-theme="dark"] .rop-badge--low  { background: rgba(220,38,38,0.15); color: #fca5a5; border-color: rgba(220,38,38,0.3); }
[data-bs-theme="dark"] .rop-badge--mid  { background: rgba(220,38,38,0.25); color: #fca5a5; border-color: rgba(220,38,38,0.4); }
[data-bs-theme="dark"] .rop-badge--high { background: #dc2626; color: #fff;    border-color: #ef4444; }

/* Pip dots below badge */
.rop-pip-row { display: flex; gap: 3px; align-items: center; }
.rop-pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fca5a5;
}
.rop-pip--first { background: #dc2626; }
[data-bs-theme="dark"] .rop-pip { background: #7f1d1d; }
[data-bs-theme="dark"] .rop-pip--first { background: #f87171; }

/* Legacy — kept for safety */
.rop-count-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rop-count { font-size: 1rem; font-weight: 800; color: #dc2626; line-height: 1; }
.rop-dots { font-size: 0.5rem; color: #fca5a5; letter-spacing: 1px; }
[data-bs-theme="dark"] .rop-count { color: #f87171; }
[data-bs-theme="dark"] .rop-dots  { color: #7f1d1d; }

/* ═══════════════════════════════════════════════════════════════
   LEAVE CONFLICT BANNER
═══════════════════════════════════════════════════════════════ */
.brd-conflict-banner {
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 8px; margin-bottom: 10px;
  padding: 0;
}
[data-bs-theme="dark"] .brd-conflict-banner { background: #1c1a0a; border-color: #713f12; }
.brd-conflict-inner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
}
.brd-conflict-ico { color: #f59e0b; font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.brd-conflict-items { flex: 1; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.brd-conflict-item { display: flex; align-items: center; gap: 6px; }
.brd-conflict-name { font-size: 0.78rem; font-weight: 700; color: #1e293b; }
[data-bs-theme="dark"] .brd-conflict-name { color: #e2e8f0; }
.brd-conflict-tag {
  font-size: 0.68rem; font-weight: 600;
  background: #fef9c3; color: #713f12;
  padding: 1px 6px; border-radius: 10px;
}
.brd-conflict-tag--today { background: #fde68a; color: #92400e; }
[data-bs-theme="dark"] .brd-conflict-tag { background: #292106; color: #fde68a; }
[data-bs-theme="dark"] .brd-conflict-tag--today { background: #3d2a00; color: #fbbf24; }
.brd-conflict-tasks { font-size: 0.72rem; color: #92400e; font-weight: 500; }
[data-bs-theme="dark"] .brd-conflict-tasks { color: #fbbf24; }
.brd-conflict-close {
  background: none; border: none; padding: 2px 4px;
  color: #94a3b8; cursor: pointer; font-size: 0.85rem;
  flex-shrink: 0; margin-left: auto;
}
.brd-conflict-close:hover { color: #475569; }

/* Reopen source tags — kept for backward compat, hidden in new render */
.rop-src-tag { display: none; }

/* ══════════════════════════════════════════════
   LOGIN OVERLAY — Premium SaaS design (Linear/Stripe/Vercel style)
   ══════════════════════════════════════════════ */

#faya-login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #F8FAFC;
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  transition: opacity 0.2s ease;
}
#faya-login-overlay.faya-hidden { opacity: 0; pointer-events: none; }

/* ── Isometric watermark — absolute, covers full bg ── */
.fl-watermark {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fl-wm-svg {
  width: 100%; height: 100%;
  opacity: 0.21;
}

/* Main wrapper */
.fl-wrapper {
  position: relative; z-index: 1;
  display: flex; flex: 1; min-height: 0; overflow: hidden;
}

/* ══════════════════════
   LEFT HERO
   ══════════════════════ */
.fl-hero {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: 2rem 3rem 0 3rem;
  overflow: hidden;
  position: relative;
}

/* Brand */
.fl-hero-brand {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0; margin-bottom: 0;
  position: relative; z-index: 2;
}
.fl-hero-logo-wrap {
  width: 44px; height: 44px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(15,23,42,0.08); overflow: hidden; flex-shrink: 0;
}
.fl-hero-logo-wrap img { width: 32px; height: 32px; object-fit: contain; }
.fl-hero-brand-name {
  font-size: 1rem; font-weight: 700; color: #0F172A;
  letter-spacing: -0.02em; line-height: 1.2;
}
.fl-hero-brand-name span { color: #2563EB; }
.fl-hero-brand-sub { font-size: 0.72rem; color: #94a3b8; margin-top: 1px; }

/* Body */
.fl-hero-body {
  flex: 1; min-height: 0;
  display: flex; align-items: center;
  position: relative; z-index: 2;
}

.fl-hero-text {
  max-width: 520px;
  display: flex; flex-direction: column; gap: 0;
}

/* Eyebrow label */
.fl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 600; color: #2563EB;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 1.1rem;
}
.fl-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2563EB; flex-shrink: 0;
}

/* Headline — 56–64px spec */
.fl-hero-headline {
  font-size: clamp(2.4rem, 3.8vw, 3.6rem);
  font-weight: 800; color: #0F172A;
  line-height: 1.1; letter-spacing: -0.04em;
  margin: 0 0 1.1rem;
}

/* Description — 16–18px spec */
.fl-hero-desc {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: #64748B; line-height: 1.75;
  margin-bottom: 1.8rem; max-width: 460px;
}

/* Value points */
.fl-vps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 2rem; }
.fl-vp {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.9rem; color: #334155; line-height: 1.5;
}
.fl-vp-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: #EFF6FF; border: 1.5px solid #BFDBFE;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}

/* Metrics */
.fl-metrics {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 1.4rem;
}
.fl-metric { text-align: left; padding: 0 1.5rem 0 0; }
.fl-metric:first-child { padding-left: 0; }
.fl-metric-num {
  font-size: 1.65rem; font-weight: 800; color: #0F172A;
  line-height: 1; letter-spacing: -0.03em;
}
.fl-metric-num span { color: #2563EB; }
.fl-metric-label { font-size: 0.72rem; color: #94a3b8; font-weight: 500; margin-top: 2px; }
.fl-metric-sep {
  width: 1px; height: 32px; background: #e2e8f0; margin-right: 1.5rem;
}

/* Trust indicators */
.fl-trust {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.77rem; color: #94a3b8;
}

/* Icon color helpers (kept for bottom bar) */
.fl-ico--blue   { background: #dbeafe; color: #2563eb; }
.fl-ico--purple { background: #ede9fe; color: #7c3aed; }
.fl-ico--green  { background: #dcfce7; color: #16a34a; }
.fl-ico--orange { background: #ffedd5; color: #ea580c; }

/* ══════════════════════
   RIGHT LOGIN PANEL — glassmorphism card
   ══════════════════════ */
.fl-panel {
  width: 460px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem 2rem;
  position: relative; z-index: 3;
}

/* Glassmorphism card */
.fl-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.6) inset,
    0 24px 64px rgba(15,23,42,0.12),
    0 4px 16px rgba(15,23,42,0.06);
  overflow: hidden;
}

/* Card header */
.fl-card-header {
  display: flex; align-items: center; gap: 12px;
  padding: 1.6rem 2rem 1.2rem;
}
.fl-card-logo-wrap {
  width: 46px; height: 46px; background: #F8FAFC;
  border: 1px solid #E2E8F0; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.fl-card-logo-wrap img { width: 34px; height: 34px; object-fit: contain; }
.fl-card-brand-name {
  font-size: 1rem; font-weight: 700; color: #0F172A; letter-spacing: -0.02em;
}
.fl-card-brand-name span { color: #2563EB; }
.fl-card-brand-sub { font-size: 0.7rem; color: #94a3b8; margin-top: 1px; }

.fl-card-divider { height: 1px; background: #F1F5F9; }

/* Card body */
.fl-card-body { padding: 1.6rem 2rem 1.4rem; }

/* "Welcome back" headline + subtitle */
.fl-card-headline {
  font-size: 1.35rem; font-weight: 800; color: #0F172A;
  letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 3px;
}
.fl-card-title {
  font-size: 0.82rem; color: #64748B; font-weight: 400;
  margin-bottom: 1.5rem;
}

/* Fields — 52–56px height */
.faya-login-field { margin-bottom: 1.1rem; }
.faya-login-field label {
  display: block; font-size: 0.8rem; font-weight: 600;
  color: #374151; margin-bottom: 0.4rem; letter-spacing: 0.01em;
}
.fl-input-wrap { position: relative; }
.fl-input-wrap input {
  width: 100%;
  background: #F8FAFC;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  color: #111827;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.93rem;
  /* 52–56px total height */
  padding: 0.9rem 3rem 0.9rem 1rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  box-sizing: border-box;
}
.fl-input-wrap input:focus {
  border-color: #2563EB;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.fl-input-wrap input::placeholder { color: #CBD5E1; }
.fl-input-icon {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: 1.05rem; pointer-events: none; line-height: 1;
}
.faya-login-pw-wrap input { padding-right: 5.2rem; }
.fl-input-icon--lock { right: 2.9rem; }
.faya-login-eye {
  position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #94a3b8; cursor: pointer;
  padding: 2px 4px; font-size: 1.05rem; line-height: 1;
}
.faya-login-eye:hover { color: #475569; }

/* Remember + Forgot */
.fl-form-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.2rem; margin-top: -0.1rem;
}
.fl-remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.83rem; color: #64748B; cursor: pointer; user-select: none;
}
.fl-remember input[type="checkbox"] { accent-color: #2563EB; width: 15px; height: 15px; }
.fl-forgot {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 0.83rem; color: #2563EB; font-weight: 600;
}
.fl-forgot:hover { color: #1D4ED8; text-decoration: underline; }

/* Error */
.faya-login-error {
  background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C;
  border-radius: 10px; padding: 0.6rem 0.9rem;
  font-size: 0.82rem; margin-bottom: 1rem;
}

/* CTA — 56px height */
.faya-login-btn {
  width: 100%;
  background: #2563EB;
  color: #fff;
  border: none;
  border-radius: 12px;
  /* 56px height */
  padding: 1rem 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.95rem; font-weight: 700; cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(37,99,235,0.40), 0 1px 3px rgba(37,99,235,0.2);
}
.faya-login-btn:hover {
  background: #1D4ED8;
  box-shadow: 0 6px 24px rgba(37,99,235,0.50);
  transform: translateY(-1px);
}
.faya-login-btn:active { transform: translateY(0); }
.faya-login-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Card footer */
.fl-card-footer {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 0.72rem; color: #94a3b8;
  padding: 0.9rem 2rem 1.2rem;
  border-top: 1px solid #F1F5F9;
}

/* ══════════════════════
   BOTTOM FEATURE BAR
   ══════════════════════ */
.fl-bottom-bar {
  position: relative; z-index: 1;
  display: flex;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border-top: 1px solid #E2E8F0;
  flex-shrink: 0;
}
.fl-bottom-item {
  flex: 1; display: flex; align-items: center; gap: 12px;
  padding: 0.85rem 1.4rem;
  border-right: 1px solid #F1F5F9;
}
.fl-bottom-item:last-child { border-right: none; }
.fl-bottom-icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.fl-bottom-title { font-size: 0.82rem; font-weight: 700; color: #111827; margin-bottom: 1px; }
.fl-bottom-desc  { font-size: 0.72rem; color: #6b7280; line-height: 1.4; }

/* ══════════════════════
   DARK MODE
   ══════════════════════ */
[data-bs-theme="dark"] #faya-login-overlay { background: #080f1a; }
[data-bs-theme="dark"] .fl-wm-svg { opacity: 0.09; }
[data-bs-theme="dark"] .fl-hero-logo-wrap { background: #1e293b; border-color: #334155; }
[data-bs-theme="dark"] .fl-hero-brand-name { color: #f1f5f9; }
[data-bs-theme="dark"] .fl-hero-brand-sub  { color: #475569; }
[data-bs-theme="dark"] .fl-eyebrow         { color: #60a5fa; }
[data-bs-theme="dark"] .fl-eyebrow-dot     { background: #60a5fa; }
[data-bs-theme="dark"] .fl-hero-headline   { color: #f8fafc; }
[data-bs-theme="dark"] .fl-hero-desc       { color: #64748b; }
[data-bs-theme="dark"] .fl-vp             { color: #94a3b8; }
[data-bs-theme="dark"] .fl-vp-check       { background: #1e3a5f; border-color: #1d4ed8; }
[data-bs-theme="dark"] .fl-metric-num     { color: #f1f5f9; }
[data-bs-theme="dark"] .fl-ico--blue   { background: #1e3a5f; color: #60a5fa; }
[data-bs-theme="dark"] .fl-ico--purple { background: #2e1065; color: #a78bfa; }
[data-bs-theme="dark"] .fl-ico--green  { background: #052e16; color: #4ade80; }
[data-bs-theme="dark"] .fl-ico--orange { background: #431407; color: #fb923c; }
[data-bs-theme="dark"] .fl-card {
  background: rgba(15,23,42,0.85); border-color: rgba(51,65,85,0.8);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 24px 64px rgba(0,0,0,0.6);
}
[data-bs-theme="dark"] .fl-card-logo-wrap { background: #0f172a; border-color: #334155; }
[data-bs-theme="dark"] .fl-card-brand-name { color: #f1f5f9; }
[data-bs-theme="dark"] .fl-card-brand-sub  { color: #475569; }
[data-bs-theme="dark"] .fl-card-divider    { background: #1e293b; }
[data-bs-theme="dark"] .fl-card-headline   { color: #f8fafc; }
[data-bs-theme="dark"] .fl-card-title      { color: #64748b; }
[data-bs-theme="dark"] .faya-login-field label { color: #94a3b8; }
[data-bs-theme="dark"] .fl-input-wrap input {
  background: rgba(15,23,42,0.6); border-color: #334155; color: #f1f5f9;
}
[data-bs-theme="dark"] .fl-input-wrap input:focus {
  border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
[data-bs-theme="dark"] .fl-input-wrap input::placeholder { color: #475569; }
[data-bs-theme="dark"] .fl-input-icon  { color: #4b5563; }
[data-bs-theme="dark"] .faya-login-eye { color: #4b5563; }
[data-bs-theme="dark"] .faya-login-eye:hover { color: #94a3b8; }
[data-bs-theme="dark"] .fl-remember { color: #64748b; }
[data-bs-theme="dark"] .faya-login-error { background: #7f1d1d; border-color: #991b1b; color: #fecaca; }
[data-bs-theme="dark"] .faya-login-btn { background: #3b82f6; }
[data-bs-theme="dark"] .faya-login-btn:hover { background: #2563eb; }
[data-bs-theme="dark"] .fl-card-footer { border-color: #1e293b; color: #475569; }
[data-bs-theme="dark"] .fl-bottom-bar  { background: rgba(8,15,26,0.9); border-color: #1e293b; }
[data-bs-theme="dark"] .fl-bottom-item { border-color: #1e293b; }
[data-bs-theme="dark"] .fl-bottom-title { color: #e2e8f0; }
[data-bs-theme="dark"] .fl-bottom-desc  { color: #64748b; }
[data-bs-theme="dark"] .fl-bottom-icon.fl-ico--blue   { background: #1e3a5f; color: #60a5fa; }
[data-bs-theme="dark"] .fl-bottom-icon.fl-ico--orange { background: #431407; color: #fb923c; }
[data-bs-theme="dark"] .fl-bottom-icon.fl-ico--purple { background: #2e1065; color: #a78bfa; }
[data-bs-theme="dark"] .fl-bottom-icon.fl-ico--green  { background: #052e16; color: #4ade80; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .fl-hero { display: none; }
  .fl-panel { width: 100%; padding: 1.5rem; }
}

/* ══════════════════════════════════════════════
   SIDEBAR USER BAR
   ══════════════════════════════════════════════ */
.sidebar-user-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0.6rem 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar-user-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: #3b82f6; color: #fff; font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
  font-size: 0.8rem; font-weight: 600; color: #f1f5f9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-role { font-size: 0.68rem; color: #64748b; }
.sidebar-user-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.sidebar-icon-btn {
  background: none; border: none; padding: 4px 5px;
  color: rgba(255,255,255,0.45); cursor: pointer; border-radius: 5px;
  font-size: 0.95rem; line-height: 1; transition: color 0.15s, background 0.15s;
}
.sidebar-icon-btn:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.08); }
.sidebar-icon-btn--logout:hover { color: #f87171; background: rgba(239,68,68,0.12); }

/* ══════════════════════════════════════════════
   ACL + USER MANAGEMENT (Settings panels)
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   ACL TOOLBAR
   ══════════════════════════════════════════════ */
.acl-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--tblr-border-color, #e2e8f0);
  background: var(--tblr-bg-surface, #f8fafc);
  margin-bottom: 0;
}
[data-bs-theme="dark"] .acl-toolbar { background: #131c28; border-bottom-color: #2e3d52; }

/* Role tabs — left side */
.acl-role-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.acl-role-tab {
  padding: 0.3rem 0.85rem;
  border: 1.5px solid var(--tblr-border-color, #e2e8f0);
  border-radius: 6px;
  font-size: 0.8rem; font-weight: 500;
  background: transparent; color: #64748b;
  cursor: pointer; white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  line-height: 1.5;
}
.acl-role-tab:hover { background: #f1f5f9; border-color: #a78bfa; color: #7c3aed; }
.acl-role-tab--active {
  background: #ede9fe; border-color: #7c3aed; color: #6d28d9; font-weight: 600;
}
[data-bs-theme="dark"] .acl-role-tab { color: #94a3b8; border-color: #334155; }
[data-bs-theme="dark"] .acl-role-tab:hover { background: #1e2a3a; border-color: #7c3aed; color: #a78bfa; }
[data-bs-theme="dark"] .acl-role-tab--active { background: #2e1065; border-color: #7c3aed; color: #c4b5fd; }

/* Right side: save + add role */
.acl-toolbar-right { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.acl-toolbar-divider { width: 1px; height: 20px; background: var(--tblr-border-color, #e2e8f0); flex-shrink: 0; }
[data-bs-theme="dark"] .acl-toolbar-divider { background: #2e3d52; }
.acl-new-type-input { width: 150px; font-size: 0.8rem !important; padding: 0.3rem 0.6rem !important; height: auto !important; }
.acl-save-btn { flex-shrink: 0; }
.acl-add-group-btn { flex-shrink: 0; }

.acl-admin-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: #ede9fe; border: 1px solid #c4b5fd; border-radius: 8px;
  padding: 0.75rem 1rem; margin-bottom: 1rem;
  font-size: 0.83rem; color: #5b21b6;
}
[data-bs-theme="dark"] .acl-admin-banner {
  background: #2e1065; border-color: #4c1d95; color: #c4b5fd;
}

/* ══════════════════════════════════════════════
   ACL PERMISSION TREE
   ══════════════════════════════════════════════ */
.acl-tree-wrap {
  border: 1px solid var(--tblr-border-color, #e2e8f0);
  border-radius: 10px; overflow: hidden;
}
.acl-tree-header {
  display: flex; align-items: center; gap: 8px;
  padding: 0.6rem 1rem;
  background: var(--tblr-bg-surface, #f8fafc);
  border-bottom: 1px solid var(--tblr-border-color, #e2e8f0);
  font-size: 0.85rem; font-weight: 500; color: var(--tblr-body-color);
}
.acl-tree { padding: 0.5rem 0; }

/* ── Sections ── */
.acl-section { border-bottom: 1px solid var(--tblr-border-color, #e2e8f0); }
.acl-section:last-child { border-bottom: none; }
.acl-section-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 0.55rem 1rem; cursor: pointer; user-select: none;
  transition: background 0.12s;
}
.acl-section-hdr:hover { background: var(--tblr-active-bg, #f8fafc); }
.acl-section-caret {
  font-size: 0.8rem; color: #94a3b8; transition: transform 0.2s; flex-shrink: 0;
}
.acl-collapsed > .acl-section-hdr .acl-section-caret { transform: rotate(-90deg); }
.acl-collapsed > .acl-section-body { display: none; }
.acl-section-ico { color: #64748b; font-size: 1rem; flex-shrink: 0; }
.acl-section-label { font-size: 0.85rem; font-weight: 600; color: var(--tblr-body-color); flex: 1; }
.acl-badge-off {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: #fee2e2; color: #dc2626; border-radius: 8px; padding: 1px 7px; flex-shrink: 0;
}
[data-bs-theme="dark"] .acl-badge-off { background: #450a0a; color: #fca5a5; }

/* Nested section (children of a group) */
.acl-section-body { padding-left: 1.5rem; }
.acl-section--nested .acl-section-hdr { padding-top: 0.45rem; padding-bottom: 0.45rem; }

/* ── Action rows ── */
.acl-action-row {
  display: flex; align-items: center; gap: 10px;
  padding: 0.42rem 1rem;
  font-size: 0.82rem; color: var(--tblr-body-color);
  cursor: pointer; transition: background 0.1s;
}
.acl-action-row:hover { background: var(--tblr-active-bg, #f8fafc); }
.acl-action-row input[type=checkbox] { accent-color: #7c3aed; width: 15px; height: 15px; flex-shrink: 0; }
.acl-action-row--locked { opacity: 0.6; cursor: default; }
.acl-locked-badge {
  margin-left: auto; font-size: 0.7rem; color: #94a3b8;
}

/* ── Subgroup ── */
.acl-subgroup { margin: 0.25rem 0; }
.acl-subgroup-label {
  display: flex; align-items: center; gap: 6px;
  padding: 0.38rem 1rem 0.38rem 0.5rem;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #64748b;
  cursor: pointer; user-select: none;
}
.acl-sg-caret { font-size: 0.7rem; transition: transform 0.15s; color: #94a3b8; }
.acl-subgroup-body { padding-left: 0.5rem; }

/* ── Delete role btn ── */
.acl-del-role-btn { font-size: 0.78rem !important; padding: 0.25rem 0.75rem !important; }

/* ── Misc ── */
.acl-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 3rem 1rem; color: #94a3b8; font-size: 0.82rem; text-align: center;
}
.acl-admin-note {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.72rem; color: #94a3b8;
  border: 1px solid var(--tblr-border-color, #e2e8f0);
  border-radius: 7px;
  margin-top: 0.5rem;
}
.acl-loading, .acl-empty {
  text-align: center; color: #94a3b8; font-size: 0.82rem; padding: 2rem;
}
.acl-error { color: #ef4444; font-size: 0.82rem; padding: 1rem; }

/* Role select (toolbar + user rows) */
/* .acl-role-select replaced by .acl-role-tab pills */

/* Role badges on user rows */
.acl-role-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  padding: 1px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.04em;
}
.acl-role-badge--admin     { background: #dbeafe; color: #1d4ed8; }
.acl-role-badge--team_lead { background: #d1fae5; color: #065f46; }
.acl-role-badge--engineer  { background: #f1f5f9; color: #475569; }
.acl-role-badge--user      { background: #f1f5f9; color: #475569; }
[data-bs-theme="dark"] .acl-role-badge--admin     { background: #1e3a5f; color: #93c5fd; }
[data-bs-theme="dark"] .acl-role-badge--team_lead { background: #064e3b; color: #6ee7b7; }
[data-bs-theme="dark"] .acl-role-badge--engineer  { background: #1e293b; color: #94a3b8; }

/* Spin animation (shared) */
@keyframes faya-spin { to { transform: rotate(360deg); } }
.faya-spin { display: inline-block; animation: faya-spin 0.7s linear infinite; }

/* st-ico--purple / teal for new settings tabs */
.st-ico--purple { background: #ede9fe; color: #7c3aed; }
.st-ico--teal   { background: #ccfbf1; color: #0d9488; }
[data-bs-theme="dark"] .st-ico--purple { background: #2e1065; color: #a78bfa; }
[data-bs-theme="dark"] .st-ico--teal   { background: #042f2e; color: #34d399; }

/* ══════════════════════════════════════════════
   TOPBAR USER AVATAR + DROPDOWN
   ══════════════════════════════════════════════ */
.topbar-user-btn {
  background: none; border: none; padding: 4px 6px; cursor: pointer;
  border-radius: 8px; transition: background 0.15s;
  display: flex; align-items: center; gap: 7px;
}
.topbar-user-btn:hover { background: rgba(0,0,0,0.06); }
[data-bs-theme="dark"] .topbar-user-btn:hover { background: rgba(255,255,255,0.08); }
.topbar-user-name {
  font-size: 0.82rem; font-weight: 500;
  color: var(--tblr-body-color, #334155);
  max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-bs-theme="dark"] .topbar-user-name { color: #e2e8f0; }
.topbar-user-caret {
  font-size: 0.72rem; color: #94a3b8; flex-shrink: 0;
}
.topbar-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #2563eb; color: #fff;
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.25);
  overflow: hidden; flex-shrink: 0;
  background-size: cover; background-position: center;
}
.topbar-user-menu {
  min-width: 220px; padding: 0.25rem 0;
  border-radius: 10px; border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.topbar-menu-header {
  display: flex; align-items: center; gap: 10px;
  padding: 0.75rem 1rem;
}
.topbar-menu-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: #2563eb; color: #fff;
  font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background-size: cover; background-position: center;
}
.topbar-menu-name {
  font-size: 0.85rem; font-weight: 600; line-height: 1.2;
}
.topbar-menu-role {
  font-size: 0.7rem; color: #64748b;
}
[data-bs-theme="dark"] .topbar-user-menu {
  background: #1e293b; border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
[data-bs-theme="dark"] .topbar-menu-name { color: #f1f5f9; }

/* ══════════════════════════════════════════════
   SIDEBAR STORE BAR
   ══════════════════════════════════════════════ */
.sidebar-store-bar {
  padding: 0.5rem 0.6rem 0.35rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  position: relative;
}
.sidebar-store-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #cbd5e1 !important; font-size: 0.78rem;
  text-align: left; border-radius: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-store-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #f1f5f9 !important;
}
.sidebar-store-btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
.sidebar-store-btn::after { margin-left: auto; flex-shrink: 0; }
.sidebar-store-dropdown {
  width: calc(var(--tblr-sidebar-width, 240px) - 1.2rem);
  max-height: 280px;
  overflow-y: auto;
  font-size: 0.82rem;
  bottom: 100% !important;
  top: auto !important;
  transform: none !important;
  left: 0 !important;
}
/* Custom store picker menu */
.sidebar-store-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0.6rem;
  right: 0.6rem;
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
  z-index: 9999;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.35);
}
.ssm-item {
  padding: 7px 12px;
  font-size: 0.81rem;
  color: #cbd5e1;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.12s;
}
.ssm-item:hover { background: rgba(255,255,255,0.08); color: #f1f5f9; }
.ssm-item.active { background: rgba(37,99,235,0.25); color: #93c5fd; font-weight: 600; }
[data-bs-theme="light"] .sidebar-store-menu {
  background: #f8fafc;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
}
[data-bs-theme="light"] .ssm-item { color: #334155; }
[data-bs-theme="light"] .ssm-item:hover { background: rgba(0,0,0,0.05); color: #1e293b; }
[data-bs-theme="light"] .ssm-item.active { background: rgba(37,99,235,0.1); color: #1d4ed8; }

/* ══════════════════════════════════════════════
   MY PROFILE PAGE
   ══════════════════════════════════════════════ */
/* ══════════════════════════════════════
   MY PROFILE PAGE
══════════════════════════════════════ */
#page-profile { padding-top: 0 !important; }

.prf-page { max-width: 960px; margin: 0 auto; padding: 0 0 2rem; }

/* ── Hero banner ── */
.prf-hero {
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .prf-hero { border-color: #2e3d52; box-shadow: 0 2px 12px rgba(0,0,0,.3); }

.prf-hero-banner {
  height: 88px;
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #7c3aed 100%);
}
[data-bs-theme="dark"] .prf-hero-banner {
  background: linear-gradient(135deg, #0c1a3a 0%, #1e3a5f 50%, #3730a3 100%);
}

.prf-hero-body {
  display: flex; align-items: flex-end; gap: 1.1rem;
  padding: 0 1.5rem 1.1rem;
  background: var(--bs-body-bg);
  position: relative;
}

/* ── Avatar ── */
.prf-avatar-wrap { position: relative; flex-shrink: 0; margin-top: -40px; }
.prf-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: #2563eb; color: #fff;
  font-size: 1.5rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--bs-body-bg);
  overflow: hidden;
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 2px #e2e8f0;
}
[data-bs-theme="dark"] .prf-avatar { box-shadow: 0 0 0 2px #2e3d52; }
.prf-avatar-edit-btn {
  position: absolute; bottom: 2px; right: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #2563eb; color: #fff; border: 2px solid var(--bs-body-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; cursor: pointer; padding: 0;
  transition: background 0.15s;
}
.prf-avatar-edit-btn:hover { background: #1d4ed8; }

/* ── Hero info ── */
.prf-hero-info { padding-bottom: 0.1rem; }
.prf-hero-name { font-size: 1.15rem; font-weight: 700; color: var(--bs-body-color); margin: 0 0 2px; }
.prf-hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prf-hero-username { font-size: 0.8rem; color: var(--bs-secondary-color); }

/* ── Two-column grid ── */
.prf-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 720px) {
  .prf-grid { grid-template-columns: 1fr; }
  .prf-sidebar { order: -1; }
}

/* ── Profile card ── */
.prf-card {
  background: var(--bs-body-bg);
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .prf-card { border-color: #2e3d52; box-shadow: 0 1px 6px rgba(0,0,0,.2); }
.prf-forms { display: flex; flex-direction: column; gap: 1rem; }

.prf-card-hdr {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1.5px solid #e2e8f0;
  background: #f8fafc;
}
[data-bs-theme="dark"] .prf-card-hdr { background: #131c28; border-bottom-color: #2e3d52; }

.prf-card-ico {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; flex-shrink: 0;
}
.prf-ico--blue  { background: #dbeafe; color: #2563eb; }
.prf-ico--amber { background: #fef3c7; color: #d97706; }
.prf-ico--slate { background: #f1f5f9; color: #475569; }
[data-bs-theme="dark"] .prf-ico--blue  { background: #1e3a8a; color: #93c5fd; }
[data-bs-theme="dark"] .prf-ico--amber { background: #451a03; color: #fcd34d; }
[data-bs-theme="dark"] .prf-ico--slate { background: #1e293b; color: #94a3b8; }

.prf-card-title { font-size: 0.88rem; font-weight: 700; color: var(--bs-body-color); line-height: 1.2; }
.prf-card-sub   { font-size: 0.72rem; color: var(--bs-secondary-color); margin-top: 1px; }

.prf-card-body { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.prf-card-footer {
  padding: 0.7rem 1.1rem;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex; justify-content: flex-end;
}
[data-bs-theme="dark"] .prf-card-footer { background: #131c28; border-top-color: #2e3d52; }

/* ── Account info list ── */
.prf-info-list { display: flex; flex-direction: column; }
.prf-info-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0.65rem 1.1rem;
  border-bottom: 1px solid #f1f5f9;
}
.prf-info-item:last-child { border-bottom: none; }
[data-bs-theme="dark"] .prf-info-item { border-bottom-color: #1e293b; }
.prf-info-label {
  font-size: 0.71rem; font-weight: 600; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.05em;
  display: flex; align-items: center; gap: 4px;
}
.prf-info-label i { font-size: 0.8rem; }
.prf-info-value { font-size: 0.83rem; font-weight: 500; color: var(--bs-body-color); }

/* ── Topbar icon button (theme toggle, etc.) ── */
.topbar-icon-btn {
  background: none; border: none; padding: 6px;
  color: var(--tblr-body-color, #475569);
  cursor: pointer; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.topbar-icon-btn:hover {
  background: rgba(0,0,0,0.06);
  color: var(--tblr-primary, #2563eb);
}
[data-bs-theme="dark"] .topbar-icon-btn { color: #94a3b8; }
[data-bs-theme="dark"] .topbar-icon-btn:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }

/* ══════════════════════════════════════════════
   USER MANAGEMENT (Settings → Users)
   ══════════════════════════════════════════════ */
.um-layout {
  display: flex; flex: 1; min-height: 0; overflow: hidden; gap: 0;
}

/* Left list column */
.um-list-col {
  width: 260px; flex-shrink: 0;
  border-right: 1px solid var(--tblr-border-color);
  display: flex; flex-direction: column; overflow: hidden;
}
.um-list-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem .75rem; border-bottom: 1px solid var(--tblr-border-color);
  flex-shrink: 0;
}
.um-add-btn { padding: .2rem .55rem !important; font-size: .75rem !important; }
.um-user-list { overflow-y: auto; flex: 1; }

.um-user-row {
  display: flex; align-items: center; gap: 10px;
  padding: .6rem .75rem; cursor: pointer;
  border-bottom: 1px solid var(--tblr-border-color);
  transition: background .12s;
}
.um-user-row:hover { background: rgba(37,99,235,.04); }
.um-user-row.active { background: rgba(37,99,235,.08); }
[data-bs-theme="dark"] .um-user-row:hover { background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .um-user-row.active { background: rgba(37,99,235,.15); }

.um-list-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: #2563eb; color: #fff;
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.um-list-meta { flex: 1; min-width: 0; }
.um-list-name { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-list-sub  { font-size: .7rem; color: #64748b; }
.um-me-badge  { font-size: .65rem; background: #dbeafe; color: #1d4ed8; border-radius: 4px; padding: 0 4px; font-weight: 600; }
[data-bs-theme="dark"] .um-me-badge { background: #1e3a8a; color: #93c5fd; }
.um-role-tag  { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.um-role-admin { color: #7c3aed; }
.um-role-user  { color: #0369a1; }
.um-row-arrow  { color: #cbd5e1; font-size: .8rem; flex-shrink: 0; }

/* Right detail column */
.um-detail-col {
  flex: 1; min-height: 0; min-width: 0; overflow-y: auto; display: flex; flex-direction: column;
  background: var(--tblr-bg-surface, #fff);
}
[data-bs-theme="dark"] .um-detail-col { background: #1e293b; }

.um-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.um-detail-form {
  flex-direction: column; display: none; flex: 1;
}
.um-detail-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; border-bottom: 1px solid var(--tblr-border-color);
  flex-shrink: 0; font-size: .88rem;
}
.um-close-btn {
  background: none; border: none; color: #94a3b8; cursor: pointer;
  border-radius: 5px; padding: 3px 6px; transition: background .12s;
}
.um-close-btn:hover { background: rgba(0,0,0,.06); color: #475569; }

.um-form-body { padding: 1rem; display: flex; flex-direction: column; gap: .75rem; overflow-y: auto; }
.um-field { display: flex; flex-direction: column; gap: .25rem; }
.um-label { font-size: .78rem; font-weight: 600; color: #475569; }
[data-bs-theme="dark"] .um-label { color: #94a3b8; }

.um-avatar-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem; background: var(--tblr-bg-surface-secondary, #f8fafc);
  border-radius: 8px; border: 1px solid var(--tblr-border-color);
}
[data-bs-theme="dark"] .um-avatar-row { background: #0f172a; }
.um-detail-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: #2563eb; color: #fff;
  font-size: 1.1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background-size: cover; background-position: center;
}

.um-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  background: var(--tblr-bg-surface-secondary, #f8fafc);
  border-radius: 8px; border: 1px solid var(--tblr-border-color);
  padding: .65rem .75rem;
}
[data-bs-theme="dark"] .um-info-grid { background: #0f172a; }
.um-info-item { display: flex; flex-direction: column; gap: 2px; }
.um-info-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; }
.um-info-item > span:last-child { font-size: .78rem; font-weight: 500; }

.um-section-divider {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #94a3b8;
  border-top: 1px solid var(--tblr-border-color);
  padding-top: .65rem; margin-top: .1rem;
}

/* ══════════════════════════════════════════════════════════════
   BOARD — Three-Tab Bar
   ══════════════════════════════════════════════════════════════ */
.brd-tab-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 0 0 2px;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--bs-border-color);
}

.brd-tab {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.48rem 0.9rem 0.52rem;
  font-size: 0.81rem; font-weight: 600;
  color: var(--bs-secondary-color);
  background: transparent; border: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 6px 6px 0 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.brd-tab:hover {
  color: var(--bs-body-color);
  background: rgba(0,0,0,0.03);
}
[data-bs-theme="dark"] .brd-tab:hover { background: rgba(255,255,255,0.04); }

.brd-tab--active {
  color: var(--faya-blue);
  border-bottom-color: var(--faya-blue);
}
.brd-tab--active:hover { background: transparent; color: var(--faya-blue); }

.brd-tab .ti {
  font-size: 0.9rem; opacity: 0.75;
}
.brd-tab--active .ti { opacity: 1; }

/* Tab count badges */
.brd-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 0.7rem; font-weight: 700;
  border-radius: 9px;
  background: rgba(0,0,0,0.07);
  color: var(--bs-secondary-color);
  transition: background 0.15s, color 0.15s;
}
[data-bs-theme="dark"] .brd-tab-badge { background: rgba(255,255,255,0.1); }

.brd-tab--active .brd-tab-badge {
  background: color-mix(in srgb, var(--faya-blue) 15%, transparent);
  color: var(--faya-blue);
}
.brd-tab-badge--amber { }
.brd-tab-badge--green { }

#tab-btn-pool.brd-tab--active .brd-tab-badge {
  background: rgba(180,83,9,0.12); color: #b45309;
}
#tab-btn-pool.brd-tab--active {
  color: #b45309; border-bottom-color: #b45309;
}
[data-bs-theme="dark"] #tab-btn-pool.brd-tab--active {
  color: #f59e0b; border-bottom-color: #f59e0b;
}
[data-bs-theme="dark"] #tab-btn-pool.brd-tab--active .brd-tab-badge {
  background: rgba(245,158,11,0.15); color: #f59e0b;
}

#tab-btn-done.brd-tab--active .brd-tab-badge {
  background: rgba(21,128,61,0.12); color: #15803d;
}
#tab-btn-done.brd-tab--active {
  color: #15803d; border-bottom-color: #15803d;
}
[data-bs-theme="dark"] #tab-btn-done.brd-tab--active {
  color: #22c55e; border-bottom-color: #22c55e;
}
[data-bs-theme="dark"] #tab-btn-done.brd-tab--active .brd-tab-badge {
  background: rgba(34,197,94,0.15); color: #22c55e;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — Board Sub-Navigation
   ══════════════════════════════════════════════════════════════ */

/* Parent link with chevron */
.nav-link--parent {
  display: flex; align-items: center;
}
.nav-chevron {
  margin-left: auto;
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  opacity: 0.5;
  flex-shrink: 0;
}
.nav-link--parent.nav-sub--open .nav-chevron {
  transform: rotate(90deg);
  opacity: 0.8;
}

/* Sub-nav list */
.nav-sub {
  list-style: none;
  padding: 0 0 0 0;
  margin: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s ease;
}
.nav-sub.nav-sub--expanded {
  max-height: 180px;
}

/* Sub-nav items */
.nav-sub-link {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.32rem 0.75rem 0.32rem 2.4rem;
  font-size: 0.78rem; font-weight: 500;
  color: var(--bs-secondary-color);
  text-decoration: none;
  border-radius: 6px;
  margin: 1px 4px;
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
}
.nav-sub-link:hover:not(.nav-sub--active) {
  background: rgba(0,0,0,0.03);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .nav-sub-link:hover:not(.nav-sub--active) {
  background: rgba(255,255,255,0.04);
}
.nav-sub-link.nav-sub--active {
  color: var(--faya-blue);
  background: color-mix(in srgb, var(--faya-blue) 10%, transparent);
  font-weight: 600;
}
.nav-sub-link .ti {
  font-size: 0.82rem; opacity: 0.65; flex-shrink: 0;
}
.nav-sub-link.nav-sub--active .ti { opacity: 1; }

/* Sub-nav count badges */
.nav-sub-badge {
  margin-left: auto;
  min-width: 16px; height: 16px; padding: 0 4px;
  font-size: 0.65rem; font-weight: 700;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.07);
  color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .nav-sub-badge { background: rgba(255,255,255,0.1); }
.nav-sub-link.nav-sub--active .nav-sub-badge {
  background: color-mix(in srgb, var(--faya-blue) 18%, transparent);
  color: var(--faya-blue);
}
.nav-sub-badge--amber { }
#nav-sub-pool.nav-sub--active .nav-sub-badge {
  background: rgba(180,83,9,0.13); color: #b45309;
}
[data-bs-theme="dark"] #nav-sub-pool.nav-sub--active .nav-sub-badge {
  background: rgba(245,158,11,0.15); color: #f59e0b;
}
#nav-sub-done.nav-sub--active .nav-sub-badge {
  background: rgba(21,128,61,0.13); color: #15803d;
}
[data-bs-theme="dark"] #nav-sub-done.nav-sub--active .nav-sub-badge {
  background: rgba(34,197,94,0.15); color: #22c55e;
}

/* ══════════════════════════════════════════════════════════════
   BOARD — Unified Stats Bar (replaces KPI strip + Insights bar)
   ══════════════════════════════════════════════════════════════ */
.brd-stats-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bs-body-bg);
  border: 1.5px solid var(--bs-border-color);
  border-radius: 10px;
  padding: 0 4px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
}
[data-bs-theme="dark"] .brd-stats-bar {
  background: #1e2130;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.brd-stat {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  min-width: 0;
  flex-shrink: 0;
}

.brd-stat-sep {
  width: 1px;
  height: 28px;
  background: var(--bs-border-color);
  flex-shrink: 0;
}

.brd-stat-ico {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem;
  flex-shrink: 0;
}
.brd-stat-ico--blue   { background: #eff6ff; color: #2563eb; }
.brd-stat-ico--teal   { background: #f0fdfa; color: #0d9488; }
.brd-stat-ico--amber  { background: #fffbeb; color: #d97706; }
.brd-stat-ico--red    { background: #fef2f2; color: #dc2626; }
.brd-stat-ico--gray   { background: #f8fafc; color: #64748b; }
.brd-stat-ico--orange { background: #fff7ed; color: #ea580c; }
.brd-stat-ico--green  { background: #f0fdf4; color: #16a34a; }

[data-bs-theme="dark"] .brd-stat-ico--blue   { background: rgba(37,99,235,.15);  color: #60a5fa; }
[data-bs-theme="dark"] .brd-stat-ico--teal   { background: rgba(13,148,136,.15); color: #2dd4bf; }
[data-bs-theme="dark"] .brd-stat-ico--amber  { background: rgba(217,119,6,.15);  color: #fbbf24; }
[data-bs-theme="dark"] .brd-stat-ico--red    { background: rgba(220,38,38,.15);  color: #f87171; }
[data-bs-theme="dark"] .brd-stat-ico--gray   { background: rgba(100,116,139,.12);color: #94a3b8; }
[data-bs-theme="dark"] .brd-stat-ico--orange { background: rgba(234,88,12,.15);  color: #fb923c; }
[data-bs-theme="dark"] .brd-stat-ico--green  { background: rgba(22,163,74,.15);  color: #4ade80; }

.brd-stat-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.brd-stat-val {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bs-body-color);
}
.brd-stat-val--red  { color: #dc2626; }
.brd-stat-val--warn { color: #ea580c; }
.brd-stat-val--green{ color: #16a34a; }
[data-bs-theme="dark"] .brd-stat-val--red  { color: #f87171; }
[data-bs-theme="dark"] .brd-stat-val--warn { color: #fb923c; }
[data-bs-theme="dark"] .brd-stat-val--green{ color: #4ade80; }

.brd-stat-lbl {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.brd-stat-view-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  font-size: 0.76rem; font-weight: 600;
  color: var(--faya-blue);
  background: color-mix(in srgb, var(--faya-blue) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--faya-blue) 25%, transparent);
  border-radius: 6px;
  cursor: pointer;
  margin-right: 6px;
  transition: background 0.15s;
  white-space: nowrap;
}
.brd-stat-view-btn:hover {
  background: color-mix(in srgb, var(--faya-blue) 14%, transparent);
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — Board Sub-Navigation (dark navy context, v2)
   Overrides the light-theme sub-nav CSS added earlier
   ══════════════════════════════════════════════════════════════ */

/* Parent item: no extra overrides needed — inherits .nav-link styles */
.nav-link--parent {
  position: relative;
}
.nav-chevron {
  margin-left: auto;
  font-size: 0.7rem;
  opacity: 0.4;
  flex-shrink: 0;
  transition: transform 0.2s ease, opacity 0.15s;
}
.nav-link--parent.nav-sub--open .nav-chevron {
  transform: rotate(90deg);
  opacity: 0.75;
}

/* Sub-nav list */
.nav-sub {
  list-style: none;
  padding: 2px 4px 6px 4px;
  margin: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s ease;
  position: relative;
}
/* Vertical connector line */
.nav-sub::before {
  content: '';
  position: absolute;
  left: 1.58rem;
  top: 4px;
  bottom: 10px;
  width: 1px;
  background: rgba(255,255,255,0.1);
  border-radius: 1px;
}
.nav-sub.nav-sub--expanded {
  max-height: 200px;
}

/* Sub-nav link items */
.nav-sub-link {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 0.29rem 0.7rem 0.29rem 2.15rem !important;
  margin: 1px 0 !important;
  border-radius: 7px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.58) !important;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  border-left: 2px solid transparent !important;
  background: transparent !important;
}
.nav-sub-link:hover {
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.88) !important;
}
.nav-sub-link.nav-sub--active {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border-left-color: var(--faya-accent) !important;
  font-weight: 600 !important;
}

/* Icons in sub-items */
.nav-sub-link .ti {
  font-size: 0.82rem !important;
  min-width: 14px;
  opacity: 0.5;
  flex-shrink: 0;
}
.nav-sub-link:hover .ti { opacity: 0.75; }
.nav-sub-link.nav-sub--active .ti { opacity: 1; }

/* Count badges */
.nav-sub-badge {
  margin-left: auto;
  min-width: 18px;
  height: 17px;
  padding: 0 5px;
  font-size: 0.67rem;
  font-weight: 700;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.nav-sub-link.nav-sub--active .nav-sub-badge {
  background: var(--faya-accent);
  color: #fff;
}
#nav-sub-pool.nav-sub--active .nav-sub-badge {
  background: #f59e0b;
  color: #1c1917;
}
#nav-sub-done.nav-sub--active .nav-sub-badge {
  background: #22c55e;
  color: #14532d;
}

/* Reopen Patterns sub-item active badge */
#nav-sub-reopen.nav-sub--active .nav-sub-badge {
  background: #ef4444;
  color: #fff;
}
#nav-sub-reopen.nav-sub--active {
  /* Slight red left-border to distinguish from other tabs */
  border-left-color: #ef4444 !important;
}

/* ══════════════════════════════════════════════════════════════
   KNOWLEDGE HUB — Enhanced UI v2
   ══════════════════════════════════════════════════════════════ */

/* ── Page header ──────────────────────────────────────────────── */
.kb2-page-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--bs-border-color);
}
.kb2-page-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 8px;
}
.kb2-page-title::before {
  content: '';
  display: inline-block;
  width: 3px; height: 1.1em;
  background: var(--faya-blue);
  border-radius: 2px;
  flex-shrink: 0;
}
.kb2-page-sub { font-size: 0.8rem !important; margin-top: 2px; }

/* ── Toolbar ──────────────────────────────────────────────────── */
.kb2-toolbar {
  background: var(--bs-body-bg);
  border: 1.5px solid var(--bs-border-color);
  border-radius: 10px;
  padding: 8px 10px !important;
  gap: 8px !important;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
[data-bs-theme="dark"] .kb2-toolbar {
  background: #1e2130;
  border-color: rgba(255,255,255,.08);
}

.kb2-search-inp {
  background: var(--bs-tertiary-bg) !important;
  border: 1.5px solid var(--bs-border-color) !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.kb2-search-inp:focus {
  border-color: var(--faya-blue) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
  background: var(--bs-body-bg) !important;
}

.kb2-sel {
  background: var(--bs-body-bg) !important;
  border: 1.5px solid var(--bs-border-color) !important;
  border-radius: 7px !important;
  font-size: 0.79rem !important;
  height: 32px !important;
  transition: border-color 0.15s !important;
}
.kb2-sel:focus { border-color: var(--faya-blue) !important; outline: none !important; }

.kb2-view-toggle {
  border: 1.5px solid var(--bs-border-color) !important;
  border-radius: 8px !important;
  padding: 2px !important;
  background: var(--bs-tertiary-bg) !important;
}
.kb2-view-btn {
  width: 28px !important; height: 26px !important;
  border-radius: 5px !important;
  font-size: 0.78rem !important;
  color: var(--bs-secondary-color) !important;
  transition: all .12s !important;
}
.kb2-view-btn.active {
  background: var(--bs-body-bg) !important;
  color: var(--faya-blue) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.1) !important;
}

.kb2-btn {
  height: 32px !important;
  padding: 0 11px !important;
  font-size: 0.78rem !important;
  border-radius: 7px !important;
  font-weight: 600 !important;
  border: 1.5px solid var(--bs-border-color) !important;
  gap: 5px !important;
  transition: all .12s !important;
}
.kb2-btn--ghost {
  background: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}
.kb2-btn--ghost:hover {
  background: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
}
.kb2-btn--primary {
  background: var(--faya-blue) !important;
  color: #fff !important;
  border-color: var(--faya-blue) !important;
}
.kb2-btn--primary:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.3) !important;
}

/* ── Stats bar chips ─────────────────────────────────────────── */
.kb2-stats-row {
  gap: 6px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}
.kb-stat-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .12s !important;
  border: 1.5px solid transparent !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
}
.kb-stat-chip:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.12) !important;
}
.kb-stat-chip strong { font-weight: 800 !important; }

/* ── Grid container ──────────────────────────────────────────── */
.kbc-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}

/* ── Grid card ───────────────────────────────────────────────── */
.kbc-grid .kbc-row {
  border: 1.5px solid var(--bs-border-color) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background: var(--bs-body-bg) !important;
  overflow: hidden !important;
  transition: box-shadow .18s, transform .18s, border-color .18s !important;
  cursor: pointer !important;
  gap: 0 !important;
}
[data-bs-theme="dark"] .kbc-grid .kbc-row {
  background: #1a1f2e !important;
  border-color: rgba(255,255,255,.08) !important;
}
.kbc-grid .kbc-row:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--faya-blue) 40%, var(--bs-border-color)) !important;
}
[data-bs-theme="dark"] .kbc-grid .kbc-row:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
  border-color: rgba(59,130,246,.4) !important;
}
.kbc-grid .kbc-row::before { display: none !important; }
.kbc-grid .kbc-row:hover .kbc-title { color: var(--faya-blue) !important; }

/* Grid card: header band with colored icon */
.kbc-grid .kbc-thumb {
  width: 100% !important;
  min-width: unset !important;
  height: 72px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: color-mix(in srgb, var(--kbc-bg, #f1f5f9) 60%, white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.7rem !important;
  position: relative !important;
  border-bottom: 1.5px solid color-mix(in srgb, var(--kbc-color, #6b7280) 15%, transparent) !important;
  flex-shrink: 0 !important;
}
[data-bs-theme="dark"] .kbc-grid .kbc-thumb {
  background: color-mix(in srgb, var(--kbc-bg, #1e2130) 25%, #1a1f2e) !important;
}

/* Type label in top-right corner of grid card header */
.kbc-grid .kbc-thumb::after {
  content: attr(data-label);
  position: absolute;
  top: 8px; right: 8px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kbc-color);
  background: color-mix(in srgb, var(--kbc-bg) 80%, white);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--kbc-color) 20%, transparent);
}

/* Grid content area */
.kbc-grid .kbc-content {
  padding: 12px 14px 8px !important;
  flex: 1 !important;
}
.kbc-grid .kbc-title {
  font-size: 0.84rem !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
}
.kbc-grid .kbc-meta-row {
  gap: 4px !important;
  flex-wrap: wrap !important;
}
.kbc-grid .kbc-type-chip { display: none !important; } /* label shown in header ::after */

/* Grid action bar */
.kbc-grid .kbc-actions {
  border-top: 1.5px solid var(--bs-border-color) !important;
  padding: 8px 12px !important;
  margin-top: 0 !important;
  gap: 4px !important;
  opacity: 1 !important;
  background: transparent !important;
}
[data-bs-theme="dark"] .kbc-grid .kbc-actions {
  border-top-color: rgba(255,255,255,.06) !important;
}

/* ── List container ──────────────────────────────────────────── */
.kbc-list {
  border-radius: 12px !important;
  border: 1.5px solid var(--bs-border-color) !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
}
[data-bs-theme="dark"] .kbc-list {
  background: #1a1f2e !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.2) !important;
}
.kbc-list::before { display: none !important; }

/* ── List row ────────────────────────────────────────────────── */
.kbc-list .kbc-row {
  padding: 10px 12px 10px 16px !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
  transition: background .12s !important;
}
[data-bs-theme="dark"] .kbc-list .kbc-row { border-bottom-color: rgba(255,255,255,.05) !important; }
.kbc-list .kbc-row:last-child { border-bottom: none !important; }
.kbc-list .kbc-row:hover { background: var(--bs-tertiary-bg) !important; }
[data-bs-theme="dark"] .kbc-list .kbc-row:hover { background: rgba(255,255,255,.03) !important; }

/* List left accent border */
.kbc-list .kbc-row::before {
  width: 3px !important;
  border-radius: 0 !important;
  left: 0 !important;
  top: 0 !important; bottom: 0 !important;
  height: auto !important;
}
.kbc-list .kbc-row:hover::before {
  background: var(--kbc-color, var(--faya-blue)) !important;
}

/* List thumb */
.kbc-list .kbc-thumb {
  width: 36px !important; min-width: 36px !important; height: 36px !important;
  border-radius: 9px !important;
  font-size: 0.92rem !important;
  flex-shrink: 0 !important;
}

/* List content */
.kbc-list .kbc-content {
  gap: 3px !important;
}
.kbc-list .kbc-title {
  font-size: 0.855rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.kbc-list .kbc-meta-row { flex-wrap: nowrap !important; overflow: hidden !important; }

/* List actions: fade in on row hover */
.kbc-list .kbc-actions {
  opacity: 0 !important;
  transition: opacity .15s !important;
}
.kbc-list .kbc-row:hover .kbc-actions { opacity: 1 !important; }

/* ── Empty state ─────────────────────────────────────────────── */
.kbc-empty-wrap {
  min-height: 280px !important;
  border: 2px dashed var(--bs-border-color) !important;
  border-radius: 14px !important;
  background: var(--bs-tertiary-bg) !important;
}
.kbc-empty {
  text-align: center !important;
  padding: 2rem !important;
}
.kbc-empty-icon {
  width: 60px !important; height: 60px !important;
  margin: 0 auto 14px !important;
  background: color-mix(in srgb, var(--faya-blue) 10%, var(--bs-body-bg)) !important;
  border-radius: 14px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 1.6rem !important;
  color: var(--faya-blue) !important;
}
.kbc-empty-title {
  font-size: 1rem !important; font-weight: 700 !important;
  color: var(--bs-body-color) !important; margin-bottom: 6px !important;
}
.kbc-empty-sub { font-size: 0.82rem !important; color: var(--bs-secondary-color) !important; }

/* ── Shared button sizing in both views ──────────────────────── */
.kbc-btn {
  height: 28px !important;
  padding: 0 9px !important;
  font-size: 0.73rem !important;
  border-radius: 6px !important;
}
.kbc-btn--primary {
  background: color-mix(in srgb, var(--faya-blue) 10%, var(--bs-body-bg)) !important;
  border-color: color-mix(in srgb, var(--faya-blue) 30%, transparent) !important;
  color: var(--faya-blue) !important;
}
.kbc-btn--primary:hover {
  background: var(--faya-blue) !important;
  border-color: var(--faya-blue) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(37,99,235,.25) !important;
}

/* ══════════════════════════════════════════════════════════════
   KNOWLEDGE HUB — Pro SaaS Final v4 (comprehensive override)
   Linear × GitHub × Stripe aesthetic
   ══════════════════════════════════════════════════════════════ */

/* ── Page header ──────────────────────────────────────────────── */
#page-knowledge .kb2-page-hdr {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e9edf2 !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-page-hdr { border-bottom-color: #1e2936 !important; }

#page-knowledge .kb2-page-title {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: #0f172a !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
  margin: 0 !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-page-title { color: #f1f5f9 !important; }
#page-knowledge .kb2-page-title::before {
  content: '' !important;
  display: inline-block !important;
  width: 4px !important; height: 1.15em !important;
  background: linear-gradient(180deg,#2563eb,#7c3aed) !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
}

#page-knowledge .kb2-page-sub {
  font-size: 0.79rem !important;
  color: #64748b !important;
  margin-top: 3px !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-page-sub { color: #64748b !important; }

/* ── Toolbar ──────────────────────────────────────────────────── */
#page-knowledge .kb2-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
  flex-wrap: nowrap !important;
  height: 44px !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-toolbar {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.25) !important;
}

/* Search */
#page-knowledge .kb2-search-wrap {
  display: flex !important; align-items: center !important;
  flex: 0 0 260px !important;
  position: relative !important;
  height: 100% !important;
  border-right: 1.5px solid #e2e8f0 !important;
  padding: 0 12px !important;
  gap: 8px !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-search-wrap { border-right-color: #30363d !important; }

#page-knowledge .kb2-search-ico {
  color: #94a3b8 !important;
  font-size: 0.85rem !important;
  flex-shrink: 0 !important;
}

#page-knowledge .kb2-search-inp {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 0.82rem !important;
  color: #0f172a !important;
  flex: 1 !important;
  padding: 0 !important;
  height: 100% !important;
  min-width: 0 !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-search-inp { color: #e2e8f0 !important; }
#page-knowledge .kb2-search-inp::placeholder { color: #94a3b8 !important; }
#page-knowledge .kb2-search-inp:focus { border: none !important; box-shadow: none !important; }

#page-knowledge .kb2-search-kbd {
  display: inline-flex !important; align-items: center !important; gap: 2px !important;
  flex-shrink: 0 !important;
}
#page-knowledge .kb2-search-kbd span {
  font-size: 0.6rem !important;
  color: #94a3b8 !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 3px !important;
  padding: 0 4px !important;
  line-height: 1.6 !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-search-kbd span { background: #21262d !important; border-color: #30363d !important; }

/* Filter group */
#page-knowledge .kb2-filter-group {
  display: flex !important; align-items: center !important;
  height: 100% !important;
  border-right: 1.5px solid #e2e8f0 !important;
  padding: 0 !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-filter-group { border-right-color: #30363d !important; }

#page-knowledge .kb2-sel {
  appearance: none !important;
  border: none !important;
  border-right: 1px solid #e2e8f0 !important;
  background: transparent !important;
  font-size: 0.78rem !important;
  color: #374151 !important;
  height: 100% !important;
  padding: 0 28px 0 12px !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  outline: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-sel {
  color: #94a3b8 !important;
  border-right-color: #30363d !important;
}
#page-knowledge .kb2-sel:last-child { border-right: none !important; }
#page-knowledge .kb2-sel:hover { background-color: #f8fafc !important; }
[data-bs-theme="dark"] #page-knowledge .kb2-sel:hover { background-color: rgba(255,255,255,.04) !important; }

/* View toggle */
#page-knowledge #kb-view-toggle-wrap {
  display: flex !important; align-items: center !important;
  height: 100% !important;
  padding: 0 8px !important;
  gap: 2px !important;
  border-right: 1.5px solid #e2e8f0 !important;
}
[data-bs-theme="dark"] #page-knowledge #kb-view-toggle-wrap { border-right-color: #30363d !important; }

#page-knowledge .kb2-view-btn {
  width: 28px !important; height: 28px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 6px !important;
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  transition: all .12s !important;
}
#page-knowledge .kb2-view-btn:hover { background: #f1f5f9 !important; color: #374151 !important; }
[data-bs-theme="dark"] #page-knowledge .kb2-view-btn:hover { background: rgba(255,255,255,.08) !important; color: #cbd5e1 !important; }
#page-knowledge .kb2-view-btn.active {
  background: #eff6ff !important;
  color: #2563eb !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-view-btn.active { background: rgba(37,99,235,.18) !important; color: #60a5fa !important; }

/* Action buttons */
#page-knowledge .kb2-toolbar-actions {
  display: flex !important; align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
  padding: 0 8px !important;
  height: 100% !important;
}

#page-knowledge .kb2-btn {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  border: 1.5px solid transparent !important;
  cursor: pointer !important;
  transition: all .12s !important;
  white-space: nowrap !important;
}
#page-knowledge .kb2-btn i { font-size: 0.8rem !important; }

#page-knowledge .kb2-btn--ghost {
  background: transparent !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
}
#page-knowledge .kb2-btn--ghost:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-btn--ghost {
  color: #94a3b8 !important; border-color: #30363d !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-btn--ghost:hover {
  background: rgba(255,255,255,.06) !important;
  color: #cbd5e1 !important; border-color: #4b5563 !important;
}
#page-knowledge .kb2-btn--primary {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #2563eb !important;
  box-shadow: 0 1px 3px rgba(37,99,235,.3) !important;
}
#page-knowledge .kb2-btn--primary:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 3px 10px rgba(37,99,235,.4) !important;
  transform: translateY(-1px) !important;
}

/* ── Stats bar ─────────────────────────────────────────────────── */
#page-knowledge .kb2-stats-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}

#page-knowledge .kb-stat-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 11px !important;
  border-radius: 20px !important;
  font-size: 0.73rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1.5px solid currentColor !important;
  transition: all .13s !important;
  opacity: .75 !important;
  letter-spacing: 0.01em !important;
}
#page-knowledge .kb-stat-chip:hover {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.12) !important;
}
#page-knowledge .kb-stat-chip strong {
  font-weight: 800 !important;
  background: rgba(255,255,255,.35) !important;
  border-radius: 10px !important;
  padding: 0 5px !important;
  min-width: 18px !important;
  text-align: center !important;
  display: inline-block !important;
}
#page-knowledge .kb-stat-all {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}
#page-knowledge .kb-stat-all strong { background: rgba(0,0,0,.06) !important; }
[data-bs-theme="dark"] #page-knowledge .kb-stat-all {
  background: #21262d !important; color: #94a3b8 !important; border-color: #30363d !important;
}

/* ── List container ────────────────────────────────────────────── */
#page-knowledge .kbc-list {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.03) !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-list {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}

/* Gradient top accent line */
#page-knowledge .kbc-list::before {
  content: '' !important; display: block !important;
  height: 3px !important;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #06b6d4 100%) !important;
  flex-shrink: 0 !important;
}

/* ── List row ──────────────────────────────────────────────────── */
#page-knowledge .kbc-list .kbc-row {
  display: flex !important;
  align-items: center !important;
  min-height: 62px !important;
  padding: 0 16px 0 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid #f1f5f9 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background .1s !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-list .kbc-row { border-bottom-color: #1e2530 !important; }
#page-knowledge .kbc-list .kbc-row:last-child { border-bottom: none !important; }

#page-knowledge .kbc-list .kbc-row:hover { background: #f8fbff !important; }
[data-bs-theme="dark"] #page-knowledge .kbc-list .kbc-row:hover { background: rgba(255,255,255,.025) !important; }

/* Left color bar on hover */
#page-knowledge .kbc-list .kbc-row::before {
  content: '' !important;
  position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: transparent !important;
  transition: background .15s !important;
}
#page-knowledge .kbc-list .kbc-row:hover::before { background: var(--kbc-color, #2563eb) !important; }
#page-knowledge .kbc-list .kbc-row:hover .kbc-title { color: #1d4ed8 !important; }
[data-bs-theme="dark"] #page-knowledge .kbc-list .kbc-row:hover .kbc-title { color: #60a5fa !important; }

/* ── List thumb / icon ─────────────────────────────────────────── */
#page-knowledge .kbc-list .kbc-thumb {
  width: 40px !important; min-width: 40px !important; height: 40px !important;
  border-radius: 10px !important;
  margin: 0 14px 0 18px !important;
  background: var(--kbc-bg, #f1f5f9) !important;
  color: var(--kbc-color, #6b7280) !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
  border: none !important;
  transition: transform .12s !important;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--kbc-color, #6b7280) 20%, transparent) !important;
}
#page-knowledge .kbc-list .kbc-row:hover .kbc-thumb { transform: scale(1.06) !important; }

/* ── List content ──────────────────────────────────────────────── */
#page-knowledge .kbc-list .kbc-content {
  flex: 1 !important; min-width: 0 !important;
  padding: 12px 0 !important;
  display: flex !important; flex-direction: column !important; gap: 4px !important;
}
#page-knowledge .kbc-list .kbc-title-row { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; }
#page-knowledge .kbc-list .kbc-title {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important; min-width: 0 !important;
  transition: color .12s !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-list .kbc-title { color: #e2e8f0 !important; }

/* Domain chip */
#page-knowledge .kbc-domain {
  display: inline-flex !important; align-items: center !important; gap: 3px !important;
  font-size: 0.67rem !important; color: #94a3b8 !important;
  font-family: ui-monospace,'SF Mono',monospace !important;
  background: #f8fafc !important; border: 1px solid #e2e8f0 !important;
  padding: 1px 7px !important; border-radius: 5px !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-domain { background: #21262d !important; border-color: #30363d !important; }

/* Meta row */
#page-knowledge .kbc-list .kbc-meta-row {
  display: flex !important; align-items: center !important;
  gap: 5px !important; flex-wrap: nowrap !important;
}
#page-knowledge .kbc-type-chip {
  display: inline-flex !important; align-items: center !important;
  font-size: 0.63rem !important; font-weight: 700 !important;
  padding: 2px 7px !important; border-radius: 4px !important;
  letter-spacing: 0.03em !important; white-space: nowrap !important;
}
#page-knowledge .kbc-meta-sep { color: #d1d5db !important; font-size: 0.7rem !important; user-select: none !important; }
#page-knowledge .kbc-date {
  display: inline-flex !important; align-items: center !important; gap: 3px !important;
  font-size: 0.7rem !important; color: #94a3b8 !important; white-space: nowrap !important;
}
#page-knowledge .kbc-tags { display: inline-flex !important; align-items: center !important; gap: 3px !important; }
#page-knowledge .kbc-tag {
  font-size: 0.62rem !important; font-weight: 600 !important;
  padding: 1px 6px !important; border-radius: 4px !important;
  background: #f1f5f9 !important; color: #475569 !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-tag { background: #21262d !important; color: #94a3b8 !important; }

/* ── List actions ──────────────────────────────────────────────── */
#page-knowledge .kbc-list .kbc-actions {
  display: flex !important; align-items: center !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
  opacity: 0 !important;
  transition: opacity .15s !important;
  padding: 0 0 0 12px !important;
}
#page-knowledge .kbc-list .kbc-row:hover .kbc-actions { opacity: 1 !important; }

#page-knowledge .kbc-btn {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  height: 28px !important; padding: 0 9px !important;
  border-radius: 6px !important;
  font-size: 0.71rem !important; font-weight: 600 !important;
  border: 1px solid transparent !important;
  cursor: pointer !important; transition: all .1s !important;
  white-space: nowrap !important;
}
#page-knowledge .kbc-btn i { font-size: 0.78rem !important; }
#page-knowledge .kbc-btn--primary {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
}
#page-knowledge .kbc-btn--primary:hover {
  background: #2563eb !important; color: #fff !important;
  border-color: #2563eb !important;
  box-shadow: 0 2px 6px rgba(37,99,235,.3) !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-btn--primary {
  background: rgba(37,99,235,.15) !important; color: #60a5fa !important; border-color: rgba(37,99,235,.3) !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-btn--primary:hover {
  background: #2563eb !important; color: #fff !important; border-color: #2563eb !important;
}
#page-knowledge .kbc-btn--ghost {
  background: transparent !important; color: #94a3b8 !important; border-color: transparent !important;
}
#page-knowledge .kbc-btn--ghost:hover { background: #f1f5f9 !important; color: #374151 !important; border-color: #e2e8f0 !important; }
[data-bs-theme="dark"] #page-knowledge .kbc-btn--ghost:hover { background: rgba(255,255,255,.06) !important; color: #cbd5e1 !important; }
#page-knowledge .kbc-btn--del:hover { background: #fef2f2 !important; color: #ef4444 !important; border-color: #fecaca !important; }
[data-bs-theme="dark"] #page-knowledge .kbc-btn--del:hover { background: rgba(239,68,68,.1) !important; color: #f87171 !important; }
#page-knowledge .kbc-divider { width: 1px !important; height: 18px !important; background: #e2e8f0 !important; margin: 0 2px !important; flex-shrink: 0 !important; }
[data-bs-theme="dark"] #page-knowledge .kbc-divider { background: #30363d !important; }

/* ── Grid card ─────────────────────────────────────────────────── */
#page-knowledge .kbc-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}
#page-knowledge .kbc-grid .kbc-row {
  flex-direction: column !important; align-items: stretch !important;
  padding: 0 !important; gap: 0 !important;
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  transition: box-shadow .18s, transform .18s, border-color .18s !important;
  cursor: pointer !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-grid .kbc-row { background: #161b22 !important; border-color: #30363d !important; }
#page-knowledge .kbc-grid .kbc-row:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.1) !important;
  transform: translateY(-2px) !important;
  border-color: #93c5fd !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-grid .kbc-row:hover { box-shadow: 0 6px 20px rgba(0,0,0,.4) !important; border-color: #3b82f6 !important; }
#page-knowledge .kbc-grid .kbc-row::before { display: none !important; }
#page-knowledge .kbc-grid .kbc-row:hover .kbc-title { color: #2563eb !important; }

/* Grid thumb band */
#page-knowledge .kbc-grid .kbc-thumb {
  width: 100% !important; min-width: unset !important; height: 70px !important;
  border-radius: 0 !important; margin: 0 !important;
  background: color-mix(in srgb, var(--kbc-bg, #f1f5f9) 70%, white) !important;
  color: var(--kbc-color, #6b7280) !important;
  font-size: 1.6rem !important;
  border: none !important; border-bottom: 1.5px solid color-mix(in srgb, var(--kbc-color, #6b7280) 12%, transparent) !important;
  box-shadow: none !important; transform: none !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-grid .kbc-thumb {
  background: color-mix(in srgb, var(--kbc-bg, #1e2130) 30%, #161b22) !important;
}
#page-knowledge .kbc-grid .kbc-row:hover .kbc-thumb { transform: none !important; }

/* Grid content */
#page-knowledge .kbc-grid .kbc-content { padding: 12px 14px 8px !important; flex: 1 !important; }
#page-knowledge .kbc-grid .kbc-title {
  font-size: 0.84rem !important; font-weight: 700 !important;
  color: #0f172a !important; letter-spacing: -0.01em !important;
  white-space: normal !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; line-height: 1.4 !important;
  transition: color .12s !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-grid .kbc-title { color: #e2e8f0 !important; }
#page-knowledge .kbc-grid .kbc-type-chip { display: none !important; }

/* Grid actions */
#page-knowledge .kbc-grid .kbc-actions {
  border-top: 1px solid #f1f5f9 !important;
  padding: 8px 12px !important; gap: 4px !important;
  opacity: 1 !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-grid .kbc-actions { border-top-color: #21262d !important; }

/* ── Empty state ───────────────────────────────────────────────── */
#page-knowledge .kbc-empty-wrap {
  min-height: 260px !important;
  border: 2px dashed #e2e8f0 !important;
  border-radius: 14px !important;
  background: #fafbfc !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-empty-wrap { background: #0d1117 !important; border-color: #30363d !important; }
#page-knowledge .kbc-empty { text-align: center !important; padding: 2.5rem !important; }
#page-knowledge .kbc-empty-icon {
  width: 56px !important; height: 56px !important;
  margin: 0 auto 14px !important;
  background: #eff6ff !important; border-radius: 14px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 1.5rem !important; color: #2563eb !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-empty-icon { background: rgba(37,99,235,.15) !important; }
#page-knowledge .kbc-empty-title { font-size: 0.95rem !important; font-weight: 700 !important; color: #1e293b !important; margin-bottom: 6px !important; }
[data-bs-theme="dark"] #page-knowledge .kbc-empty-title { color: #e2e8f0 !important; }
#page-knowledge .kbc-empty-sub { font-size: 0.8rem !important; color: #94a3b8 !important; }

/* ══════════════════════════════════════════════════════════════
   KNOWLEDGE HUB — Final v5 · Fixes: toolbar, always-visible actions, layout
   ══════════════════════════════════════════════════════════════ */

/* ── Toolbar: clean unified pill bar ──────────────────────────── */
#page-knowledge .kb2-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  margin-bottom: 14px !important;
  flex-wrap: nowrap !important;
  height: auto !important;
  overflow: visible !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-toolbar {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}

/* Search section */
#page-knowledge .kb2-search-wrap {
  display: flex !important; align-items: center !important;
  flex: 1 1 200px !important;
  min-width: 0 !important;
  height: 34px !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
  gap: 6px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-search-wrap {
  background: #0d1117 !important;
  border-color: #30363d !important;
}
#page-knowledge .kb2-search-wrap:focus-within {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
  background: #fff !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-search-wrap:focus-within { background: #161b22 !important; }
#page-knowledge .kb2-search-ico { color: #94a3b8 !important; font-size: 0.82rem !important; flex-shrink: 0 !important; }
#page-knowledge .kb2-search-inp {
  border: none !important; outline: none !important; box-shadow: none !important;
  background: transparent !important; font-size: 0.81rem !important;
  color: #0f172a !important; flex: 1 !important; padding: 0 !important; min-width: 0 !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-search-inp { color: #e2e8f0 !important; }
#page-knowledge .kb2-search-inp::placeholder { color: #94a3b8 !important; }
#page-knowledge .kb2-search-kbd { display: inline-flex !important; align-items: center !important; gap: 1px !important; flex-shrink: 0 !important; }
#page-knowledge .kb2-search-kbd span {
  font-size: 0.58rem !important; color: #94a3b8 !important;
  background: #f1f5f9 !important; border: 1px solid #dde3ea !important;
  border-radius: 3px !important; padding: 0 4px !important; line-height: 1.7 !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-search-kbd span { background: #21262d !important; border-color: #30363d !important; }

/* Filter selects */
#page-knowledge .kb2-filter-group {
  display: flex !important; align-items: center !important;
  gap: 5px !important; height: auto !important;
  border: none !important; border-right: none !important; padding: 0 !important;
}
#page-knowledge .kb2-sel {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  height: 34px !important; padding: 0 28px 0 10px !important;
  background-color: #f8fafc !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0.5 0.5l4.5 5 4.5-5' stroke='%2394a3b8' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  border: 1.5px solid #e2e8f0 !important; border-radius: 8px !important;
  font-size: 0.78rem !important; font-weight: 500 !important;
  color: #374151 !important; cursor: pointer !important; outline: none !important;
  transition: border-color .15s !important;
}
[data-bs-theme="dark"] #page-knowledge .kb2-sel {
  background-color: #0d1117 !important; border-color: #30363d !important; color: #94a3b8 !important;
}
#page-knowledge .kb2-sel:hover { border-color: #cbd5e1 !important; background-color: #f1f5f9 !important; }
#page-knowledge .kb2-sel:focus { border-color: #2563eb !important; box-shadow: 0 0 0 2px rgba(37,99,235,.1) !important; }
[data-bs-theme="dark"] #page-knowledge .kb2-sel:hover { background-color: #161b22 !important; border-color: #4b5563 !important; }

/* View toggle */
#page-knowledge #kb-view-toggle-wrap {
  display: flex !important; align-items: center !important;
  background: #f1f5f9 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 3px !important; gap: 2px !important;
  height: 34px !important;
}
[data-bs-theme="dark"] #page-knowledge #kb-view-toggle-wrap { background: #0d1117 !important; border-color: #30363d !important; }
#page-knowledge .kb2-view-btn {
  width: 26px !important; height: 26px !important;
  border: none !important; border-radius: 5px !important;
  background: transparent !important; color: #94a3b8 !important;
  font-size: 0.8rem !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all .1s !important;
}
#page-knowledge .kb2-view-btn:hover { color: #374151 !important; background: rgba(255,255,255,.7) !important; }
[data-bs-theme="dark"] #page-knowledge .kb2-view-btn:hover { background: rgba(255,255,255,.07) !important; color: #cbd5e1 !important; }
#page-knowledge .kb2-view-btn.active { background: #fff !important; color: #2563eb !important; box-shadow: 0 1px 3px rgba(0,0,0,.1) !important; }
[data-bs-theme="dark"] #page-knowledge .kb2-view-btn.active { background: #21262d !important; color: #60a5fa !important; }

/* Toolbar divider & action buttons */
#page-knowledge .kb2-toolbar-actions {
  display: flex !important; align-items: center !important;
  gap: 4px !important; margin-left: auto !important; padding: 0 !important; height: auto !important;
}
#page-knowledge .kb2-btn {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  height: 34px !important; padding: 0 12px !important;
  border-radius: 8px !important; font-size: 0.77rem !important; font-weight: 600 !important;
  border: 1.5px solid transparent !important; cursor: pointer !important;
  transition: all .12s !important; white-space: nowrap !important;
}
#page-knowledge .kb2-btn i { font-size: 0.8rem !important; }
#page-knowledge .kb2-btn--ghost {
  background: #f8fafc !important; color: #475569 !important; border-color: #e2e8f0 !important;
}
#page-knowledge .kb2-btn--ghost:hover { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #1e293b !important; }
[data-bs-theme="dark"] #page-knowledge .kb2-btn--ghost { background: #0d1117 !important; color: #94a3b8 !important; border-color: #30363d !important; }
[data-bs-theme="dark"] #page-knowledge .kb2-btn--ghost:hover { background: #161b22 !important; border-color: #4b5563 !important; color: #e2e8f0 !important; }
#page-knowledge .kb2-btn--primary {
  background: #2563eb !important; color: #fff !important; border-color: #2563eb !important;
  box-shadow: 0 1px 4px rgba(37,99,235,.25) !important;
}
#page-knowledge .kb2-btn--primary:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; box-shadow: 0 3px 10px rgba(37,99,235,.4) !important; }

/* ── List container — clean, no gradient bar ─────────────────── */
#page-knowledge .kbc-list {
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.03) !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-list { background: #161b22 !important; border-color: #30363d !important; }
#page-knowledge .kbc-list::before { display: none !important; }

/* ── List row ──────────────────────────────────────────────────── */
#page-knowledge .kbc-list .kbc-row {
  display: flex !important; align-items: center !important;
  min-height: 60px !important; padding: 0 14px 0 0 !important;
  gap: 0 !important; background: transparent !important;
  border-bottom: 1px solid #f0f4f8 !important;
  transition: background .1s !important; cursor: pointer !important; position: relative !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-list .kbc-row { border-bottom-color: #1e2530 !important; }
#page-knowledge .kbc-list .kbc-row:last-child { border-bottom: none !important; }
#page-knowledge .kbc-list .kbc-row:hover { background: #f8fbff !important; }
[data-bs-theme="dark"] #page-knowledge .kbc-list .kbc-row:hover { background: rgba(255,255,255,.025) !important; }

/* Left color accent bar */
#page-knowledge .kbc-list .kbc-row::before {
  content: '' !important; position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important; background: transparent !important; transition: background .15s !important;
}
#page-knowledge .kbc-list .kbc-row:hover::before { background: var(--kbc-color, #2563eb) !important; }
#page-knowledge .kbc-list .kbc-row:hover .kbc-title { color: #1d4ed8 !important; }
[data-bs-theme="dark"] #page-knowledge .kbc-list .kbc-row:hover .kbc-title { color: #60a5fa !important; }

/* ── Icon ──────────────────────────────────────────────────────── */
#page-knowledge .kbc-list .kbc-thumb {
  width: 38px !important; min-width: 38px !important; height: 38px !important;
  border-radius: 10px !important; margin: 0 14px 0 18px !important;
  background: var(--kbc-bg, #f1f5f9) !important; color: var(--kbc-color, #6b7280) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 1.05rem !important; flex-shrink: 0 !important; border: none !important;
  transition: transform .15s !important;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--kbc-color, #6b7280) 25%, transparent) !important;
}
#page-knowledge .kbc-list .kbc-row:hover .kbc-thumb { transform: scale(1.07) !important; }

/* ── Content ───────────────────────────────────────────────────── */
#page-knowledge .kbc-list .kbc-content {
  flex: 1 !important; min-width: 0 !important;
  padding: 11px 12px 11px 0 !important;
  display: flex !important; flex-direction: column !important; gap: 4px !important;
}
#page-knowledge .kbc-list .kbc-title {
  font-size: 0.875rem !important; font-weight: 700 !important;
  color: #0f172a !important; letter-spacing: -0.01em !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  transition: color .12s !important; display: block !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-list .kbc-title { color: #e2e8f0 !important; }
#page-knowledge .kbc-list .kbc-meta-row {
  display: flex !important; align-items: center !important;
  gap: 5px !important; flex-wrap: nowrap !important;
}
#page-knowledge .kbc-type-chip {
  display: inline-flex !important; align-items: center !important;
  font-size: 0.62rem !important; font-weight: 700 !important;
  padding: 2px 7px !important; border-radius: 4px !important;
  letter-spacing: 0.03em !important; white-space: nowrap !important; flex-shrink: 0 !important;
}
#page-knowledge .kbc-meta-sep { color: #d1d5db !important; font-size: 0.68rem !important; user-select: none !important; }
#page-knowledge .kbc-date {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  font-size: 0.7rem !important; color: #94a3b8 !important; white-space: nowrap !important;
}
#page-knowledge .kbc-date i { font-size: 0.62rem !important; opacity: .6 !important; }
#page-knowledge .kbc-size { font-size: 0.69rem !important; color: #94a3b8 !important; font-family: ui-monospace, monospace !important; }
#page-knowledge .kbc-tags { display: inline-flex !important; align-items: center !important; gap: 3px !important; }
#page-knowledge .kbc-tag {
  font-size: 0.61rem !important; font-weight: 600 !important; padding: 1px 5px !important;
  border-radius: 4px !important; background: #f1f5f9 !important; color: #475569 !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-tag { background: #21262d !important; color: #94a3b8 !important; }

/* ── Source domain column (always visible) ─────────────────────── */
#page-knowledge .kbc-source {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  font-size: 0.68rem !important; color: #94a3b8 !important;
  font-family: ui-monospace,'SF Mono',monospace !important;
  background: #f8fafc !important; border: 1px solid #e2e8f0 !important;
  padding: 3px 9px !important; border-radius: 6px !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
  margin-right: 12px !important;
}
#page-knowledge .kbc-source i { font-size: 0.65rem !important; opacity: .55 !important; }
[data-bs-theme="dark"] #page-knowledge .kbc-source { background: #0d1117 !important; border-color: #30363d !important; color: #6b7280 !important; }

/* ── Actions — ALWAYS VISIBLE ──────────────────────────────────── */
#page-knowledge .kbc-list .kbc-actions {
  display: flex !important; align-items: center !important;
  gap: 3px !important; flex-shrink: 0 !important;
  opacity: 1 !important;
  padding: 0 !important;
}

/* Action buttons */
#page-knowledge .kbc-btn {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  height: 28px !important; padding: 0 9px !important;
  border-radius: 6px !important; font-size: 0.71rem !important; font-weight: 600 !important;
  border: 1.5px solid transparent !important; cursor: pointer !important;
  transition: all .1s !important; white-space: nowrap !important;
}
#page-knowledge .kbc-btn i { font-size: 0.75rem !important; }
#page-knowledge .kbc-btn--primary {
  background: #eff6ff !important; color: #2563eb !important; border-color: #bfdbfe !important;
}
#page-knowledge .kbc-btn--primary:hover {
  background: #2563eb !important; color: #fff !important; border-color: #2563eb !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.3) !important;
}
[data-bs-theme="dark"] #page-knowledge .kbc-btn--primary { background: rgba(37,99,235,.12) !important; color: #60a5fa !important; border-color: rgba(37,99,235,.25) !important; }
[data-bs-theme="dark"] #page-knowledge .kbc-btn--primary:hover { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; }

/* Icon-only action buttons */
#page-knowledge .kbc-btn--icon {
  width: 28px !important; padding: 0 !important;
  background: transparent !important; color: #94a3b8 !important; border-color: transparent !important;
}
#page-knowledge .kbc-btn--icon:hover { background: #f1f5f9 !important; color: #374151 !important; border-color: #e2e8f0 !important; }
[data-bs-theme="dark"] #page-knowledge .kbc-btn--icon:hover { background: rgba(255,255,255,.06) !important; color: #cbd5e1 !important; }
#page-knowledge .kbc-btn--del:hover { background: #fef2f2 !important; color: #ef4444 !important; border-color: #fecaca !important; }
[data-bs-theme="dark"] #page-knowledge .kbc-btn--del:hover { background: rgba(239,68,68,.1) !important; color: #f87171 !important; }

/* ══════════════════════════════════════════════════════════════
   KNOWLEDGE HUB — Command Center Redesign v6
   Enterprise SaaS · kh-* namespace
   ══════════════════════════════════════════════════════════════ */

/* ── Hero header ───────────────────────────────────────────────── */
.kh-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px; padding-bottom: 18px;
  border-bottom: 1.5px solid #e9edf3;
  gap: 16px; flex-wrap: wrap;
}
[data-bs-theme="dark"] .kh-hero { border-bottom-color: #1e2936; }

.kh-hero-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em;
  color: #0f172a; line-height: 1.2;
}
[data-bs-theme="dark"] .kh-hero-title { color: #f1f5f9; }
.kh-hero-title i { font-size: 1.2rem; color: #2563eb; }
.kh-hero-sub { font-size: 0.8rem; color: #64748b; margin-top: 5px; }

.kh-hero-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kh-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 13px; border-radius: 8px;
  font-size: 0.77rem; font-weight: 600;
  border: 1.5px solid #e2e8f0; cursor: pointer;
  background: #fff; color: #374151;
  transition: all .12s;
}
.kh-action-btn i { font-size: 0.8rem; }
.kh-action-btn:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
[data-bs-theme="dark"] .kh-action-btn { background: #161b22; border-color: #30363d; color: #94a3b8; }
[data-bs-theme="dark"] .kh-action-btn:hover { background: #21262d; border-color: #4b5563; color: #e2e8f0; }
.kh-action-btn--primary { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; box-shadow: 0 1px 4px rgba(37,99,235,.3) !important; }
.kh-action-btn--primary:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; box-shadow: 0 3px 12px rgba(37,99,235,.4) !important; }

/* ── Stats strip ───────────────────────────────────────────────── */
.kh-stats-strip {
  display: flex; align-items: center;
  background: #fff; border: 1.5px solid #e9edf3;
  border-radius: 12px; padding: 0 4px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  overflow-x: auto;
}
[data-bs-theme="dark"] .kh-stats-strip { background: #161b22; border-color: #30363d; box-shadow: 0 1px 4px rgba(0,0,0,.25); }

.kh-stat-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; flex-shrink: 0;
}
.kh-stat-ico {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
.kh-stat-n {
  font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em;
  color: #0f172a; line-height: 1;
}
[data-bs-theme="dark"] .kh-stat-n { color: #f1f5f9; }
.kh-stat-lbl { font-size: 0.7rem; color: #94a3b8; font-weight: 500; margin-top: 3px; }
.kh-stat-sep { width: 1px; height: 36px; background: #f0f4f8; flex-shrink: 0; }
[data-bs-theme="dark"] .kh-stat-sep { background: #21262d; }
.kh-stat-sep--flex { flex: 1 1 auto; width: auto; height: 1px; background: none; }

.kh-type-chips-wrap {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 16px; flex-wrap: nowrap; overflow-x: auto;
}
.kh-type-chips-wrap .kb-stat-chip {
  font-size: 0.7rem !important; padding: 3px 10px !important; border-radius: 20px !important;
  font-weight: 600 !important; white-space: nowrap !important;
  border: 1.5px solid currentColor !important; opacity: .75; cursor: pointer;
  transition: all .12s !important;
}
.kh-type-chips-wrap .kb-stat-chip:hover { opacity: 1 !important; box-shadow: 0 2px 6px rgba(0,0,0,.1) !important; }

/* ── Toolbar ───────────────────────────────────────────────────── */
.kh-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.kh-search-wrap {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 240px; min-width: 0;
  background: #fff; border: 1.5px solid #e2e8f0;
  border-radius: 9px; padding: 0 12px; height: 38px;
  transition: border-color .15s, box-shadow .15s;
}
[data-bs-theme="dark"] .kh-search-wrap { background: #0d1117; border-color: #30363d; }
.kh-search-wrap:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); background: #fff; }
[data-bs-theme="dark"] .kh-search-wrap:focus-within { background: #161b22; }
.kh-search-ico { color: #94a3b8; font-size: 0.85rem; flex-shrink: 0; }
.kh-search-inp { border: none; outline: none; background: transparent; font-size: 0.82rem; color: #0f172a; flex: 1; min-width: 0; }
[data-bs-theme="dark"] .kh-search-inp { color: #e2e8f0; }
.kh-search-inp::placeholder { color: #94a3b8; }

.kh-toolbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.kh-sel {
  -webkit-appearance: none; appearance: none;
  height: 38px; padding: 0 28px 0 11px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0.5 0.5l4.5 5 4.5-5' stroke='%2394a3b8' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  border: 1.5px solid #e2e8f0; border-radius: 9px;
  font-size: 0.78rem; font-weight: 500; color: #374151;
  cursor: pointer; outline: none; transition: border-color .15s;
}
[data-bs-theme="dark"] .kh-sel { background-color: #0d1117; border-color: #30363d; color: #94a3b8; }
.kh-sel:hover { border-color: #cbd5e1; }
.kh-sel:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.1); }
[data-bs-theme="dark"] .kh-sel:hover { background-color: #161b22; border-color: #4b5563; }

.kh-view-pills {
  display: flex; align-items: center;
  background: #f1f5f9; border: 1.5px solid #e2e8f0;
  border-radius: 8px; padding: 3px; gap: 2px;
}
[data-bs-theme="dark"] .kh-view-pills { background: #0d1117; border-color: #30363d; }
.kh-view-btn {
  width: 28px; height: 28px; border: none; border-radius: 5px;
  background: transparent; color: #94a3b8; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .1s;
}
.kh-view-btn:hover { background: rgba(255,255,255,.7); color: #374151; }
.kh-view-btn.active { background: #fff; color: #2563eb; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
[data-bs-theme="dark"] .kh-view-btn.active { background: #21262d; color: #60a5fa; }
[data-bs-theme="dark"] .kh-view-btn:hover { background: rgba(255,255,255,.06); color: #cbd5e1; }

/* ── Body layout ───────────────────────────────────────────────── */
.kh-body { display: flex; gap: 18px; align-items: flex-start; }
.kh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.kh-sidebar { width: 272px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }

/* ── Section ───────────────────────────────────────────────────── */
.kh-section { display: flex; flex-direction: column; gap: 12px; }
.kh-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; border-bottom: 1.5px solid #f0f4f8;
}
[data-bs-theme="dark"] .kh-section-hdr { border-bottom-color: #1e2530; }
.kh-section-hdr-left { display: flex; align-items: center; gap: 7px; }
.kh-section-hdr-left i { font-size: 0.95rem; color: #64748b; }
.kh-section-hdr-left span { font-size: 0.83rem; font-weight: 700; color: #374151; letter-spacing: -0.01em; }
[data-bs-theme="dark"] .kh-section-hdr-left span { color: #94a3b8; }
[data-bs-theme="dark"] .kh-section-hdr-left i { color: #4b5563; }
.kh-section-badge {
  font-size: 0.65rem; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; background: #f1f5f9; color: #64748b;
}
[data-bs-theme="dark"] .kh-section-badge { background: #21262d; color: #64748b; }
.kh-section-badge--blue { background: #eff6ff; color: #2563eb; }
[data-bs-theme="dark"] .kh-section-badge--blue { background: rgba(37,99,235,.15); color: #60a5fa; }

/* ── Project workspace cards ───────────────────────────────────── */
.kh-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 10px;
}
.kh-proj-card {
  background: #fff; border: 1.5px solid #e9edf3;
  border-radius: 12px; padding: 16px;
  cursor: pointer; transition: all .15s;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
}
[data-bs-theme="dark"] .kh-proj-card { background: #161b22; border-color: #30363d; }
.kh-proj-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--kh-proj-color, #2563eb); border-radius: 12px 12px 0 0;
}
.kh-proj-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); border-color: #c7d7f0; }
[data-bs-theme="dark"] .kh-proj-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.35); border-color: #3b82f6; }

.kh-proj-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kh-proj-ico {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.kh-proj-arrow { font-size: 0.75rem; color: #cbd5e1; margin-top: 4px; flex-shrink: 0; }
.kh-proj-name { font-size: 0.82rem; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; line-height: 1.3; flex: 1; }
[data-bs-theme="dark"] .kh-proj-name { color: #e2e8f0; }
.kh-proj-count { font-size: 1.5rem; font-weight: 800; color: #0f172a; letter-spacing: -0.04em; line-height: 1; }
[data-bs-theme="dark"] .kh-proj-count { color: #f1f5f9; }
.kh-proj-count span { font-size: 0.7rem; font-weight: 500; color: #94a3b8; margin-left: 3px; }

/* Progress bar */
.kh-proj-bar {
  display: flex; height: 5px; border-radius: 10px; overflow: hidden;
  background: #f1f5f9; gap: 1px;
}
[data-bs-theme="dark"] .kh-proj-bar { background: #21262d; }
.kh-proj-bar-seg { border-radius: 10px; min-width: 4px; }
.kh-proj-bar-seg--green { background: #10b981; }
.kh-proj-bar-seg--amber { background: #f59e0b; }
.kh-proj-bar-seg--blue { background: #3b82f6; }

/* Status pills */
.kh-proj-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.kh-proj-pill {
  font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  background: #f1f5f9; color: #64748b;
}
[data-bs-theme="dark"] .kh-proj-pill { background: #21262d; color: #64748b; }
.kh-proj-pill--green { background: #d1fae5; color: #059669; }
.kh-proj-pill--amber { background: #fef9c3; color: #d97706; }
.kh-proj-pill--blue { background: #dbeafe; color: #2563eb; }
[data-bs-theme="dark"] .kh-proj-pill--green { background: rgba(16,185,129,.12); color: #34d399; }
[data-bs-theme="dark"] .kh-proj-pill--amber { background: rgba(245,158,11,.12); color: #fbbf24; }
[data-bs-theme="dark"] .kh-proj-pill--blue { background: rgba(59,130,246,.12); color: #60a5fa; }

/* ── Pinned strip ──────────────────────────────────────────────── */
.kh-pinned-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.kh-pinned-card {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1.5px solid #e9edf3; border-radius: 10px;
  padding: 9px 13px; cursor: pointer; transition: all .12s;
  min-width: 0; flex: 0 1 200px;
}
[data-bs-theme="dark"] .kh-pinned-card { background: #161b22; border-color: #30363d; }
.kh-pinned-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); border-color: #93c5fd; }
.kh-pinned-ico { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }
.kh-pinned-name { font-size: 0.76rem; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bs-theme="dark"] .kh-pinned-name { color: #e2e8f0; }
.kh-pinned-type { font-size: 0.63rem; color: #94a3b8; }

/* ── Document list / grid (inherited kbc-* + enhancements) ──────── */
/* Favorite toggle button */
.kh-fav-btn {
  width: 30px; min-width: 30px; height: 30px;
  border: none; background: transparent; cursor: pointer;
  color: #d1d5db; font-size: 0.85rem; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s; flex-shrink: 0; margin-left: 10px;
}
.kh-fav-btn:hover { color: #f59e0b; background: #fef9c3; }
.kh-fav-btn--active { color: #f59e0b !important; }
[data-bs-theme="dark"] .kh-fav-btn { color: #374151; }
[data-bs-theme="dark"] .kh-fav-btn:hover { background: rgba(245,158,11,.1); }
[data-bs-theme="dark"] .kh-fav-btn--active { color: #fbbf24 !important; }

/* Status badge */
.kh-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.62rem; font-weight: 700; padding: 3px 8px;
  border-radius: 5px; white-space: nowrap; flex-shrink: 0;
  letter-spacing: 0.02em; margin-right: 12px;
}
.kh-status-badge i { font-size: 0.65rem; }
.kh-status--green { background: #d1fae5; color: #059669; border: 1px solid #a7f3d0; }
.kh-status--amber { background: #fef9c3; color: #d97706; border: 1px solid #fde68a; }
.kh-status--blue  { background: #dbeafe; color: #2563eb; border: 1px solid #bfdbfe; }
.kh-status--gray  { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
[data-bs-theme="dark"] .kh-status--green { background: rgba(16,185,129,.12); color: #34d399; border-color: rgba(52,211,153,.2); }
[data-bs-theme="dark"] .kh-status--amber { background: rgba(245,158,11,.12); color: #fbbf24; border-color: rgba(251,191,36,.2); }
[data-bs-theme="dark"] .kh-status--blue  { background: rgba(37,99,235,.12); color: #60a5fa; border-color: rgba(96,165,250,.2); }
[data-bs-theme="dark"] .kh-status--gray  { background: #21262d; color: #64748b; border-color: #30363d; }

/* ── Sidebar cards ─────────────────────────────────────────────── */
.kh-side-card {
  background: #fff; border: 1.5px solid #e9edf3;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
[data-bs-theme="dark"] .kh-side-card { background: #161b22; border-color: #30363d; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.kh-side-card-hdr {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.75rem; font-weight: 700; color: #475569;
  padding: 11px 14px; border-bottom: 1px solid #f1f5f9;
  letter-spacing: 0.01em;
}
[data-bs-theme="dark"] .kh-side-card-hdr { color: #64748b; border-bottom-color: #1e2530; }
.kh-side-card-hdr i { font-size: 0.82rem; color: #94a3b8; }

/* Recently accessed list */
.kh-side-list { padding: 6px; }
.kh-recent-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 8px; cursor: pointer;
  transition: background .1s;
}
.kh-recent-item:hover { background: #f8fafc; }
[data-bs-theme="dark"] .kh-recent-item:hover { background: rgba(255,255,255,.03); }
.kh-recent-ico { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; flex-shrink: 0; }
.kh-recent-name { font-size: 0.75rem; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bs-theme="dark"] .kh-recent-name { color: #e2e8f0; }
.kh-recent-type { font-size: 0.62rem; color: #94a3b8; }

/* Activity feed */
.kh-activity-feed { padding: 8px 14px 10px; display: flex; flex-direction: column; gap: 0; }
.kh-activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f8fafc; }
[data-bs-theme="dark"] .kh-activity-item { border-bottom-color: #1e2530; }
.kh-activity-item:last-child { border-bottom: none; }
.kh-activity-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.kh-activity-text { font-size: 0.74rem; color: #374151; line-height: 1.5; }
[data-bs-theme="dark"] .kh-activity-text { color: #94a3b8; }
.kh-activity-text strong { font-weight: 700; color: #0f172a; }
[data-bs-theme="dark"] .kh-activity-text strong { color: #e2e8f0; }
.kh-activity-time { font-size: 0.65rem; color: #94a3b8; margin-top: 1px; }

/* Side empty */
.kh-side-empty { padding: 16px 14px; font-size: 0.75rem; color: #94a3b8; text-align: center; }

/* Upload card */
.kh-upload-card { cursor: pointer; transition: all .15s; }
.kh-upload-card:hover { border-color: #93c5fd !important; box-shadow: 0 3px 10px rgba(37,99,235,.1) !important; }
.kh-upload-zone {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px; gap: 6px; text-align: center;
}
.kh-upload-ico {
  width: 42px; height: 42px; border-radius: 10px;
  background: #eff6ff; color: #2563eb; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
[data-bs-theme="dark"] .kh-upload-ico { background: rgba(37,99,235,.15); color: #60a5fa; }
.kh-upload-label { font-size: 0.78rem; font-weight: 600; color: #374151; }
[data-bs-theme="dark"] .kh-upload-label { color: #94a3b8; }
.kh-upload-sub { font-size: 0.66rem; color: #94a3b8; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .kh-sidebar { display: none; }
  .kh-body { display: block; }
  .kh-main { gap: 16px; }
}
@media (max-width: 760px) {
  .kh-projects-grid { grid-template-columns: repeat(2, 1fr); }
  .kh-hero { flex-direction: column; gap: 12px; }
  .kh-stats-strip { overflow-x: auto; }
  .kh-toolbar { gap: 6px; }
  .kh-toolbar-right { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════
   COMMAND PALETTE — ⌘K Global Search
   ══════════════════════════════════════════════════════════════ */

/* ── Topbar trigger button ─────────────────────────────────────── */
.cmd-trigger {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px 0 10px;
  background: var(--bs-tertiary-bg, #f8fafc);
  border: 1.5px solid var(--bs-border-color, #e2e8f0);
  border-radius: 9px; cursor: pointer;
  transition: all .15s; margin: 0 8px;
  max-width: 280px; min-width: 180px;
  color: var(--bs-secondary-color, #94a3b8);
}
.cmd-trigger:hover {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
  background: #fff;
  color: #374151;
}
[data-bs-theme="dark"] .cmd-trigger:hover { background: #161b22; color: #cbd5e1; }
.cmd-trigger-ico { font-size: 0.82rem; flex-shrink: 0; }
.cmd-trigger-text { font-size: 0.78rem; font-weight: 400; flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-trigger-kbd { display: inline-flex; gap: 2px; flex-shrink: 0; }
.cmd-trigger-kbd kbd {
  font-size: 0.6rem; font-family: inherit;
  background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #e2e8f0);
  border-radius: 3px; padding: 1px 5px; line-height: 1.6;
  color: var(--bs-secondary-color, #94a3b8); font-weight: 600;
}
[data-bs-theme="dark"] .cmd-trigger-kbd kbd { background: #21262d; border-color: #30363d; }

/* ── Overlay backdrop ──────────────────────────────────────────── */
.cmd-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10vh;
  opacity: 0; pointer-events: none;
  transition: opacity .18s;
}
.cmd-overlay--visible {
  opacity: 1; pointer-events: all;
}

/* ── Modal card ────────────────────────────────────────────────── */
.cmd-modal {
  width: 100%; max-width: 620px; margin: 0 16px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15,23,42,.25), 0 4px 16px rgba(15,23,42,.1);
  overflow: hidden;
  transform: translateY(-10px) scale(.98);
  transition: transform .18s cubic-bezier(.34,1.2,.64,1);
  display: flex; flex-direction: column;
  max-height: 74vh;
}
[data-bs-theme="dark"] .cmd-modal {
  background: #161b22; border-color: #30363d;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.4);
}
.cmd-overlay--visible .cmd-modal { transform: translateY(0) scale(1); }

/* ── Search header ─────────────────────────────────────────────── */
.cmd-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1.5px solid #f0f4f8;
  flex-shrink: 0;
}
[data-bs-theme="dark"] .cmd-header { border-bottom-color: #21262d; }
.cmd-header-ico { font-size: 1.05rem; color: #94a3b8; flex-shrink: 0; }
.cmd-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 1rem; font-weight: 400; color: #0f172a;
  min-width: 0;
}
[data-bs-theme="dark"] .cmd-input { color: #f1f5f9; }
.cmd-input::placeholder { color: #94a3b8; }
.cmd-clear-btn {
  width: 24px; height: 24px; border: none; background: #f1f5f9;
  border-radius: 5px; cursor: pointer; color: #94a3b8;
  font-size: 0.75rem; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .1s; opacity: 0;
}
.cmd-input:not(:placeholder-shown) ~ .cmd-clear-btn { opacity: 1; }
.cmd-clear-btn:hover { background: #fee2e2; color: #ef4444; }
[data-bs-theme="dark"] .cmd-clear-btn { background: #21262d; }

/* ── Scrollable results body ───────────────────────────────────── */
.cmd-body {
  overflow-y: auto; flex: 1;
  padding: 6px;
}
.cmd-body::-webkit-scrollbar { width: 4px; }
.cmd-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
[data-bs-theme="dark"] .cmd-body::-webkit-scrollbar-thumb { background: #30363d; }

/* ── Group ─────────────────────────────────────────────────────── */
.cmd-group { margin-bottom: 4px; }
.cmd-group-label {
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #94a3b8;
  padding: 8px 10px 4px; user-select: none;
}
[data-bs-theme="dark"] .cmd-group-label { color: #4b5563; }

/* ── Item ──────────────────────────────────────────────────────── */
.cmd-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
  transition: background .08s; gap: 8px;
  position: relative;
}
.cmd-item:hover,
.cmd-item--active {
  background: #eff6ff;
}
[data-bs-theme="dark"] .cmd-item:hover,
[data-bs-theme="dark"] .cmd-item--active {
  background: rgba(37,99,235,.12);
}
.cmd-item--active { background: #eff6ff; }

.cmd-item-l { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }

/* Color dot (task status indicator) */
.cmd-item-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* Icon box */
.cmd-item-ico {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  background: #f1f5f9; color: #475569;
}
[data-bs-theme="dark"] .cmd-item-ico { background: #21262d; color: #94a3b8; }
.cmd-item--active .cmd-item-ico { background: #dbeafe; color: #2563eb; }
[data-bs-theme="dark"] .cmd-item--active .cmd-item-ico { background: rgba(37,99,235,.2); color: #60a5fa; }

.cmd-item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cmd-item-label {
  font-size: 0.845rem; font-weight: 600; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-bs-theme="dark"] .cmd-item-label { color: #e2e8f0; }
.cmd-item-sub {
  font-size: 0.7rem; color: #94a3b8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Enter hint icon — visible only on active item */
.cmd-item-enter {
  font-size: 0.75rem; color: #cbd5e1; flex-shrink: 0;
  opacity: 0; transition: opacity .1s;
}
.cmd-item--active .cmd-item-enter { opacity: 1; color: #2563eb; }
[data-bs-theme="dark"] .cmd-item--active .cmd-item-enter { color: #60a5fa; }

/* Highlighted search match */
.cmd-hl {
  background: #fef9c3; color: #92400e;
  border-radius: 2px; padding: 0 1px;
  font-style: normal;
}
[data-bs-theme="dark"] .cmd-hl { background: rgba(245,158,11,.25); color: #fcd34d; }

/* ── Empty state ───────────────────────────────────────────────── */
.cmd-empty {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 36px 20px;
  color: #94a3b8; font-size: 0.85rem;
}
.cmd-empty-ico { font-size: 1.4rem; }

/* ── Footer ────────────────────────────────────────────────────── */
.cmd-footer {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  border-top: 1.5px solid #f0f4f8;
  flex-shrink: 0;
}
[data-bs-theme="dark"] .cmd-footer { border-top-color: #21262d; }
.cmd-hint {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.67rem; color: #94a3b8;
}
.cmd-hint kbd {
  font-size: 0.6rem; font-family: inherit;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 3px; padding: 1px 5px; line-height: 1.6;
  color: #64748b; font-weight: 600;
}
[data-bs-theme="dark"] .cmd-hint kbd { background: #21262d; border-color: #30363d; color: #94a3b8; }
.cmd-hint--right { margin-left: auto; font-weight: 700; color: #cbd5e1; font-size: 0.65rem; letter-spacing: 0.03em; }
[data-bs-theme="dark"] .cmd-hint--right { color: #374151; }


/* ══════════════════════════════════════════════════════════════
   NOTIFICATIONS — Bell icon + panel
   ══════════════════════════════════════════════════════════════ */

/* ── Bell button ─────────────────────────────────────────────── */
.notif-bell-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent;
  border: none; border-radius: 8px;
  cursor: pointer; padding: 0;
  color: var(--text-secondary, #64748b);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.notif-bell-btn:hover,
.notif-bell-btn--active {
  background: var(--bg-hover, rgba(0,0,0,0.06));
  color: var(--text-primary, #0f172a);
}
.notif-bell-ico { font-size: 1.15rem; line-height: 1; }
[data-bs-theme="dark"] .notif-bell-btn { color: #94a3b8; }
[data-bs-theme="dark"] .notif-bell-btn:hover,
[data-bs-theme="dark"] .notif-bell-btn--active { background: rgba(255,255,255,0.08); color: #f1f5f9; }

/* Pulse animation when there are unread notifications */
@keyframes notif-pulse {
  0%, 100% { transform: scale(1); }
  30%       { transform: scale(1.25) rotate(-8deg); }
  60%       { transform: scale(1.1)  rotate(6deg); }
}
.notif-bell-btn--unread .notif-bell-ico {
  animation: notif-pulse 2.5s ease-in-out infinite;
  color: #2563eb;
}
[data-bs-theme="dark"] .notif-bell-btn--unread .notif-bell-ico { color: #60a5fa; }

/* ── Unread badge ─────────────────────────────────────────────── */
.notif-badge {
  position: absolute; top: 3px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #ef4444; color: #fff;
  font-size: 0.6rem; font-weight: 700; line-height: 16px;
  border-radius: 8px; text-align: center;
  border: 2px solid var(--topbar-bg, #fff);
  pointer-events: none;
}
[data-bs-theme="dark"] .notif-badge { border-color: #0f172a; }

/* ── Panel ────────────────────────────────────────────────────── */
.notif-panel {
  position: fixed; z-index: 9999;
  width: 360px; max-width: calc(100vw - 16px);
  max-height: 480px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: notif-panel-in 0.15s ease;
}
@keyframes notif-panel-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
[data-bs-theme="dark"] .notif-panel {
  background: #1e2533;
  border-color: #2d3748;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Panel header */
.notif-panel-head {
  display: flex; align-items: center;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
}
[data-bs-theme="dark"] .notif-panel-head { border-color: #2d3748; }

.notif-panel-title {
  font-size: 0.85rem; font-weight: 700;
  color: var(--text-primary, #0f172a);
  flex: 1;
}
[data-bs-theme="dark"] .notif-panel-title { color: #f1f5f9; }

.notif-mark-all {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 500;
  color: #2563eb; background: none; border: none;
  cursor: pointer; padding: 3px 8px; border-radius: 6px;
  transition: background 0.12s;
}
.notif-mark-all:hover { background: #eff6ff; }
[data-bs-theme="dark"] .notif-mark-all { color: #60a5fa; }
[data-bs-theme="dark"] .notif-mark-all:hover { background: rgba(96,165,250,0.1); }

/* Panel body / scroll */
.notif-panel-body {
  overflow-y: auto; flex: 1;
}
.notif-panel-body::-webkit-scrollbar { width: 4px; }
.notif-panel-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
[data-bs-theme="dark"] .notif-panel-body::-webkit-scrollbar-thumb { background: #374151; }

/* ── Notification item ───────────────────────────────────────── */
.notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-color, #f1f5f9);
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-hover, #f8fafc); }
.notif-item--unread { background: #eff6ff; }
[data-bs-theme="dark"] .notif-item { border-color: #2d3748; }
[data-bs-theme="dark"] .notif-item:hover { background: rgba(255,255,255,0.04); }
[data-bs-theme="dark"] .notif-item--unread { background: rgba(37,99,235,0.08); }

/* Dot icon */
.notif-dot {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  flex-shrink: 0; margin-top: 1px;
  font-size: 0.85rem;
}
.notif-dot--blue  { background: #dbeafe; color: #2563eb; }
.notif-dot--amber { background: #fef3c7; color: #d97706; }
.notif-dot--gray  { background: #f1f5f9; color: #64748b; }
[data-bs-theme="dark"] .notif-dot--blue  { background: rgba(37,99,235,0.18); color: #60a5fa; }
[data-bs-theme="dark"] .notif-dot--amber { background: rgba(217,119,6,0.18);  color: #fbbf24; }
[data-bs-theme="dark"] .notif-dot--gray  { background: rgba(255,255,255,0.07); color: #94a3b8; }

/* Item body text */
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-primary, #0f172a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-item-sub {
  font-size: 0.72rem; color: var(--text-secondary, #64748b);
  margin-top: 2px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.notif-item-time {
  font-size: 0.68rem; color: #94a3b8; margin-top: 4px;
}
[data-bs-theme="dark"] .notif-item-title { color: #f1f5f9; }
[data-bs-theme="dark"] .notif-item-sub   { color: #94a3b8; }

/* Unread indicator dot */
.notif-unread-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2563eb; flex-shrink: 0; margin-top: 6px;
}
[data-bs-theme="dark"] .notif-unread-dot { background: #60a5fa; }

/* Dismiss button */
.notif-dismiss {
  background: none; border: none; cursor: pointer;
  color: #94a3b8; font-size: 0.75rem;
  padding: 2px 4px; border-radius: 4px;
  flex-shrink: 0; opacity: 0;
  transition: opacity 0.1s, background 0.1s;
}
.notif-item:hover .notif-dismiss { opacity: 1; }
.notif-dismiss:hover { background: #f1f5f9; color: #ef4444; }
[data-bs-theme="dark"] .notif-dismiss:hover { background: rgba(239,68,68,0.12); }

/* ── Empty state ─────────────────────────────────────────────── */
.notif-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 20px; gap: 8px;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.8rem;
}
.notif-empty-ico { font-size: 2rem; opacity: 0.4; }