/* ==========================================================================
   Krio Workforce OS — core tokens + app shell
   ========================================================================== */

:root{
  /* brand */
  --brand:#4C2AFA;
  --brand-600:#3E1FD6;
  --brand-700:#3318B0;
  --brand-soft:#EEEAFF;
  --brand-soft-2:#E2DCFF;

  /* status */
  --ok:#0F9D58;
  --ok-soft:#E4F6EC;
  --warn:#F08C00;
  --warn-soft:#FDF0DC;
  --danger:#E0344B;
  --danger-soft:#FCE7EA;
  --info:#1F7AE0;
  --info-soft:#E3EFFC;
  --idle:#D9A400;
  --idle-soft:#FBF3D6;

  /* text sitting ON a *-soft background. Deliberately darker than the base
     status colour so small bold labels stay readable; inverted in dark mode. */
  --ok-ink:#116B3E;
  --warn-ink:#92400E;
  --danger-ink:#9F1239;
  --info-ink:#1E40AF;
  --brand-ink:#3318B0;
  /* The two the set was missing, chosen the same way: the darkest point that
     keeps the hue and clears 4.5:1 on its own soft background. */
  --idle-ink:#8B6900;
  --mute-ink:#5C6178;

  /* neutrals — light */
  --canvas:#F4F5F9;
  --surface:#FFFFFF;
  --surface-2:#FAFAFD;
  --surface-3:#F1F2F7;
  --line:#E4E6EF;
  --line-strong:#D3D6E4;
  --ink:#101426;
  --ink-2:#3A405A;
  --muted:#727892;
  --muted-2:#9096AC;

  /* sidebar — light mode default */
  --nav-bg:#FFFFFF;
  --nav-bg-2:#F4F5F9;
  --nav-line:#E4E6EF;
  --nav-text:#505773;
  --nav-text-strong:#101426;

  /* geometry */
  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --sidebar-w:262px;
  --sidebar-w-collapsed:76px;
  --topbar-h:66px;
  --shadow-1:0 1px 2px rgba(16,20,38,.06);
  --shadow-2:0 4px 16px rgba(16,20,38,.08);
  --shadow-3:0 18px 48px rgba(16,20,38,.16);

  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

html[data-theme="dark"]{
  --canvas:#0A0C1A;
  --surface:#12152A;
  --surface-2:#171B33;
  --surface-3:#1D2140;
  --line:#252A4A;
  --line-strong:#333961;
  --ink:#F1F2F8;
  --ink-2:#C7CBE0;
  --muted:#8E94B3;
  --muted-2:#6E7495;
  --nav-bg:#0B0D1C;
  --nav-bg-2:#14172E;
  --nav-line:#20243F;
  --brand-soft:#231C52;
  --brand-soft-2:#2C2266;
  --ok-soft:#0F2A20;
  --warn-soft:#33240C;
  --danger-soft:#361420;
  --info-soft:#0F2440;
  --idle-soft:#2E2609;
  --ok-ink:#6EE7B7;
  --warn-ink:#FCD34D;
  --danger-ink:#FDA4AF;
  --info-ink:#93C5FD;
  --brand-ink:#B9A6FF;
  /* Without these two the light values would carry into dark mode, putting
     dark gold on a dark background. Measured on their own dark surfaces:
     10.42:1 and 7.62:1. */
  --idle-ink:#FCD34D;
  --mute-ink:#AEB4D0;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 4px 16px rgba(0,0,0,.45);
  --shadow-3:0 18px 48px rgba(0,0,0,.6);
}

*{ -webkit-tap-highlight-color:transparent }
body{
  font-family:var(--sans);
  background:var(--canvas);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  margin:0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:var(--mono); font-feature-settings:"tnum"; letter-spacing:-.02em }
a{ color:var(--brand); text-decoration:none }
a:hover{ color:var(--brand-600) }
h1,h2,h3,h4,h5,h6{ color:var(--ink); font-weight:650; letter-spacing:-.015em }
hr{ border-color:var(--line); opacity:1 }
::selection{ background:var(--brand-soft-2); color:var(--ink) }

:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px }
.skip-link{
  position:fixed; top:-60px; left:12px; z-index:2000; background:var(--brand); color:#fff;
  padding:10px 16px; border-radius:0 0 var(--r-sm) var(--r-sm); transition:top .18s;
}
.skip-link:focus{ top:0; color:#fff }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* scrollbars */
*::-webkit-scrollbar{ width:9px; height:9px }
*::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px }
*::-webkit-scrollbar-track{ background:transparent }

/* ================= SIDEBAR ================= */
.app-sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w);
  background:var(--nav-bg); border-right:1px solid var(--nav-line);
  display:flex; flex-direction:column; z-index:1035;
  transition:width .2s ease;
}
html[data-sidebar="collapsed"] .app-sidebar{ width:var(--sidebar-w-collapsed) }

.sidebar-brand{
  height:var(--topbar-h); flex:none; display:flex; align-items:center; gap:8px;
  padding:0 14px 0 18px; border-bottom:1px solid var(--nav-line);
}
.brand-mark{ display:flex; align-items:center; gap:10px; min-width:0; flex:1 }
.brand-glyph{
  width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--brand) 0%,#7B5CFF 100%);
  color:#fff; font-weight:700; font-size:17px; letter-spacing:-.04em;
  box-shadow:0 4px 14px rgba(76,42,250,.45);
}
.brand-glyph.xs{ width:18px; height:18px; font-size:11px; border-radius:5px; box-shadow:none }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0 }
.brand-text strong{ color:var(--nav-text-strong); font-size:15px; letter-spacing:-.02em }
.brand-text small{ color:var(--nav-text); font-size:10.5px; text-transform:uppercase; letter-spacing:.13em }
.sidebar-pin{
  flex:none; width:28px; height:28px; border-radius:8px; border:1px solid var(--nav-line);
  background:transparent; color:var(--nav-text); display:grid; place-items:center; font-size:12px;
}
.sidebar-pin:hover{ color:var(--nav-text-strong); background:var(--nav-bg-2) }

.sidebar-nav{ flex:1; overflow-y:auto; overflow-x:hidden; padding:12px 12px 18px; scrollbar-width:none; -ms-overflow-style:none }
.sidebar-nav::-webkit-scrollbar{ display:none; width:0; height:0 }
.nav-group-label{
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); padding:16px 10px 7px;
}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:8.5px 11px; border-radius:var(--r-sm);
  color:var(--nav-text); font-weight:500; font-size:13.4px; white-space:nowrap; position:relative;
  transition:background .14s,color .14s;
}
.nav-item i{ font-size:16px; width:18px; flex:none; text-align:center }
.nav-item:hover{ background:var(--nav-bg-2); color:var(--nav-text-strong) }
.nav-item.active{ background:var(--brand-soft); color:var(--brand); font-weight:600 }
.nav-item.active i{ color:var(--brand) }
.nav-item.active::before{
  content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
  background:var(--brand); border-radius:0 3px 3px 0;
}
.nav-item .nav-count{
  margin-left:auto; font-family:var(--mono); font-size:11px; font-weight:700; min-width:20px; height:20px; padding:0 6px;
  border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--nav-bg-2); color:var(--nav-text-strong);
}
.nav-item .nav-count.hot,
.nav-item[data-nav="approvals"] .nav-count,
.nav-item[data-nav="leave-requests"] .nav-count{
  background:#ef4444 !important; color:#ffffff !important; font-weight:700;
  border-radius:50% !important; min-width:22px; width:22px; height:22px; padding:0 !important;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 0 10px rgba(239,68,68,0.55) !important;
  border:none !important;
}

/* ================= LEAVE REQUESTS WORLD-CLASS REDESIGN ================= */
.lr-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.lr-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface, #ffffff);
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--line, #e2e8f0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.lr-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #64748b);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.lr-tab i {
  font-size: 14px;
}
.lr-tab:hover {
  color: var(--ink, #0f172a);
  background: var(--surface-2, #f1f5f9);
}
.lr-tab.active {
  background: var(--brand, #4C2AFA) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(76, 42, 250, 0.35);
}
.lr-tab.active i {
  color: #ffffff !important;
}
.lr-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}
.lr-info-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e2e8f0);
  color: var(--muted, #64748b);
  font-size: 12.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.lr-info-badge i {
  color: #10b981;
  font-size: 16px;
}

/* Card & Table */
.lr-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 28px;
}
.lr-card-header {
  padding: 20px 24px;
  background: #ffffff;
  border-bottom: 1px solid var(--line, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lr-header-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  background: rgba(76, 42, 250, 0.1);
  color: var(--brand, #4C2AFA);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.lr-kpi-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 135px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.lr-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border-color: var(--brand-soft, #4C2AFA);
}
.lr-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.lr-table th {
  background: #f8fafc !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #64748b !important;
  padding: 14px 24px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.lr-table td {
  padding: 20px 24px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #ffffff;
}
.lr-table tr:hover td {
  background: #fafafa !important;
}
.lr-table tr:last-child td {
  border-bottom: none !important;
}

/* User & Details Components */
.lr-emp-box {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lr-emp-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.lr-emp-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.lr-emp-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
  font-family: var(--mono);
}
.lr-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-weight: 600;
  font-size: 13px;
  color: #1e293b;
}
.lr-reason-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  max-width: 320px;
}
.lr-reason-text {
  font-size: 13px;
  color: #1e293b;
  line-height: 1.4;
}
.lr-reason-meta {
  margin-top: 5px;
  font-size: 11px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
}

/* Status Pill */
.lr-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.lr-status-pending {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
}
.lr-status-approved {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.lr-status-rejected {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* Actions */
.lr-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.lr-btn-reject {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  border: 1px solid #fca5a5 !important;
  background: #ffffff !important;
  color: #ef4444 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.lr-btn-reject:hover {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  transform: translateY(-1px) !important;
}
.lr-btn-approve {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  border: none !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.lr-btn-approve:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5) !important;
  transform: translateY(-1px) !important;
}

.sidebar-foot{ flex:none; padding:12px; border-top:1px solid var(--nav-line) }
.agent-chip{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-sm);
  background:var(--nav-bg-2); border:1px solid var(--nav-line); color:var(--nav-text); cursor:pointer;
}
.agent-chip:hover{ border-color:var(--brand) }
.agent-chip-body{ display:flex; flex-direction:column; min-width:0; flex:1 }
.agent-chip-title{ color:var(--nav-text-strong); font-size:12.5px; font-weight:600 }
.agent-chip-meta{ font-size:10.5px; color:var(--muted-2) }

html[data-sidebar="collapsed"] .brand-text,
html[data-sidebar="collapsed"] .sidebar-pin,
html[data-sidebar="collapsed"] .nav-group-label,
html[data-sidebar="collapsed"] .nav-item span,
html[data-sidebar="collapsed"] .agent-chip-body,
html[data-sidebar="collapsed"] .agent-chip > .bi{ display:none }
html[data-sidebar="collapsed"] .nav-item{ justify-content:center; padding:10px }
html[data-sidebar="collapsed"] .sidebar-brand{ justify-content:center; padding:0 }
html[data-sidebar="collapsed"] .agent-chip{ justify-content:center }
html[data-sidebar="collapsed"] .nav-group-label{ display:block; height:1px; padding:10px 0 0; overflow:hidden; color:transparent }

/* offcanvas nav */
.kw-offcanvas{ background:var(--nav-bg); width:274px }
.kw-offcanvas .offcanvas-header{ border-bottom:1px solid var(--nav-line); height:var(--topbar-h) }
.kw-offcanvas .btn-close{ filter:invert(1) grayscale(1); opacity:.6 }
.kw-offcanvas .offcanvas-body{ padding:6px }

/* ================= MAIN + TOPBAR ================= */
.app-main{ margin-left:var(--sidebar-w); min-height:100vh; transition:margin-left .2s ease }
html[data-sidebar="collapsed"] .app-main{ margin-left:var(--sidebar-w-collapsed) }

.app-topbar{
  position:sticky; top:0; z-index:1020; height:var(--topbar-h);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 18px;
}
.topbar-left{ display:flex; align-items:center; gap:12px; min-width:0 }
.topbar-titles{ min-width:0 }
.page-title{ font-size:17px; margin:0; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.kw-breadcrumb{ display:flex; gap:6px; list-style:none; margin:0 0 1px; padding:0; font-size:11px; color:var(--muted) }
.kw-breadcrumb li+li::before{ content:"/"; margin-right:6px; color:var(--muted-2) }
.kw-breadcrumb a{ color:var(--muted) }
.kw-breadcrumb a:hover{ color:var(--brand) }

.topbar-right{ display:flex; align-items:center; gap:8px }

.icon-btn{
  width:36px; height:36px; flex:none; border-radius:10px; border:1px solid transparent;
  background:transparent; color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; position:relative; transition:.14s;
}
.icon-btn:hover{ background:var(--surface-3); color:var(--ink) }
.icon-btn.on{ background:var(--brand-soft); color:var(--brand); border-color:var(--brand-soft-2) }
.dot-badge{
  position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 4px;
  background:var(--danger); color:#fff; border-radius:99px; font-size:9.5px; font-weight:700;
  display:grid; place-items:center; border:2px solid var(--surface); font-family:var(--mono);
}

.global-search{ position:relative; width:min(330px,32vw) }
.global-search i.bi-search{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted-2); font-size:14px }
.global-search input{
  height:38px; border-radius:10px; padding-left:34px; padding-right:34px; font-size:13px;
  background:var(--surface-3); border:1px solid transparent; color:var(--ink);
}
.global-search input::placeholder{ color:var(--muted-2) }
.global-search input:focus{ background:var(--surface); border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft) }
.global-search kbd{
  position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--muted);
}
.search-results{
  position:absolute; top:44px; left:0; right:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-3); max-height:60vh; overflow:auto; padding:6px; z-index:60;
}
.search-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); cursor:pointer; color:var(--ink) }
.search-item:hover,.search-item.sel{ background:var(--surface-3) }
.search-item small{ color:var(--muted); font-size:11px }
.search-section{ font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted-2); padding:8px 10px 4px; font-weight:700 }

.demo-flag{
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:99px;
  background:var(--brand-soft); color:var(--brand); font-size:11px; font-weight:600; white-space:nowrap;
}
html[data-theme="dark"] .demo-flag{ color:#B9A6FF }

.user-chip{ display:flex; align-items:center; gap:9px; padding:4px 8px 4px 4px; border-radius:99px; border:1px solid var(--line); background:var(--surface) }
.user-chip:hover{ border-color:var(--line-strong) }
.user-chip-body{ flex-direction:column; line-height:1.2; text-align:left }
.user-chip-body strong{ font-size:12.5px }
.user-chip-body small{ font-size:10.5px; color:var(--muted) }

.app-content{ padding:22px 26px 0; max-width:100%; width:100%; box-sizing:border-box }
.app-footer{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:26px 2px 22px; margin-top:26px; border-top:1px solid var(--line);
  color:var(--muted-2); font-size:11.5px;
}

/* ================= PRIMITIVES ================= */
.avatar{
  width:36px; height:36px; border-radius:50%; flex:none; display:inline-grid; place-items:center;
  background:color-mix(in srgb,var(--av,#4C2AFA) 16%,transparent);
  color:var(--av,#4C2AFA); font-weight:650; font-size:12.5px; letter-spacing:-.02em;
  border:1px solid color-mix(in srgb,var(--av,#4C2AFA) 26%,transparent);
}
.avatar-sm{ width:28px; height:28px; font-size:10.5px }
.avatar-lg{ width:64px; height:64px; font-size:21px; border-radius:18px }
.avatar-wrap{ position:relative; flex:none }
.avatar-wrap .presence{
  position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
  border:2px solid var(--surface);
}
.presence.st-active{ background:var(--ok) } .presence.st-idle{ background:var(--idle) }
.presence.st-break{ background:var(--warn) } .presence.st-lunch{ background:var(--info) }
.presence.st-offline{ background:var(--muted-2) }

.pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; position:relative }
.pulse-dot.sm{ width:6px; height:6px }
.pulse-dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--ok);
  animation:pulse 2.4s ease-out infinite; opacity:0;
}
@keyframes pulse{ 0%{ transform:scale(.6); opacity:.9 } 100%{ transform:scale(1.5); opacity:0 } }
@keyframes pulse-dot{ 0%,100%{ opacity:1; box-shadow:0 0 4px currentColor } 50%{ opacity:.4; box-shadow:0 0 10px currentColor } }

/* hide scrollbar on kanban board columns */
.board-col{ overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none }
.board-col::-webkit-scrollbar{ display:none }
.board-col-body{ overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none }
.board-col-body::-webkit-scrollbar{ display:none }

.badge-st{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px;
  font-size:11px; font-weight:600; white-space:nowrap; line-height:1.5; border:1px solid transparent;
}
.badge-st .bullet{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none }
/* Text uses the -ink variants, not the base status colour. These labels are
   11px semibold on a tinted background, where the base colours measured
   2.04:1 (Idle) and 2.21:1 (On Break) against a 4.5:1 requirement — and they
   carry the one thing these screens exist to report. The border keeps the
   base colour, which is decoration and has no contrast requirement. */
.b-ok{ background:var(--ok-soft); color:var(--ok-ink); border-color:color-mix(in srgb,var(--ok) 22%,transparent) }
.b-warn{ background:var(--warn-soft); color:var(--warn-ink); border-color:color-mix(in srgb,var(--warn) 22%,transparent) }
.b-danger{ background:var(--danger-soft); color:var(--danger-ink); border-color:color-mix(in srgb,var(--danger) 22%,transparent) }
.b-info{ background:var(--info-soft); color:var(--info-ink); border-color:color-mix(in srgb,var(--info) 22%,transparent) }
.b-idle{ background:var(--idle-soft); color:var(--idle-ink); border-color:color-mix(in srgb,var(--idle) 26%,transparent) }
.b-brand{ background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand-soft-2) }
.b-mute{ background:var(--surface-3); color:var(--mute-ink); border-color:var(--line) }
html[data-theme="dark"] .b-brand{ color:#B9A6FF }

.card-kw{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
}
.card-kw-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:15px 18px; border-bottom:1px solid var(--line);
}
.card-kw-head h3{ font-size:14px; margin:0 }
.card-kw-head p{ margin:2px 0 0; font-size:11.5px; color:var(--muted) }
.card-kw-body{ padding:18px }
.card-kw-body.tight{ padding:0 }

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:26px 0 13px }
.section-head h2{ font-size:15px; margin:0 }
.section-head p{ margin:2px 0 0; font-size:12px; color:var(--muted) }

.btn{ font-size:13px; font-weight:550; border-radius:10px; padding:8px 14px; transition:.14s }
.btn-brand{ background:var(--brand); border-color:var(--brand); color:#fff }
.btn-brand:hover{ background:var(--brand-600); border-color:var(--brand-600); color:#fff }
.btn-ghost{ background:var(--surface); border:1px solid var(--line); color:var(--ink-2) }
.btn-ghost:hover{ background:var(--surface-3); border-color:var(--line-strong); color:var(--ink) }
.btn-soft{ background:var(--brand-soft); border:1px solid transparent; color:var(--brand) }
.btn-soft:hover{ background:var(--brand-soft-2); color:var(--brand-600) }
.btn-sm{ padding:5px 10px; font-size:12px; border-radius:8px }
.btn-link-sm{ background:none; border:0; color:var(--brand); font-size:11.5px; font-weight:600; padding:0 }

.form-control,.form-select{
  border-radius:9px; border-color:var(--line); background:var(--surface); color:var(--ink);
  font-size:13px; padding:7px 11px;
}
.form-control:focus,.form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); background:var(--surface); color:var(--ink) }
.form-control::placeholder{ color:var(--muted-2) }
.form-label{ font-size:11.5px; font-weight:600; color:var(--ink-2); margin-bottom:5px }
.form-text{ font-size:11px; color:var(--muted) }
.form-check-input{ border-color:var(--line-strong); background-color:var(--surface) }
.form-check-input:checked{ background-color:var(--brand); border-color:var(--brand) }
.form-check-input:focus{ box-shadow:0 0 0 3px var(--brand-soft); border-color:var(--brand) }
.form-switch .form-check-input{ width:38px; height:21px }

.filter-bar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 14px; margin-bottom:16px;
}
.filter-bar .search-field{ position:relative; flex:1 1 220px; min-width:180px }
.filter-bar .search-field i{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted-2); font-size:13px }
.filter-bar .search-field input{ padding-left:32px }
.filter-bar .form-select{ flex:0 1 165px; min-width:140px }
.filter-spacer{ flex:1 1 auto }
.filter-summary{ color:var(--muted); font-size:11.5px; margin-top:-8px; margin-bottom:14px }
.filter-summary i{ color:var(--brand); margin-right:4px }

.seg{ display:inline-flex; background:var(--surface-3); border-radius:10px; padding:3px; gap:2px; flex-wrap:wrap }
.seg button{
  border:0; background:transparent; color:var(--muted); font-size:12px; font-weight:600;
  padding:5px 12px; border-radius:8px; white-space:nowrap;
}
.seg button.active{ background:var(--surface); color:var(--brand); box-shadow:var(--shadow-1) }

.kw-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none }
.kw-tabs::-webkit-scrollbar{ display:none }
.kw-tabs button{
  border:0; background:transparent; padding:11px 14px; font-size:13px; font-weight:550;
  color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap;
}
.kw-tabs button:hover{ color:var(--ink) }
.kw-tabs button.active{ color:var(--brand); border-bottom-color:var(--brand) }

.progress-kw{ height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden }
.progress-kw > span{ display:block; height:100%; border-radius:99px; background:var(--brand); transition:width .5s ease }
.progress-kw.ok > span{ background:var(--ok) }
.progress-kw.warn > span{ background:var(--warn) }
.progress-kw.danger > span{ background:var(--danger) }

.meta-list{ display:grid; gap:10px }
.meta-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12.5px }
.meta-row span:first-child{ color:var(--muted) }
.meta-row strong{ font-weight:600 }

.empty-state{ text-align:center; padding:46px 20px; color:var(--muted) }
.empty-state .es-icon{
  width:52px; height:52px; border-radius:16px; background:var(--surface-3); color:var(--muted-2);
  display:grid; place-items:center; font-size:22px; margin:0 auto 14px;
}
.empty-state h4{ font-size:14px; margin-bottom:5px }
.empty-state p{ font-size:12.5px; max-width:380px; margin:0 auto 16px }

.skel{ background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);
  background-size:400% 100%; animation:shimmer 1.3s ease infinite; border-radius:6px; height:12px }
@keyframes shimmer{ 0%{ background-position:100% 0 } 100%{ background-position:0 0 } }

/* dropdowns / modals / toasts */
.dropdown-menu{
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-3);
  background:var(--surface); padding:6px; font-size:13px; color:var(--ink);
}
.dropdown-item{ border-radius:var(--r-sm); padding:7px 10px; color:var(--ink-2); display:flex; align-items:center; gap:9px }
.dropdown-item:hover,.dropdown-item:focus{ background:var(--surface-3); color:var(--ink) }
.dropdown-item.text-danger:hover{ background:var(--danger-soft) }
.dropdown-divider{ border-color:var(--line) }
.user-menu{ min-width:238px }
.user-menu-head{ display:flex; gap:10px; align-items:center; padding:10px; border-bottom:1px solid var(--line); margin-bottom:6px }
.user-menu-head strong{ display:block; font-size:13px }
.user-menu-head small{ color:var(--muted); font-size:11px }

.notif-menu{ width:min(380px,94vw); padding:0; overflow:hidden }
.notif-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line) }
.notif-list{ max-height:min(420px,60vh); overflow:auto }
.notif-item{ display:flex; gap:11px; padding:11px 14px; border-bottom:1px solid var(--line); cursor:pointer }
.notif-item:hover{ background:var(--surface-2) }
.notif-item.unread{ background:color-mix(in srgb,var(--brand) 4%,var(--surface)) }
.notif-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; font-size:14px }
.notif-item p{ margin:0; font-size:12.5px; color:var(--ink); line-height:1.4 }
.notif-item small{ color:var(--muted-2); font-size:10.5px }
.notif-foot{ display:block; text-align:center; padding:11px; font-size:12px; font-weight:600; background:var(--surface-2) }

.modal-content{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); color:var(--ink) }
.modal-header{ border-bottom:1px solid var(--line); padding:16px 20px }
.modal-title{ font-size:15px }
.modal-body{ padding:20px; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none }
.modal-body::-webkit-scrollbar{ display:none }
.modal-footer{ border-top:1px solid var(--line); padding:13px 20px; gap:8px }
.modal-backdrop.show{ opacity:.55 }
html[data-theme="dark"] .btn-close{ filter:invert(1) grayscale(1) }

.toast-stack{ position:fixed; right:18px; bottom:18px; z-index:2100; display:flex; flex-direction:column; gap:9px; max-width:min(360px,92vw) }
.kw-toast{
  display:flex; gap:11px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--brand); border-radius:var(--r); padding:12px 14px; box-shadow:var(--shadow-3);
  animation:slideIn .22s ease;
}
.kw-toast.ok{ border-left-color:var(--ok) } .kw-toast.warn{ border-left-color:var(--warn) }
.kw-toast.danger{ border-left-color:var(--danger) } .kw-toast.info{ border-left-color:var(--info) }
.kw-toast strong{ font-size:12.5px; display:block }
.kw-toast p{ margin:1px 0 0; font-size:11.5px; color:var(--muted) }
.kw-toast .toast-x{ margin-left:auto; background:none; border:0; color:var(--muted-2); font-size:15px; line-height:1 }
@keyframes slideIn{ from{ transform:translateY(10px); opacity:0 } to{ transform:none; opacity:1 } }

.tooltip-inner{ background:var(--ink); color:var(--surface); font-size:11.5px; border-radius:7px; padding:5px 9px }
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before{ border-top-color:var(--ink) }

/* agent window mockup */
.agent-window{
  position:fixed; right:20px; bottom:20px; width:322px; z-index:1900;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:var(--shadow-3); overflow:hidden; animation:slideIn .2s ease;
}
.agent-window[hidden]{ display:none }
.agent-titlebar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--nav-bg); color:#fff; padding:7px 4px 7px 11px; font-size:11.5px; user-select:none;
}
.agent-titlebar-name{ display:flex; align-items:center; gap:7px; font-weight:600 }
.agent-win-buttons button{ width:30px; height:24px; border:0; background:transparent; color:#B9BFDA; font-size:12px }
.agent-win-buttons button:hover{ background:rgba(255,255,255,.12); color:#fff }
.agent-win-buttons button.close:hover{ background:#E0344B; color:#fff }
.agent-body{ padding:14px }
.agent-status-row{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--ok); margin-bottom:12px }
.agent-emp{ display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:12px }
.agent-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px }
.agent-tile{ background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:9px 10px }
.agent-tile small{ display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-2) }
.agent-tile b{ font-family:var(--mono); font-size:14px; font-weight:600 }
.agent-note{ font-size:11px; color:var(--muted); display:flex; gap:6px; align-items:center; margin-top:10px }

/* misc utility */
.text-muted-kw{ color:var(--muted) !important }
.num{ font-family:var(--mono); font-weight:600; font-feature-settings:"tnum" }
.stack-8{ display:grid; gap:8px } .stack-12{ display:grid; gap:12px } .stack-16{ display:grid; gap:16px }
.hstack-8{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.divider-y{ width:1px; align-self:stretch; background:var(--line) }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px;
  background:var(--surface-3); color:var(--ink-2); font-size:11.5px; font-weight:550; border:1px solid var(--line);
}
.chip.on{ background:var(--brand-soft); color:var(--brand); border-color:var(--brand-soft-2) }
.link-quiet{ color:var(--ink); font-weight:600 }
.link-quiet:hover{ color:var(--brand) }

/* ==========================================================================
   Brand image mark (multi-page shell)
   ========================================================================== */
.brand-glyph-img{width:34px;height:34px;border-radius:10px;flex:0 0 34px;display:block}
.agent-titlebar-name img{vertical-align:-3px;margin-right:2px}
.empty-state .es-art,.error-state .es-art{width:170px;max-width:60%;margin:0 auto 10px;display:block;opacity:.95}
html[data-theme="dark"] .empty-state .es-art,html[data-theme="dark"] .error-state .es-art{opacity:.6;filter:saturate(.7)}

/* ==========================================================================
   Auth (login) screen — Simple & Minimal Centered Card
   ========================================================================== */
.auth-body {
  background: var(--canvas, #F8FAFC);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-shell {
  width: 100%;
  max-width: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card {
  width: 100%;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--line, #E2E8F0);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: var(--shadow-2, 0 10px 30px rgba(0, 0, 0, 0.06));
}

html[data-theme="dark"] .auth-body {
  background: #0B0D1B;
}
html[data-theme="dark"] .auth-card {
  background: #13172E;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.auth-brand {
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-text strong {
  font-size: 18px;
  color: var(--ink, #0F172A);
}
.brand-text small {
  font-size: 11px;
  color: var(--brand, #4C2AFA);
  display: block;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html[data-theme="dark"] .brand-text strong { color: #FFF; }

.auth-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--ink, #0F172A);
}
html[data-theme="dark"] .auth-title { color: #FFF; }

.auth-sub {
  font-size: 13.5px;
  color: var(--muted, #64748B);
  margin: 0 0 20px;
}

.auth-seg {
  width: 100%;
  margin-bottom: 20px;
}
.auth-seg button {
  flex: 1;
}

.input-icon {
  position: relative;
}
.input-icon > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted, #64748B);
  font-size: 14px;
  pointer-events: none;
}
.input-icon .form-control {
  padding-left: 38px;
}
.input-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--muted, #64748B);
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.input-eye:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.auth-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 12px 14px;
  border: 1px solid var(--line, #E2E8F0);
  border-radius: 12px;
  background: var(--surface-2, #F8FAFC);
  font-size: 11.8px;
  line-height: 1.55;
  color: var(--muted, #64748B);
}
.auth-note i {
  color: var(--brand, #4C2AFA);
  font-size: 14px;
  margin-top: 1px;
}

.auth-foot {
  margin: 18px 0 0;
  font-size: 11.8px;
  color: var(--muted, #64748B);
  text-align: center;
}