:root{--orange:#1a1a1a;--navy:#0f172a;--gray:#6a7282;--light:#f8f9fb;--card:#fff;--border:#e5e7eb;--ol:#f1f5f9;--green:#22c55e;--red:#ef4444}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif}
body{font-family:'Inter',sans-serif;background:var(--light);color:var(--navy);overflow:hidden;height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:'cv02','cv03','cv04','cv11'}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.view{display:none;flex-direction:column;height:100vh;width:100%;animation:fadeIn .3s ease}
.view.active{display:flex}
/* TOPBAR */
.topbar{height:56px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;z-index:20}
.topbar-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.topbar-center{display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.topbar-right{display:flex;align-items:center;gap:14px;flex:1;min-width:0;justify-content:flex-end}
.adt-logo{display:flex;align-items:center;gap:6px}
.adt-logo img{height:26px;width:auto;display:block}
.adt-logo svg{width:28px;height:28px}
.adt-logo-text{font-weight:800;font-size:18px;color:var(--navy);letter-spacing:-.5px}
.topbar-page{font-size:14px;font-weight:600;color:var(--navy);margin-left:4px;white-space:nowrap}
.page-back-bar{margin-bottom:14px}
.page-back-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;border:1px solid var(--border);border-radius:20px;background:var(--card);font-size:13px;font-weight:600;color:var(--navy);cursor:pointer;font-family:inherit;transition:.15s}
.page-back-btn:hover{border-color:var(--orange);color:var(--orange)}
.page-back-btn svg{flex-shrink:0}
.sidebar-toggle{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--navy);border-radius:8px;cursor:pointer;transition:.2s;flex-shrink:0}
.sidebar-toggle:hover{background:#f1f3f5}
.sidebar-toggle svg{width:18px;height:18px}
.page-add-btn{width:22px;height:22px;border:0;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;flex-shrink:0}
.page-add-btn:hover{background:#c76d08;transform:scale(1.04)}
.page-add-btn svg{width:12px;height:12px}
.tb-icon{position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:none;cursor:pointer;background:0;color:var(--gray);transition:.2s}
.tb-icon:hover{background:#f1f3f5}
.tb-notif-badge{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--card)}
.agent-btn{display:flex;align-items:center;gap:7px;padding:8px 16px;background:var(--navy);color:#fff;border:none;border-radius:20px;cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.agent-btn:hover{background:#1e293b;transform:scale(1.03)}
.agent-btn .spark{color:var(--orange)}
.company-sel,.user-sel{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;cursor:pointer;color:var(--navy);padding:5px 8px;border-radius:8px;transition:background .15s}
.company-sel:hover,.user-sel:hover{background:var(--light)}
.company-sel svg,.user-sel svg{width:16px;height:16px;color:var(--gray)}
.hdr-dd-chev{transition:transform .18s}
.user-avatar-sm{width:28px;height:28px;border-radius:50%;background:var(--ol);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--orange)}
/* Header dropdowns */
.hdr-dd-wrap{position:relative}
.hdr-dd-panel{position:absolute;top:calc(100% + 10px);left:0;min-width:240px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.12);z-index:999;padding:8px;display:none;animation:hdrFadeIn .15s ease}
.hdr-dd-panel-right{left:auto;right:0}
.hdr-dd-panel.open{display:block}
@keyframes hdrFadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.hdr-dd-header{display:flex;align-items:center;gap:10px;padding:10px 10px 12px}
.hdr-dd-entity-logo{width:36px;height:36px;border-radius:9px;background:var(--ol);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--orange);flex-shrink:0}
.hdr-dd-title{font-size:13px;font-weight:700;color:var(--navy);line-height:1.3}
.hdr-dd-subtitle{font-size:11px;color:var(--gray);margin-top:1px}
.hdr-dd-divider{height:1px;background:var(--border);margin:4px 0}
.hdr-dd-info-row{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;font-size:12px}
.hdr-dd-info-label{color:var(--gray);font-weight:500}
.hdr-dd-info-val{color:var(--navy);font-weight:600}
.hdr-dd-badge{background:#f0fdf4;color:#16a34a;border-radius:20px;padding:2px 8px;font-size:11px}
.hdr-dd-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:none;background:none;border-radius:8px;font-size:13px;font-weight:500;color:var(--navy);cursor:pointer;text-align:left;transition:background .12s}
.hdr-dd-item:hover{background:var(--light)}
.hdr-dd-item.active{background:#f1f5f9;color:var(--orange)}
.hdr-dd-item svg{color:var(--gray);flex-shrink:0}
.persona-switch-list{max-height:360px;overflow-y:auto;padding-right:2px}
.persona-switch-list::-webkit-scrollbar{width:3px}
.persona-switch-list::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:99px}
.hdr-dd-item-danger{color:#dc2626}
.hdr-dd-item-danger svg{color:#dc2626}
.hdr-dd-item-danger:hover{background:#fef2f2}
/* SIDEBAR */
/* scrollbar-gutter:stable — the gutter is always reserved, so nothing shifts sideways when the
   list grows past the viewport and the 3px scrollbar appears. */
.sidebar{width:224px;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 56px);padding:8px 0;transition:width .22s cubic-bezier(.4,0,.2,1);scrollbar-width:thin;scrollbar-color:#e5e7eb transparent;scrollbar-gutter:stable}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:99px}
.sidebar::-webkit-scrollbar-thumb:hover{background:#d1d5db}
.sidebar::-webkit-scrollbar-button{display:none;height:0;width:0}
.sidebar.collapsed{width:62px;padding:8px 0}
.sb-top{padding:4px 10px 8px;display:flex;align-items:center;justify-content:space-between;min-height:44px;flex-shrink:0}.sb-menu-label{font-size:11px;font-weight:600;color:#9ca3af;letter-spacing:.5px;text-transform:uppercase}
.sb-top .sidebar-toggle{width:32px;height:32px}
/* -- Nav items -- */
.sb-item{display:flex;align-items:center;gap:9px;padding:7px 10px;margin:1px 8px;cursor:pointer;font-size:13px;font-weight:500;color:#4b5563;transition:background .14s ease,color .14s ease,box-shadow .14s ease;background:transparent;border:none;border-radius:9px;position:relative;text-align:left;flex-shrink:0;width:calc(100% - 16px)}
.sb-item:hover{background:#f1f5f9;color:#111827}
.sb-item:hover .sb-ico-wrap{background:#e2e8f0;color:#374151;transform:scale(1.08)}
.sb-item.active{color:var(--orange);font-weight:600;background:#f1f5f9;box-shadow:inset 3px 0 0 var(--orange)}
.sb-item.active .sb-ico-wrap{background:#e2e8f0;color:var(--orange)}
.sb-item-badge{position:absolute;top:5px;right:9px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
/* Collapsed, the dot is anchored to the 34px icon chip rather than the button, which stretches
   the width of the rail — pinned to the button it floated off in the top-right corner, detached
   from its icon and hard against the scroll gutter. calc(50% - 20px) puts it on the chip's
   corner whatever the rail width. */
.sidebar.collapsed .sb-item-badge{top:3px;right:calc(50% - 20px);min-width:9px;height:9px;padding:0;font-size:0;line-height:0;box-shadow:0 0 0 2px var(--card)}
/* -- Icon wrap -- */
.sb-ico-wrap{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;color:#94a3b8;transition:background .14s ease,color .14s ease,transform .14s ease}
.sb-ico-wrap svg{width:15px;height:15px}
/* -- Dropdown parents -- */
.sb-parent{display:flex;align-items:center;gap:9px;padding:7px 10px;margin:1px 8px;cursor:pointer;font-size:13px;font-weight:500;color:#4b5563;transition:background .14s ease,color .14s ease;background:transparent;border:none;border-radius:9px;text-align:left;flex-shrink:0;width:calc(100% - 16px)}
.sb-parent:hover{background:#f1f5f9;color:#111827}
.sb-parent:hover .sb-ico-wrap{background:#e2e8f0;color:#374151;transform:scale(1.08)}
.sb-parent>span{flex:1;text-align:left}
.sb-parent.open{color:#111827;font-weight:600;background:#f4f7fb}
.sb-parent.open .sb-ico-wrap{background:#e2e8f0;color:var(--orange)}
.sb-parent.has-active{color:#111827;font-weight:600}
.sb-parent.has-active .sb-ico-wrap{background:#e2e8f0;color:var(--orange)}
.sb-parent.has-active:not(.open){background:transparent}
.sb-parent .sb-chev{width:13px;height:13px;transition:transform .28s cubic-bezier(.4,0,.2,1);color:#cbd5e1;flex-shrink:0;margin-left:auto}
.sb-parent.open .sb-chev{transform:rotate(180deg);color:var(--orange)}
/* -- Section labels -- */
.sb-section{font-size:10px;font-weight:700;color:#c4c9d4;text-transform:uppercase;letter-spacing:.9px;padding:16px 18px 5px;flex-shrink:0}
/* -- AI layer group: the Executive Layer's own modules, lifted onto a tinted panel so they read
   as one block, separate from the connected product's modules below the divider. Items inside
   invert their surface (white on tint) so hover/active still stand out against the panel. -- */
.sb-group{flex-shrink:0;margin:2px 8px 4px;padding:8px 0 9px;border-radius:14px;background:#f4f7fb;border:1px solid #e6ecf3;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.sb-group-label{display:flex;align-items:center;gap:7px;padding:1px 13px 7px;font-size:9.5px;font-weight:700;color:#8b95a5;text-transform:uppercase;letter-spacing:.9px;white-space:nowrap}
.sb-group-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#dde5ee,transparent)}
.sb-group-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:conic-gradient(from var(--ai-border-angle),#3b82f6 0deg,#22c55e 120deg,var(--red) 240deg,#3b82f6 360deg);animation:ai-border-spin 7s linear infinite}
.sb-group .sb-item,.sb-group .sb-parent{margin-left:6px;margin-right:6px;width:calc(100% - 12px)}
.sb-group .sb-item:hover,.sb-group .sb-parent:hover{background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.sb-group .sb-item:hover .sb-ico-wrap,.sb-group .sb-parent:hover .sb-ico-wrap{background:#eef2f7}
.sb-group .sb-item.active,.sb-group .sb-children .sb-item.active{background:#fff;box-shadow:inset 3px 0 0 var(--orange),0 1px 3px rgba(15,23,42,.1)}
.sb-group .sb-parent.open{background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.sb-group .sb-children{margin-left:18px;border-left-color:#e2e9f1}
/* -- Divider between the AI layer and the connected product's modules. Expanded it is followed
   by the "Workspace" label, so that label drops its own top padding — a rule and a heading each
   claiming their own space read as two separate breaks rather than one. -- */
.sb-divider{flex-shrink:0;height:1px;margin:10px 16px 2px;background:var(--border)}
.sb-divider+.sb-section{padding-top:9px}
/* -- Children -- */
.sb-children{display:flex;flex-direction:column;overflow:hidden;background:transparent;margin:2px 8px 4px 20px;padding:0;border-left:2px solid #edf0f4;flex-shrink:0;transition:max-height .32s cubic-bezier(.4,0,.2,1)}
.sb-children .sb-item{padding:6px 8px;margin:1px 4px;font-size:12.5px;color:#64748b;border-radius:7px;gap:8px;flex-shrink:0;width:calc(100% - 8px);box-shadow:none}
.sb-children .sb-item .sb-ico-wrap{width:22px;height:22px;border-radius:5px;background:transparent;color:#94a3b8}
.sb-children .sb-item .sb-ico-wrap svg{width:12px;height:12px}
.sb-children .sb-item:hover{background:#f1f5f9;color:#111827}
.sb-children .sb-item:hover .sb-ico-wrap{background:#e2e8f0;color:#475569;transform:scale(1.08)}
.sb-children .sb-item.active{color:var(--orange);font-weight:600;background:#f1f5f9;box-shadow:inset 3px 0 0 var(--orange)}
.sb-children .sb-item.active .sb-ico-wrap{background:#e2e8f0;color:var(--orange)}
.sb-spacer{flex:1}
.sb-agent-launcher{margin:8px;padding:10px;border-radius:12px;background:var(--ol);border:1px solid #d1d5db;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--orange);transition:.2s}
.sb-agent-launcher:hover{background:#fce4bf;transform:scale(1.04)}
.sb-agent-launcher svg{width:20px;height:20px}
/* == COLLAPSED sidebar — icon-only == */
.sidebar.collapsed .sb-item{padding:6px;margin:2px 6px;justify-content:center;width:auto;border-radius:10px;box-shadow:none}
.sidebar.collapsed .sb-item span{display:none}
.sidebar.collapsed .sb-item .sb-ico-wrap{width:34px;height:34px;border-radius:9px;background:transparent}
.sidebar.collapsed .sb-item:hover{background:transparent}
.sidebar.collapsed .sb-item:hover .sb-ico-wrap{background:#e8edf4;color:#374151;transform:scale(1.1)}
.sidebar.collapsed .sb-item.active{background:transparent;box-shadow:none}
.sidebar.collapsed .sb-item.active .sb-ico-wrap{background:#f1f5f9;color:var(--orange);box-shadow:0 0 0 1.5px rgba(26,26,26,.25)}
.sidebar.collapsed .sb-section{display:none}
/* -- Collapsed, the group sheds its panel entirely. A filled surface at 62px has nowhere to go:
   inset as a card it pushes its icons off the rail's vertical axis, full-bleed it runs into the
   scroll gutter. So segregation falls to a short centred rule under the group, and every icon —
   grouped or not — keeps the single centre line an icon rail is built on. Every interactive
   state below is reset to the plain rail treatment, since there is no panel to contrast against. -- */
.sidebar.collapsed .sb-group{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.sidebar.collapsed .sb-group .sb-item,.sidebar.collapsed .sb-group .sb-parent{margin:2px 6px;width:auto}
.sidebar.collapsed .sb-group .sb-item:hover,.sidebar.collapsed .sb-group .sb-parent:hover{background:transparent;box-shadow:none}
.sidebar.collapsed .sb-group .sb-item.active{background:transparent;box-shadow:none}
.sidebar.collapsed .sb-group .sb-item:hover .sb-ico-wrap,.sidebar.collapsed .sb-group .sb-parent:hover .sb-ico-wrap{background:#e8edf4}
.sidebar.collapsed .sb-group .sb-item.active .sb-ico-wrap,.sidebar.collapsed .sb-group .sb-parent.has-active .sb-ico-wrap,.sidebar.collapsed .sb-group .sb-parent.open .sb-ico-wrap{background:#f1f5f9}
/* Centred hairline, inset well clear of the 3px scroll gutter. */
.sidebar.collapsed .sb-divider{width:26px;height:1px;margin:9px auto 7px;background:#e3e8ee}
.sidebar.collapsed .sb-parent{display:flex;padding:6px;margin:2px 6px;justify-content:center;border-radius:10px;width:auto;background:transparent}
.sidebar.collapsed .sb-parent span,.sidebar.collapsed .sb-parent .sb-chev{display:none}
.sidebar.collapsed .sb-parent .sb-ico-wrap{width:34px;height:34px;border-radius:9px;background:transparent}
.sidebar.collapsed .sb-parent:hover{background:transparent}
.sidebar.collapsed .sb-parent:hover .sb-ico-wrap{background:#e8edf4;color:#374151;transform:scale(1.1)}
.sidebar.collapsed .sb-parent.has-active .sb-ico-wrap{background:#f1f5f9;color:var(--orange);box-shadow:0 0 0 1.5px rgba(26,26,26,.25)}
.sidebar.collapsed .sb-parent.open .sb-ico-wrap{background:#f1f5f9;color:var(--orange)}
.sidebar.collapsed .sb-top{justify-content:center;padding:4px}
.sidebar.collapsed .sb-children{display:none!important}
.sb-parent .sb-ico{width:16px;height:16px;flex-shrink:0}
/* -- AI Executive: animated gradient border -- */
@property --ai-border-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.sb-item-ai{position:relative}
.sb-item-ai::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.4px;
  background:conic-gradient(from var(--ai-border-angle),#3b82f6 0deg,#22c55e 120deg,var(--red) 240deg,#3b82f6 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.75;
  animation:ai-border-spin 7s linear infinite;
  pointer-events:none;
}
/* -- Collapsed, the gradient border moves off the button and onto the 34px icon chip. On the
   button it drew a wide rounded rectangle spanning the whole rail — twice the footprint of every
   other icon's hover/active chip, so AI Executive read as a different size of thing rather than
   the same thing highlighted. On the chip it matches the active ring's geometry exactly. -- */
.sidebar.collapsed .sb-item-ai::before{display:none}
.sidebar.collapsed .sb-item-ai .sb-ico-wrap{position:relative}
.sidebar.collapsed .sb-item-ai .sb-ico-wrap::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.4px;
  background:conic-gradient(from var(--ai-border-angle),#3b82f6 0deg,#22c55e 120deg,var(--red) 240deg,#3b82f6 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.75;
  animation:ai-border-spin 9s linear infinite;
  pointer-events:none;
}
.sidebar.collapsed .sb-item-ai.active .sb-ico-wrap::before{
  padding:1.8px;
  opacity:1;
  animation-duration:2.6s;
  background:conic-gradient(from var(--ai-border-angle),transparent 0deg,transparent 140deg,#fde3b8 200deg,#fbbf6b 250deg,var(--orange) 300deg,#fbbf6b 340deg,transparent 360deg);
}
.sb-item-ai.active::before{
  padding:1.8px;
  opacity:1;
  animation-duration:2.6s;
  background:conic-gradient(from var(--ai-border-angle),transparent 0deg,transparent 140deg,#fde3b8 200deg,#fbbf6b 250deg,var(--orange) 300deg,#fbbf6b 340deg,transparent 360deg);
}
.sb-item-ai.active{animation:ai-active-glow 2.4s ease-in-out infinite}
/* Collapsed, the glow belongs to the icon chip only — left on the button as well it would pulse a
   second, rail-wide halo behind the chip and undo the geometry match above. */
.sidebar.collapsed .sb-item-ai.active{animation:none}
.sidebar.collapsed .sb-item-ai.active .sb-ico-wrap{animation:ai-active-glow-ico 2.4s ease-in-out infinite}
@keyframes ai-border-spin{to{--ai-border-angle:360deg}}
@keyframes ai-active-glow{
  0%,100%{box-shadow:inset 3px 0 0 var(--orange),0 2px 10px rgba(26,26,26,.16)}
  50%{box-shadow:inset 3px 0 0 var(--orange),0 4px 18px rgba(26,26,26,.32)}
}
@keyframes ai-active-glow-ico{
  0%,100%{box-shadow:0 0 0 1.5px rgba(26,26,26,.25)}
  50%{box-shadow:0 0 0 3px rgba(26,26,26,.4)}
}
/* NOTIFICATION POPOVER */
.notif-pop{position:absolute;top:52px;right:16px;width:380px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(15,23,42,.12);z-index:100;animation:fadeUp .2s ease;overflow:hidden}
.notif-pop.hidden{display:none}
.np-head{padding:14px 16px 10px;display:flex;align-items:center;justify-content:space-between}
.np-title{font-size:15px;font-weight:700;color:var(--navy)}
.np-actions{display:flex;align-items:center;gap:6px}
.np-iconbtn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:0;background:0;color:var(--gray);border-radius:6px;cursor:pointer;transition:.15s}
.np-iconbtn:hover{background:#f1f3f5;color:var(--navy)}
.np-controls{display:flex;align-items:center;justify-content:space-between;padding:0 16px 12px;border-bottom:1px solid var(--border)}
.np-mark{font-size:12px;color:var(--gray);font-weight:500;cursor:pointer;background:0;border:0;font-family:inherit;padding:0}
.np-mark:hover{color:var(--orange)}
.np-toggle-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gray)}
.np-switch{width:32px;height:18px;background:#e5e7eb;border-radius:9px;position:relative;cursor:pointer;transition:.2s;border:0;padding:0}
.np-switch.on{background:var(--green)}
.np-switch::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:.2s}
.np-switch.on::after{left:16px}
.np-list{max-height:380px;overflow-y:auto}
.np-item{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid #f1f3f5;align-items:flex-start}
.np-item:last-child{border-bottom:0}
.np-item:hover{background:#fafbfc}
.np-avatar{width:32px;height:32px;border-radius:50%;background:#dbeafe;color:#3b82f6;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.np-body{flex:1;min-width:0}
.np-row1{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
.np-text{font-size:13px;font-weight:600;color:var(--navy)}
.np-time{font-size:11px;color:var(--gray);white-space:nowrap;flex-shrink:0}
.np-row2{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--gray)}
.np-pending{padding:2px 8px;border-radius:4px;background:#fef3c7;color:#92400e;font-size:10px;font-weight:600}
/* CONTENT */
.content-area{flex:1;display:flex;overflow:hidden;min-width:0}
.page-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:28px 32px;min-width:0;max-width:100%;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.08) transparent}
.page-content::-webkit-scrollbar{width:3px}
.page-content::-webkit-scrollbar-track{background:transparent}
.page-content::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:99px}
.page-content::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.18)}
.page-content::-webkit-scrollbar-button{display:none;height:0;width:0}
/* DASHBOARD */
.welcome-banner{display:flex;gap:16px;margin-bottom:24px}
.wb-left{flex:1.1;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 24px}
.wb-title{font-size:18px;font-weight:700;margin-bottom:5px}
.wb-desc{font-size:12px;color:var(--gray);line-height:1.5;margin-bottom:14px;max-width:380px}
.wb-btns{display:flex;gap:10px}
.wb-btn{padding:7px 16px;border-radius:8px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;border:none;transition:.2s}
.wb-btn.primary{background:var(--navy);color:#fff}
.wb-btn.secondary{background:0;color:var(--navy);border:none}
.attendance-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px 30px;flex:1;min-width:340px}
.att-title{font-size:16px;font-weight:600;margin-bottom:18px;display:flex;justify-content:space-between}
.att-title a{font-size:13px;color:var(--orange);text-decoration:none;font-weight:600}
.att-row{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--gray);margin-bottom:12px}
.att-val{margin-left:auto;font-weight:600;color:var(--navy);font-size:14px}
.clock-btn{margin-top:12px;padding:10px 26px;background:var(--green);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;float:right}
.quick-links{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.ql{padding:8px 14px;background:var(--card);border:1px solid var(--border);border-radius:10px;font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.15s;color:var(--gray)}
.ql:hover{border-color:var(--orange);color:var(--orange)}
.setup-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:24px}
.setup-title{font-size:15px;font-weight:600;margin-bottom:4px}
.setup-sub{font-size:12px;color:var(--gray);margin-bottom:16px}
.setup-bar{height:6px;background:#f1f3f5;border-radius:3px;margin-bottom:16px;position:relative}
.setup-fill{height:6px;border-radius:3px;background:var(--navy);transition:.3s}
.setup-steps{display:flex;gap:12px}
.setup-step{flex:1;padding:14px;border:1px solid var(--border);border-radius:12px;font-size:12px;display:flex;align-items:flex-start;gap:10px}
.setup-step.done{border-color:var(--green)}
.setup-step .ss-name{font-weight:600;font-size:13px;margin-bottom:2px}
.setup-step .ss-status{font-size:11px;color:var(--green);font-weight:500}
.setup-step .ss-status.pending{color:var(--gray)}
.ss-ico{flex-shrink:0;margin-top:1px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat-grid-3{grid-template-columns:repeat(3,1fr)}
.stat-card{background:var(--card);border-radius:14px;padding:20px;border:1px solid var(--border)}
.stat-card.clickable-stat{cursor:pointer;transition:.15s}
.stat-card.clickable-stat:hover{border-color:#cbd5e1;box-shadow:0 1px 4px rgba(15,23,42,.06)}
.stat-card.ea-hero-stat{position:relative;cursor:pointer;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.stat-card.ea-hero-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--tile-accent,var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.stat-card.ea-hero-stat:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 14px 28px rgba(15,23,42,.1)}
.stat-card.ea-hero-stat:hover::before{transform:scaleX(1)}
.stat-card.ea-hero-stat:active{transform:translateY(-1px)}
.stat-card.ea-hero-stat .stat-icon{transition:transform .22s ease}
.stat-card.ea-hero-stat:hover .stat-icon{transform:scale(1.1) rotate(-4deg)}
.stat-card.ea-hero-stat.cfg-hero-blue .stat-icon,.stat-card.ea-hero-stat.cfg-hero-teal .stat-icon,.stat-card.ea-hero-stat.cfg-hero-orange .stat-icon,.stat-card.ea-hero-stat.cfg-hero-yellow .stat-icon,.stat-card.ea-hero-stat.cfg-hero-violet .stat-icon,.stat-card.ea-hero-stat.cfg-hero-green .stat-icon,.stat-card.ea-hero-stat.cfg-hero-red .stat-icon{background:var(--tile-accent-bg);color:var(--tile-accent)}
.stat-card.ea-hero-stat.cfg-hero-blue .stat-icon svg,.stat-card.ea-hero-stat.cfg-hero-teal .stat-icon svg,.stat-card.ea-hero-stat.cfg-hero-orange .stat-icon svg,.stat-card.ea-hero-stat.cfg-hero-yellow .stat-icon svg,.stat-card.ea-hero-stat.cfg-hero-violet .stat-icon svg,.stat-card.ea-hero-stat.cfg-hero-green .stat-icon svg,.stat-card.ea-hero-stat.cfg-hero-red .stat-icon svg{stroke:var(--tile-accent)}
.stat-card.ea-hero-stat.dash-stat-static{cursor:default}
.stat-label{font-size:12px;color:var(--gray);font-weight:500;margin-bottom:8px;display:flex;justify-content:space-between;align-items:flex-start}
.stat-icon{width:34px;height:34px;border-radius:8px;background:rgba(26,26,26,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-icon svg{width:17px;height:17px;stroke:var(--orange);fill:none}
.stat-val{font-size:26px;font-weight:700}
.stat-sub{font-size:11px;color:var(--gray);font-weight:500;margin-top:4px}
/* CONFIGURE OVERVIEW — landing-dashboard style hero tiles */
.cfg-hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.cfg-hero-tile{position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px 20px 18px;cursor:pointer;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.cfg-hero-tile::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--tile-accent,var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.cfg-hero-tile:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 14px 28px rgba(15,23,42,.1)}
.cfg-hero-tile:hover::before{transform:scaleX(1)}
.cfg-hero-tile:active{transform:translateY(-1px)}
.cfg-hero-toprow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cfg-hero-icon{width:32px;height:32px;border-radius:9px;background:var(--tile-accent-bg,var(--ol));color:var(--tile-accent,var(--orange));display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .22s ease}
.cfg-hero-icon svg{width:16px;height:16px}
.cfg-hero-tile:hover .cfg-hero-icon{transform:scale(1.1) rotate(-4deg)}
.cfg-hero-val{font-size:34px;font-weight:800;color:var(--navy);line-height:1.1}
.cfg-hero-label{font-size:15px;font-weight:600;color:var(--navy);margin-top:2px}
.cfg-hero-sub{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--gray);margin-top:8px}
.cfg-hero-sub span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-hero-arrow{flex-shrink:0;color:var(--tile-accent,var(--orange));opacity:0;transform:translateX(-4px);transition:opacity .18s ease,transform .18s ease}
.cfg-hero-tile:hover .cfg-hero-arrow{opacity:1;transform:translateX(0)}
.cfg-hero-blue{--tile-accent:#2563eb;--tile-accent-bg:rgba(37,99,235,.1)}
.cfg-hero-violet{--tile-accent:#7c3aed;--tile-accent-bg:rgba(124,58,237,.1)}
.cfg-hero-teal{--tile-accent:#0d9488;--tile-accent-bg:rgba(13,148,136,.1)}
.cfg-hero-orange{--tile-accent:var(--orange);--tile-accent-bg:var(--ol)}
.cfg-hero-yellow{--tile-accent:#b45309;--tile-accent-bg:#fffbeb}
.cfg-hero-green{--tile-accent:#16a34a;--tile-accent-bg:rgba(22,163,74,.1)}
.cfg-hero-red{--tile-accent:#dc2626;--tile-accent-bg:rgba(220,38,38,.1)}
@media(max-width:980px){.cfg-hero-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cfg-hero-grid{grid-template-columns:1fr}}
.persona-dash{max-width:1280px}
.persona-hero{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px 22px;margin-bottom:20px}
.persona-avatar-lg{width:52px;height:52px;border-radius:14px;background:var(--ol);color:var(--orange);font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.persona-role{font-size:18px;font-weight:800;color:var(--navy);line-height:1.2}
.persona-name{font-size:12.5px;color:var(--gray);font-weight:600;margin-top:3px}
.persona-focus{font-size:12.5px;color:#475569;line-height:1.55;margin-top:8px;max-width:720px}
.persona-mode{margin-left:auto;min-width:150px;background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:12px 14px;text-align:right}
.persona-mode span{display:block;font-size:11px;color:var(--gray);font-weight:700;text-transform:uppercase;letter-spacing:.35px;margin-bottom:4px}
.persona-mode strong{font-size:13px;color:var(--navy)}
.persona-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start}
.persona-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 20px 0}
.persona-section-head+.listing-table{margin-top:12px}
.role-scope-note{display:inline-flex;align-items:center;gap:6px;background:#f8fafc;border:1px solid var(--border);border-radius:20px;padding:7px 12px;font-size:12px;color:var(--gray);font-weight:600;margin:0 0 16px}
.role-scope-note span{color:var(--navy);font-weight:800}
@media(max-width:980px){
  .persona-hero{align-items:flex-start;flex-wrap:wrap}
  .persona-mode{margin-left:0;text-align:left}
  .persona-grid{grid-template-columns:1fr}
}
.badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;background:#f1f5f9;color:var(--navy);letter-spacing:.4px}
.badge.cfg-agent-recommend{background:#f0fdfa;color:#0d9488;border:1px solid #99f6e4;cursor:pointer;transition:background .15s}
.badge.cfg-agent-recommend:hover{background:#ccfbf1}
/* Source System reads as ordinary cell text, inheriting .lp-table td, because it is a fixed fact
   about the row rather than a status — a pill in a column of plain cells claims to be something
   that changes and that you might act on. The link affordance is deliberately quiet at rest: the
   column header carries the external-link glyph that says the whole column leads somewhere, so
   the rows do not each have to re-state it. Hover and keyboard focus still confirm it per row. */
.md-source-link{color:inherit;text-decoration:none;cursor:pointer;border-bottom:1px solid transparent;transition:border-color .15s}
.md-source-link:hover{border-bottom-color:currentColor}
.md-source-link:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:2px}
/* .55 so the glyph reads as a property of the header label rather than competing with it. */
.md-th-link-ico{vertical-align:-1px;margin-left:5px;opacity:.55}
/* A client that exists here but is not yet confirmed by its source system. Deliberately NOT the
   monospace teal the real id wears: this is the absence of an id, and dressing it like one would
   be a lie the operator has to read twice. 'Mirroring…' is grey because waiting is not a problem;
   'Not mirrored' is amber because it is, and it carries the only Retry in the table. */
.md-mirror{font-size:11px;font-weight:700;letter-spacing:.2px}
.md-mirror-pending{color:var(--gray)}
.md-mirror-failed{color:#b45309;cursor:help;border-bottom:1px dotted #d9a441}
.md-mirror-retry{margin-left:8px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:5px;border:1px solid #d9a441;background:#fffbeb;color:#b45309;cursor:pointer;transition:background .15s}
.md-mirror-retry:hover{background:#fef3c7}
.cfg-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:6px}
/* gap:11px — the three lines each say a different kind of thing (what it is called, what it is
   named, what it covers), so they need air between them to read as three facts rather than one
   run-on block. */
.cfg-cat-box{position:relative;background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:15px 17px 16px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:11px}
.cfg-cat-box:hover{border-color:#cbd5e1;box-shadow:0 1px 4px rgba(15,23,42,.06)}
.cfg-cat-box.active{box-shadow:0 1px 4px rgba(15,23,42,.08)}
.cfg-cat-box-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cfg-cat-box-id{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:6px;letter-spacing:.3px}
.cfg-cat-box-count{font-size:11px;font-weight:600;color:var(--gray)}
.cfg-cat-box-name{font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.3}
/* Wraps to two lines at narrow columns rather than being clipped — there is no max-height, so
   whatever it needs it gets, and the grid rows equalise naturally. */
.cfg-cat-box-short{font-size:11.5px;font-weight:500;color:var(--gray);line-height:1.6;margin-top:auto}
.cfg-cat-box-locked{cursor:default;opacity:.55}
.cfg-cat-box-locked:hover{border-color:var(--border);box-shadow:none}
.cfg-cat-box-lock{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--gray)}
.cfg-cat-clear{border:none;background:none;color:var(--orange);font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit;padding:0}
@media (max-width:900px){.cfg-cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cfg-cat-grid{grid-template-columns:1fr}}
.close-btn{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:18px;border:1px solid var(--border);cursor:pointer;background:var(--card);color:var(--navy);transition:.2s;font-family:inherit;font-size:12px;font-weight:600}
.close-btn:hover{background:#fee2e2;border-color:#fca5a5;color:#dc2626}
.close-btn svg{width:14px;height:14px}
.close-btn:hover{background:#f1f3f5}
/* INPUT BAR */
.input-area{padding:16px 24px;border-top:1px solid var(--border);background:var(--card);min-width:0;flex-shrink:0;border-radius:24px;max-width:720px;margin:0 auto}
.input-row{display:flex;align-items:center;gap:10px;background:var(--light);border-radius:18px;padding:10px 12px;border:1.5px solid var(--border);transition:.2s;min-width:0;width:100%}
.input-row:focus-within{border-color:var(--orange)}
.input-field{flex:1 1 100%;min-width:0;border:none;outline:none;background:0;font-size:14px;font-family:inherit;padding:12px 14px;color:var(--navy)}
.icon-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:none;cursor:pointer;transition:.2s;background:0;color:var(--gray);flex-shrink:0;position:relative}
.icon-btn:hover{background:#e5e7eb}
.icon-btn.active{background:var(--orange);color:#fff}
/* PLUS DROPDOWN */
.plus-dd{position:absolute;bottom:calc(100% + 8px);left:0;background:var(--card);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.12);border:1px solid var(--border);padding:6px;min-width:180px;z-index:100;display:none}
.plus-dd.open{display:block;animation:fadeUp .2s ease}
.plus-dd-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:500;color:var(--navy);transition:.1s}
.plus-dd-item:hover{background:var(--ol)}
.plus-dd-item svg{width:16px;height:16px;color:var(--orange)}
/* AGENT SELECTOR */
.agent-sel{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;border:1px solid var(--border);cursor:pointer;font-size:11px;font-weight:600;color:var(--navy);background:var(--card);font-family:inherit;position:relative;white-space:nowrap;transition:.2s;max-width:150px;min-width:0}
.agent-sel svg{flex-shrink:0}
.agent-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.agent-sel:hover{border-color:var(--orange)}
.agent-dd{position:absolute;bottom:calc(100% + 6px);left:0;background:var(--card);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.12);border:1px solid var(--border);padding:6px;min-width:200px;z-index:100;display:none}
.agent-dd.open{display:block;animation:fadeUp .15s ease}
.agent-dd-hdr{padding:4px 12px 8px;font-size:10px;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.4px}
.agent-dd-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:12px;transition:.1s}
.agent-dd-item:hover{background:var(--ol)}
.agent-dd-item.active{background:var(--ol)}
.agent-dd-item.disabled{opacity:.45;cursor:default}
.agent-dd-item .nm{font-weight:600}
.agent-dd-item .desc{font-size:10px;color:var(--gray)}
.coming-tag{font-size:9px;font-weight:600;padding:2px 6px;border-radius:5px;background:#e0e7ef;color:var(--gray);margin-left:auto}
/* CUSTOM DROPDOWNS */
.custom-select{position:relative;width:100%;font-family:inherit;z-index:5}
.custom-select.open{z-index:80}
.custom-select-trigger{width:100%;min-height:40px;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;background:#fff;color:var(--navy);font-size:13px;line-height:1.25;font-family:inherit;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;transition:border-color .18s,box-shadow .18s;text-align:left}
.custom-select-trigger:hover{border-color:#c7ccd6}
.custom-select.open .custom-select-trigger,.custom-select-trigger:focus{border-color:#c7ccd6;box-shadow:0 0 0 3px rgba(15,23,42,.04);outline:0}
.custom-select-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.custom-select-trigger .placeholder{color:#a3a8b2;font-weight:400}
.custom-select-chevron{width:18px;height:18px;flex-shrink:0;color:#111827;transition:transform .18s}
.custom-select.open .custom-select-chevron{transform:rotate(180deg)}
.custom-select-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);display:none;background:#fff;border:1px solid #e1e4ea;border-radius:9px;box-shadow:0 8px 22px rgba(15,23,42,.08);overflow:hidden;z-index:90;padding:0;max-height:280px;overflow-y:auto}
.custom-select.open .custom-select-menu{display:block;animation:fadeUp .16s ease}
.custom-select-option{width:100%;height:54px;border:0;background:#fff;color:#20242c;font-size:13px;font-family:inherit;text-align:left;padding:0 18px 0 36px;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;transition:background .12s}
.custom-select-option:hover{background:#fbf7f1}
.custom-select-option.selected{font-weight:500}
.custom-select-check{opacity:0;color:#7d8189;font-size:18px;font-weight:800;line-height:1;flex-shrink:0}
.custom-select-option.selected .custom-select-check{opacity:1}
.filter-row .custom-select{width:150px;flex:0 0 150px}
.filter-row .custom-select-trigger{height:34px;font-size:11px;color:var(--gray);border-radius:8px;padding:0 10px}
.filter-row .custom-select-menu{min-width:170px;right:auto}
.filter-row .custom-select-option{height:42px;font-size:12px;padding-left:18px}
.pay-group{overflow:visible}
.pay-group .custom-select{flex:0 0 116px;width:116px;z-index:15}
.pay-group .custom-select-trigger{min-height:40px;height:auto;border:0;border-right:1px solid var(--border);border-radius:8px 0 0 8px;background:#fafbfc;font-weight:600;padding:11px 12px;box-shadow:none}
.pay-group .custom-select-menu{min-width:156px;right:auto;top:calc(100% + 7px)}
.pay-group .custom-select-option{height:44px;padding-left:18px}
.plus-dd,.agent-dd{border-radius:9px;border:1px solid #e1e4ea;box-shadow:0 8px 22px rgba(15,23,42,.1);padding:0;overflow:hidden;background:#fff}
.plus-dd-item,.agent-dd-item{border-radius:0;padding:13px 16px;background:#fff}
.plus-dd-item:hover,.agent-dd-item:hover,.agent-dd-item.active{background:#fbf7f1}
.agent-dd-hdr{padding:13px 16px;color:var(--navy);font-size:12px;text-transform:none;letter-spacing:0;border-bottom:1px solid #f0f1f3}
.agent-dd-item.active span:last-child{color:#7d8189!important;font-size:18px}
.agent-sel{border-radius:8px;border-color:#d9dde5;background:#fff;padding:8px 11px}
/* WORKSPACE EMPTY STATE */
.workspace-empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;background:#f4f5f7;padding:48px;min-height:0}
.workspace-empty-inner{display:flex;flex-direction:column;align-items:center;max-width:280px;color:var(--navy)}
.workspace-mural{width:164px;height:164px;margin-bottom:14px;color:#b7bdc7}
.workspace-title{font-size:13px;font-weight:800;margin-bottom:10px;color:#111827}
.workspace-copy{font-size:11px;line-height:1.45;color:#8b93a1;max-width:230px}
/* CHAT */
.chat-area{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.08) transparent}
.chat-area::-webkit-scrollbar{width:3px}
.chat-area::-webkit-scrollbar-track{background:transparent}
.chat-area::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:99px}
.chat-area::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.18)}
.chat-area::-webkit-scrollbar-button{display:none;height:0;width:0}
.msg-row{display:flex;gap:8px;animation:fadeUp .3s ease}
.msg-row.user{justify-content:flex-end}
.bot-av{width:26px;height:26px;border-radius:8px;background:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.user-av{width:26px;height:26px;border-radius:8px;background:var(--ol);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--orange);flex-shrink:0}
.bubble{max-width:80%;padding:10px 14px;font-size:13px;line-height:1.5}
.bubble.bot{border-radius:14px 14px 14px 4px;background:#f1f3f5}
.bubble.user{border-radius:14px 14px 4px 14px;background:var(--navy);color:#fff}
.typing-dots{display:flex;gap:4px;padding:12px 16px}
.typing-dots span{width:5px;height:5px;border-radius:50%;background:var(--gray);animation:blink 1.2s infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
.msg-attachment-img{max-width:220px;max-height:220px;border-radius:10px;display:block;object-fit:cover}
.msg-attachment-file{font-size:12px;font-weight:600;background:rgba(255,255,255,.15);border-radius:8px;padding:6px 10px}
.agrun-attach-chip{display:flex;align-items:center;gap:8px;background:#f1f3f5;border:1px solid var(--border);border-radius:10px;padding:6px 10px;margin:0 auto 8px;max-width:720px;font-size:12px;color:var(--navy)}
.agrun-attach-chip img{width:28px;height:28px;object-fit:cover;border-radius:6px;flex-shrink:0}
.agrun-attach-file-ic{font-size:14px}
.agrun-attach-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agrun-attach-remove{background:none;border:none;color:var(--gray);font-size:16px;line-height:1;cursor:pointer;padding:0 2px}
.agrun-attach-remove:hover{color:var(--navy)}
/* AGENT EMPTY */
#v-agent-empty{position:relative}
#am-webgl-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.am-topbar-glass{position:relative;z-index:10;background:rgba(255,255,255,.82)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.agent-empty-center{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;gap:32px}
.we-icon{width:52px;height:52px;border-radius:14px;background:var(--ol);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.actions-grid{display:flex;flex-wrap:wrap;gap:12px;max-width:680px;justify-content:center}
.action-card{padding:16px 20px;background:var(--card);border-radius:14px;border:1.5px solid var(--border);cursor:pointer;transition:.25s;display:flex;align-items:flex-start;gap:14px;flex:1 1 calc(50% - 12px);min-width:260px}
.action-card:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 4px 14px rgba(26,26,26,.08)}
.ac-icon{width:36px;height:36px;border-radius:10px;background:var(--ol);display:flex;align-items:center;justify-content:center;color:var(--orange);flex-shrink:0}
.ac-icon svg{width:18px;height:18px}
.ac-label{font-weight:600;font-size:13px;margin-bottom:2px}
.ac-desc{font-size:11px;color:var(--gray);line-height:1.3}
/* FORM PANEL */
.form-col{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#f8f9fb}
.form-panel{flex:1;overflow-y:auto;padding:0;margin:14px;background:var(--card);border-radius:16px;border:1px solid var(--border);box-shadow:0 2px 12px rgba(15,23,42,.04);display:flex;flex-direction:column;min-height:0}
.fp-body{padding:0 36px 8px;flex:1}
.fp-shell{padding:28px 36px 0}
.fp-body{padding:8px 36px 28px;flex:1}
.fp-foot{padding:18px 36px;border-top:1px solid var(--border);background:#fafbfc;border-radius:0 0 16px 16px}
/* STEPPER */
.stepper{display:flex;align-items:center;gap:0;margin-bottom:24px}
.step-dot{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.step-dot .sd-circle{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:#fff;border:2px solid var(--border);color:var(--gray);transition:.25s}
.step-dot.done .sd-circle{background:#464646;border-color:#464646;color:#fff}
.step-dot.active .sd-circle{background:#fff;border-color:#464646;color:#464646;box-shadow:0 0 0 4px rgba(70,70,70,.1)}
.step-dot .sd-label{font-size:10px;font-weight:600;color:var(--gray);white-space:nowrap;letter-spacing:.2px}
.step-dot.active .sd-label{color:var(--navy)}
.step-dot.done .sd-label{color:#464646}
.step-line{flex:1;height:2px;background:var(--border);margin:0 4px;margin-bottom:18px;min-width:14px;border-radius:2px;transition:.3s}
.step-line.done{background:#464646}
/* HEADER */
.fp-title-row{margin-bottom:6px}
.fp-eyebrow{font-size:11px;font-weight:600;color:#464646;letter-spacing:.6px;text-transform:uppercase;margin-bottom:4px}
.fp-h1{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:4px;letter-spacing:-.2px}
.fp-sub{font-size:12.5px;color:var(--gray);line-height:1.5;margin-bottom:22px}
.section-block{margin-bottom:26px}
.section-head{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:14px;letter-spacing:.2px;display:flex;align-items:center;gap:8px}
.section-head::before{content:"";width:3px;height:13px;background:#464646;border-radius:2px}
/* INPUTS */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-bottom:8px}
.form-grid.full{grid-template-columns:1fr}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:12px;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:4px}
.form-label .req{color:var(--orange)}
.form-input,.form-select{padding:11px 14px;border-radius:10px;border:1.5px solid var(--border);font-size:13px;font-family:inherit;width:100%;outline:none;transition:.2s;color:var(--navy);background:var(--card)}
.form-input:hover,.form-select:hover{border-color:#cbd5e1}
.form-input:focus,.form-select:focus{border-color:#464646;box-shadow:0 0 0 3px rgba(70,70,70,.1)}
.form-input.readonly{background:var(--light);color:var(--navy);border-style:dashed}
.field-hint{font-size:11px;color:var(--gray);margin-top:2px}
.field-prefill{font-size:11px;color:var(--orange);display:flex;align-items:center;gap:4px;font-weight:500}
/* CARD-STYLE RADIOS */
.choice-grid{display:grid;gap:10px;margin-bottom:8px}
.choice-grid.cols-2{grid-template-columns:1fr 1fr}
.choice-card{position:relative;display:flex;align-items:flex-start;gap:11px;padding:14px 16px;border:1.5px solid var(--border);border-radius:12px;cursor:pointer;background:var(--card);transition:.18s;font-family:inherit}
.choice-card:hover{border-color:#cbd5e1;background:#fafbfc}
.choice-card.selected{border-color:#464646;background:rgba(70,70,70,.04);box-shadow:0 0 0 1px #464646 inset}
.choice-card input{position:absolute;opacity:0;pointer-events:none}
.choice-radio{width:18px;height:18px;border-radius:50%;border:2px solid #cbd5e1;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;transition:.2s;margin-top:1px}
.choice-card.selected .choice-radio{border-color:#464646}
.choice-card.selected .choice-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:#464646}
.choice-body{flex:1;min-width:0;text-align:left}
.choice-title{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px;line-height:1.35}
.choice-desc{font-size:11.5px;color:var(--gray);line-height:1.4}
/* SEGMENTED */
.segmented{display:inline-flex;background:#f1f3f5;border-radius:10px;padding:3px;gap:2px;width:100%}
.seg-btn{flex:1;padding:9px 14px;border-radius:8px;border:0;background:0;color:var(--gray);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;gap:6px}
.seg-btn.active{background:var(--card);color:var(--navy);box-shadow:0 1px 4px rgba(15,23,42,.08)}
.seg-btn:hover:not(.active){color:var(--navy)}
/* INPUT WITH SUFFIX */
.input-suffix{display:flex;align-items:stretch;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;background:var(--card);transition:.2s;max-width:240px}
.input-suffix:focus-within{border-color:#464646;box-shadow:0 0 0 3px rgba(70,70,70,.1)}
.input-suffix input{flex:1;border:0;outline:0;padding:11px 14px;font-size:13px;font-family:inherit;color:var(--navy);background:0;width:100%;min-width:0}
.input-suffix .sfx{padding:0 14px;background:#fafbfc;border-left:1px solid var(--border);display:flex;align-items:center;font-size:12px;font-weight:600;color:var(--gray)}
/* PAY GROUP */
.pay-group{display:flex;align-items:stretch;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;background:var(--card);transition:.2s}
.pay-group:focus-within{border-color:#464646;box-shadow:0 0 0 3px rgba(70,70,70,.1)}
.pay-group select{border:0;outline:0;padding:0 14px;background:#fafbfc;border-right:1px solid var(--border);font-size:13px;font-family:inherit;font-weight:600;color:var(--navy);cursor:pointer}
.pay-group input{flex:1;border:0;outline:0;padding:11px 14px;font-size:13px;font-family:inherit;color:var(--navy);background:0;width:100%;min-width:0}
/* INFO BOX */
.info-box{background:#fef8ee;border:1px solid #fde5c0;border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;margin-top:8px;font-size:12px;color:#92400e;line-height:1.5}
.info-box .ib-icon{flex-shrink:0;width:28px;height:28px;border-radius:8px;background:#fde5c0;display:flex;align-items:center;justify-content:center;color:#b45309}
.info-box.tip{background:var(--ol);border-color:#d1d5db;color:#1a1a1a}
.info-box.tip .ib-icon{background:#d1d5db;color:var(--orange)}
.info-box strong{display:block;font-size:12.5px;margin-bottom:2px;color:#7c2d12}
/* FORM FOOTER */
.form-footer{display:flex;justify-content:space-between;align-items:center;gap:12px}
.prefill-text{font-size:12px;color:var(--orange);display:flex;align-items:center;gap:6px;font-weight:500}
.prefill-text svg{flex-shrink:0}
.btn{padding:11px 22px;border:none;border-radius:10px;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;transition:.2s;display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:#1a1a1a;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.btn-primary:hover{background:#111;transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.32)}
.btn-secondary{background:var(--card);color:var(--navy);border:1.5px solid var(--border)}
.btn-secondary:hover{background:#f1f3f5;border-color:#cbd5e1}
.btn-success{background:var(--green);color:#fff;box-shadow:0 1px 3px rgba(34,197,94,.3)}
.btn-success:hover{background:#16a34a;transform:translateY(-1px)}
/* LISTING PAGES */
.listing-page{min-height:100%;display:flex;flex-direction:column;gap:16px;min-width:0;width:100%}
.listing-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;min-width:0;width:100%}
.listing-filters{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;overflow:hidden}
.filter-label{font-size:12px;font-weight:600;color:var(--navy);margin-bottom:2px}
.filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filter-select{height:32px;min-width:118px;padding:0 11px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--gray);font-size:11px;font-family:inherit;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.filter-select svg{width:12px;height:12px}
.filter-reset{height:32px;padding:0 16px;border-radius:20px;font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer;background:#fff;border:1.5px solid #9ca3af;color:var(--navy);transition:.15s}
.filter-reset:hover{border-color:var(--navy);background:#f8f9fb}
.filter-search{height:32px;padding:0 16px;border-radius:20px;font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer;background:#1e2530;border:1.5px solid #1e2530;color:#fff;transition:.15s}
.filter-search:hover{background:#2d3748;border-color:#2d3748}
.listing-stats{display:flex;align-items:stretch;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;flex-shrink:0;align-self:flex-start}
.listing-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 22px;min-width:88px;gap:3px;border-right:1px solid var(--border);cursor:pointer;user-select:none;transition:background .12s}
.listing-stat:last-child{border-right:none}
.listing-stat:hover{background:#f8fafc}
.listing-stat.stat-selected{background:#eff6ff;box-shadow:inset 0 -3px 0 var(--orange)}
.listing-stat-count{font-size:22px;font-weight:700;line-height:1.2}
.listing-stat-label{font-size:10.5px;font-weight:500;color:var(--gray);white-space:nowrap}
.listing-stat.active .listing-stat-count,.listing-stat.approved .listing-stat-count{color:#16a34a}
.listing-stat.inactive .listing-stat-count{color:#dc2626}
.listing-stat.unapproved .listing-stat-count{color:#b45309}
.listing-stat.pending .listing-stat-count{color:#b45309}
.listing-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow-x:auto;overflow-y:visible;box-shadow:0 1px 2px rgba(15,23,42,.03);min-width:0;width:100%}
.listing-table{width:100%;min-width:700px;border-collapse:collapse;font-size:12.5px}
.listing-table th{height:42px;text-align:left;padding:0 16px;color:#111827;font-weight:600;font-size:11px;background:#fafbfc;border-bottom:1px solid var(--border);letter-spacing:.2px;white-space:nowrap}
.listing-table td{height:48px;padding:0 16px;border-bottom:1px solid #f0f1f3;color:#1a1a1a;vertical-align:middle}
.listing-table tr:last-child td{border-bottom:0}
.listing-table tbody tr:hover td{background:#fafbfc}
.listing-table th:first-child,.listing-table td:first-child{text-align:center;width:60px;font-weight:700}
.status-pill{display:inline-flex;align-items:center;justify-content:center;min-width:72px;height:24px;padding:0 10px;border-radius:20px;font-size:11px;font-weight:600;border:1.5px solid;white-space:nowrap}
.status-pill.active,.status-pill.approved{background:#f0fdf4;color:#16a34a;border-color:#86efac}
.status-pill.inactive,.status-pill.rejected{background:#fff0f0;color:#dc2626;border-color:#fca5a5}
.status-pill.unapproved{background:#fffbeb;color:#b45309;border-color:#fde68a}
.status-pill.pending{background:#fdf6d8;color:#8a6d10;border-color:#f0dfa0}
.ea-req-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.ea-req-row.ea-req-row-3col{grid-template-columns:1fr auto 1fr}
.ea-req-row:last-child{border-bottom:none}
.ea-req-main{min-width:0}
.ea-req-label{font-size:13px;font-weight:600}
.ea-req-time{font-size:11px;color:var(--gray);margin-top:2px}
.ea-req-when{display:flex;justify-content:center}
.ea-req-row>.sa-req-actions,.ea-req-row>.status-pill{justify-self:end}
.ea-req-when .ea-stack-time{align-items:center;text-align:center}
.ea-req-empty{font-size:12px;color:var(--gray);padding:8px 0}
.req-avatar{margin-top:1px}
.ea-req-requester{font-size:12px;font-weight:650;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ea-req-requester .req-by-role{font-weight:500;color:var(--gray)}
.ea-task-row{display:grid;grid-template-columns:250px 1fr 130px 170px;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}
.ea-task-row:last-child{border-bottom:none}
.ea-task-who{display:flex;align-items:center;gap:10px;min-width:0}
.ea-task-who .ea-req-requester{margin:0}
.ea-task-what{min-width:0}
.ea-task-label{font-size:13px;font-weight:600;color:var(--navy);line-height:1.4}
.ea-task-note{font-size:11.5px;color:var(--gray);margin-top:3px;line-height:1.45}
.ea-task-when{font-size:11.5px;color:var(--gray);white-space:nowrap}
.ea-task-actions{display:flex;justify-content:flex-end;flex-shrink:0}
@media (max-width:760px){
  .ea-task-row{grid-template-columns:1fr;row-gap:6px;padding:14px 0}
  .ea-task-when{order:2}
  .ea-task-actions{order:3;justify-content:flex-start}
}
.ea-stack-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.ea-stack-cols-solo{grid-template-columns:1fr}
@media (max-width:720px){.ea-stack-cols{grid-template-columns:1fr}}
.ea-notice-card{position:relative;display:flex;flex-direction:column;height:100%}
.ea-notice-card .ea-req-vlist{flex:1}
.ea-req-pin-host{position:relative}
.ea-req-pin{position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:var(--orange,#f97316);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(15,23,42,.22),0 0 0 3px var(--card);cursor:pointer;z-index:2;transition:transform .15s,box-shadow .15s}
.ea-req-pin:hover{transform:translateX(-50%) scale(1.1) rotate(-8deg);box-shadow:0 5px 12px rgba(15,23,42,.3),0 0 0 3px var(--card)}
.ea-req-pin svg{width:15px;height:15px;fill:#fff}
.ea-req-vlist{display:flex;flex-direction:column;gap:12px}
.ea-req-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 18px;cursor:pointer;box-shadow:0 1px 4px rgba(15,23,42,.06);transition:box-shadow .18s,transform .18s;display:flex;flex-direction:column}
.ea-req-card:hover{box-shadow:0 8px 20px rgba(15,23,42,.12);transform:translateY(-2px)}
.ea-stack-issue{font-size:14.5px;font-weight:700;color:var(--navy);line-height:1.4;padding-right:22px}
.ea-stack-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.ea-stack-who{display:flex;align-items:center;gap:8px;min-width:0;min-height:32px}
.ea-stack-time{font-size:11.5px;color:var(--gray);font-weight:500;white-space:nowrap;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;line-height:1.45}
.ea-stack-dot{position:absolute;top:14px;right:16px;width:9px;height:9px;border-radius:50%;flex-shrink:0;--glow:rgba(148,163,184,.4);box-shadow:0 0 0 3px var(--glow);animation:eaDotGlow 1.8s ease-in-out infinite}
.ea-dot-high{background:#dc2626;--glow:rgba(220,38,38,.45)}
.ea-dot-medium{background:#f5b921;--glow:rgba(245,185,33,.45)}
.ea-dot-low{background:#22c55e;--glow:rgba(34,197,94,.45)}
@keyframes eaDotGlow{0%,100%{box-shadow:0 0 0 3px var(--glow)}50%{box-shadow:0 0 0 7px transparent}}
@keyframes eaCardTear{to{opacity:0;transform:translateY(-18px) scale(.92) rotate(-3deg)}}
.ea-req-card.tearing{animation:eaCardTear .22s ease forwards;pointer-events:none}
.ea-stack-more{margin-top:4px;font-size:11.5px;font-weight:600;color:var(--gray);cursor:pointer;text-align:center}
.ea-stack-more:hover{color:var(--navy)}
.sa-req-actions{display:flex;gap:8px;flex-shrink:0}
.sa-req-btn{padding:5px 12px;border-radius:7px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;background:#fff;color:#1a1a1a;border:1.5px solid #1a1a1a;transition:.15s}
.sa-req-approve:hover{background:#f0fdf4;color:#16a34a;border-color:#86efac}
.sa-req-reject:hover{background:#fff0f0;color:#dc2626;border-color:#fca5a5}
.sa-req-hold:hover{background:#fffbeb;color:#b45309;border-color:#fde68a}

/* Unified decision-action buttons (Approve / Reject / Hold): black by default,
   colored only on hover or once the decision has been made — never orange. */
.action-btn{padding:11px 22px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#fff;color:#1a1a1a;border:1.5px solid #1a1a1a}
.action-btn.btn-sm{padding:7px 14px;font-size:12px}
.action-btn.action-approve:hover{background:#f0fdf4;color:#16a34a;border-color:#86efac}
.action-btn.action-reject:hover{background:#fff0f0;color:#dc2626;border-color:#fca5a5}
.action-btn.action-hold:hover{background:#fffbeb;color:#b45309;border-color:#fde68a}
.action-btn.action-approve.action-done{background:#f0fdf4;color:#16a34a;border-color:#86efac}
.action-btn.action-reject.action-done{background:#fff0f0;color:#dc2626;border-color:#fca5a5}
.action-btn.action-hold.action-done{background:#fffbeb;color:#b45309;border-color:#fde68a}
.dash-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.dash-tab{padding:9px 18px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);color:var(--navy);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s;white-space:nowrap}
.dash-tab:hover:not(.active){border-color:#cbd5e1;background:var(--light)}
.dash-tab.active{background:var(--navy);border-color:var(--navy);color:#fff}
/* -- In-page scope switch, used where one nav item now covers what used to be two (Employees:
   Direct/Global). It reuses .dash-tab so the control is the same object the tabbed pages use;
   the label in front of it is what makes this read as a filter rather than a tab strip. -- */
.pg-scope{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.pg-scope-label{font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.pg-scope-tabs{margin-bottom:0}
.dash-ref{max-width:100%}
.dash-ref-title{font-size:16px;font-weight:800;color:var(--navy);margin:0 0 4px}
.dash-ref-sub{font-size:12px;color:var(--gray);margin-bottom:18px}
.dash-stat-grid{margin-bottom:16px}
.dash-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:16px}
.dash-action-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;align-items:center;gap:14px;min-width:0}
.dash-action-icon{width:36px;height:36px;border-radius:10px;background:#f1f5f9;color:#475569;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dash-action-icon svg{width:17px;height:17px}
.dash-action-title{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:3px}
.dash-action-sub{font-size:11.5px;color:var(--gray);line-height:1.4}
.dash-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
/* -- Super Admin: Agent & Model Analytics -- */
/* Parts-of-a-whole: one track, segments in the validated sequential ramp, 2px surface gaps. */
.sa-stack{display:flex;gap:2px;height:10px;margin:14px 16px 16px}
.sa-stack-seg{border-radius:3px;min-width:4px;transition:opacity .15s}
.sa-stack:hover .sa-stack-seg{opacity:.55}
.sa-stack .sa-stack-seg:hover{opacity:1}
/* A four-column grid, so swatches, labels, counts and shares each line up down the card —
   the old flex row let every value land at a different x. */
.sa-legend{padding:0 16px 14px}
.sa-legend-row{display:grid;grid-template-columns:9px 1fr auto 40px;align-items:center;gap:10px;padding:6px 0;border-top:1px solid #f1f5f9}
.sa-legend-row:first-child{border-top:none}
.sa-legend-dot{width:9px;height:9px;border-radius:2.5px}
.sa-legend-label{font-size:12px;font-weight:600;color:var(--navy);min-width:0}
.sa-legend-val{font-size:12.5px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.sa-legend-pct{font-size:11px;font-weight:600;color:var(--gray);text-align:right;font-variant-numeric:tabular-nums}
.sa-head-note{font-size:11px;font-weight:700;color:var(--gray)}
.sa-two-col{align-items:stretch}
/* A single value is a stat, not a bar filling 100% of its own track. */
.sa-solo{padding:16px 16px 4px}
.sa-solo-val{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.4px;line-height:1.2}
.sa-solo-sub{font-size:11.5px;color:var(--gray);margin-top:3px}
/* Status moved inline beside the thing it describes — dot plus the word, never colour alone. */
.sa-sys-sub{display:flex;align-items:center;gap:6px}
.sa-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sa-dot.ok{background:#16a34a}
.sa-dot.bad{background:var(--red)}
.sa-col-apis{width:200px}
.sa-apis{display:flex;align-items:center;gap:10px}
.sa-apis-bar{flex:1 1 auto;min-width:60px;max-width:120px;height:6px;border-radius:3px;background:#eef2f6;overflow:hidden}
/* min-width so the smallest value still renders as a deliberate mark: at 1 of 142 the fill is
   sub-pixel, and a bar that thin reads as a rendering fault rather than as "very small". */
.sa-apis-bar>span{display:block;height:100%;border-radius:3px;background:#475569;min-width:3px}
.sa-apis-val{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.sa-note{margin-top:9px;padding:9px 11px;border:1px solid var(--border);border-left:3px solid var(--orange);border-radius:7px;background:#fff;font-size:11.5px;line-height:1.55;color:var(--gray)}
.sa-note b{color:var(--navy)}
/* == ANALYTICS: HERO, LEGEND, TWO CHARTS ==================================================
   Marks are thin and the chrome is recessive: 10px bars, 2px surface gaps doing the
   separating rather than borders, one hairline gridline, and no dashes anywhere. Values wear
   text tokens; only the marks wear the ramp. == */
.sa-hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(210px,1fr);gap:0;background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:16px;overflow:hidden}
.sa-hero-main{padding:22px 24px 20px;min-width:0;display:flex;flex-direction:column;justify-content:center}
/* Proportional figures on purpose — tabular-nums makes a display-size number sit loose, and
   there is no column of figures here to align against. */
.sa-hero-fig{font-size:46px;font-weight:800;color:var(--navy);letter-spacing:-1.6px;line-height:1}
.sa-hero-lab{font-size:13px;font-weight:600;color:var(--navy);margin-top:6px}
/* The meter track is the ramp's own remainder rather than a grey slot, so the full width reads
   as one quantity divided three ways instead of a bar sitting in a gutter. */
.sa-meter{display:flex;gap:2px;height:12px;margin:16px 0 12px;border-radius:4px}
.sa-meter-seg{border-radius:3px;min-width:4px;transition:opacity .15s}
.sa-meter:hover .sa-meter-seg{opacity:.5}
.sa-meter .sa-meter-seg:hover{opacity:1}
.sa-hero-legend{display:flex;flex-wrap:wrap;gap:8px 18px}
.sa-hero-side{padding:22px 22px 18px;border-left:1px solid var(--border);background:#fbfcfd;display:flex;flex-direction:column;gap:0;min-width:0}
.sa-hero-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #eef2f6;font-size:11.5px;color:var(--gray)}
.sa-hero-row b{font-size:14px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.sa-hero-row.warn b{color:#b45309}
.sa-hero-foot{margin-top:10px;font-size:11px;line-height:1.5;color:var(--gray)}
/* Legend: identity is the dot, the value is text. Never the label in the series colour. */
.sa-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:14px 18px 4px}
.sa-key-item{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--gray)}
.sa-key-dot{width:9px;height:9px;border-radius:2.5px;flex-shrink:0}
.sa-key-item b{font-size:12px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.sa-key-note{margin-left:auto;font-size:11px;font-weight:600;color:var(--gray)}
/* -- Coverage by journey -- */
.sa-cv{padding:6px 18px 18px}
.sa-cv-row{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr) 62px;align-items:center;gap:14px;padding:9px 0;border-top:1px solid #f1f5f9;cursor:pointer}
.sa-cv-row:first-child{border-top:none}
.sa-cv-row:hover .sa-cv-name{color:var(--orange)}
.sa-cv-name{font-size:12px;font-weight:700;color:var(--navy);line-height:1.35;min-width:0}
.sa-cv-track{min-width:0}
/* One scale across every row: a three-step journey draws a third the width of a nine-step one,
   so the chart reports volume as well as share. */
.sa-cv-bar{display:flex;gap:2px;height:10px;min-width:8px}
.sa-cv-seg{border-radius:3px;min-width:4px;transition:opacity .15s}
.sa-cv-bar:hover .sa-cv-seg{opacity:.5}
.sa-cv-bar .sa-cv-seg:hover{opacity:1}
.sa-cv-val{text-align:right;line-height:1.25}
.sa-cv-val b{display:block;font-size:13px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.sa-cv-val i{font-style:normal;font-size:10.5px;color:var(--gray);white-space:nowrap}
/* -- Hours: dumbbell, one hue two shades -- */
.sa-hr{padding:6px 18px 8px}
.sa-hr-row{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr) 58px;align-items:center;gap:14px;padding:11px 0;border-top:1px solid #f1f5f9}
.sa-hr-row:first-child{border-top:none}
.sa-hr-name{font-size:12px;font-weight:700;color:var(--navy);line-height:1.3;min-width:0}
.sa-hr-name i{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:var(--gray);margin-top:1px}
.sa-hr-track{position:relative;height:14px;min-width:0}
/* One hairline, solid, one step off the surface — the baseline the dots are read against. */
.sa-hr-grid{position:absolute;left:0;right:0;top:50%;height:1px;background:#eef2f6}
.sa-hr-link{position:absolute;top:50%;height:2px;transform:translateY(-1px);background:#c8d0da;border-radius:1px}
/* 10px marks with a 2px ring in the card colour, so two dots that land close stay separable.
   The ::after is the HIT TARGET, not decoration: a 14px painted dot you have to land on
   dead-centre is a tooltip nobody reaches, so the target is grown to 24px square while the mark
   stays thin. It is transparent and centred, so it costs nothing visually and overlapping
   targets still resolve to whichever dot is on top — the human one, which is the one further
   from zero and the one worth reading first. */
.sa-hr-dot{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;box-shadow:0 0 0 2px var(--card)}
.sa-hr-dot::after{content:'';position:absolute;top:50%;left:50%;width:24px;height:24px;transform:translate(-50%,-50%);border-radius:50%}
.sa-hr-dot.human{background:#0f172a}
.sa-hr-dot.agent{background:#7c8899}
.sa-hr-val{text-align:right;line-height:1.25}
.sa-hr-val b{display:block;font-size:13px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.sa-hr-val i{font-style:normal;font-size:10.5px;color:var(--gray)}
/* The axis band is part of the card's height rather than something the plot overlaps, so no row
   ever needs its own scrollbar to show its labels — and it is a row of THE SAME GRID as the
   dumbbells, so its ticks sit on the track by construction. Reproducing the track's offset with
   a calc() that guesses at the label column's resolved width put 6h about thirty pixels left of
   where the 6h dot would land, which is a chart lying quietly. */
.sa-hr-axis-row{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr) 58px;gap:14px}
.sa-hr-axis{position:relative;height:20px;min-width:0}
.sa-hr-axis span{position:absolute;top:4px;transform:translateX(-50%);font-size:10px;font-weight:600;color:#9ca3af;font-variant-numeric:tabular-nums}
.sa-hr-axis span.end{transform:translateX(-100%)}
@media(max-width:900px){
  .sa-hero{grid-template-columns:1fr}
  .sa-hero-side{border-left:none;border-top:1px solid var(--border)}
  .sa-cv-row,.sa-hr-row{grid-template-columns:minmax(0,1fr) 62px;grid-template-areas:'name val' 'track track';gap:6px 12px}
  .sa-cv-name,.sa-hr-name{grid-area:name}
  .sa-cv-track,.sa-hr-track{grid-area:track}
  .sa-cv-val,.sa-hr-val{grid-area:val}
  .sa-hr-axis-row{grid-template-columns:1fr}
}
.dash-panel{margin-bottom:16px}
.dash-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--border);font-size:13px;font-weight:800;color:var(--navy);text-transform:uppercase}
.dash-panel-head span{font-size:11px;text-transform:none;color:var(--gray);font-weight:600}
.dash-table{min-width:560px}
.dash-table th:first-child,.dash-table td:first-child{text-align:left;width:auto}
.dash-status{display:inline-flex;align-items:center;justify-content:center;min-height:20px;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:800;white-space:nowrap}
.dash-status.pending{background:#fdf6d8;color:#8a6d10}
.dash-status.approved{background:#dcfce7;color:#16a34a}
.dash-status.rejected{background:#fee2e2;color:#dc2626}
.dash-status.draft{background:#f1f5f9;color:#475569}
@media(max-width:980px){.dash-two-col{grid-template-columns:1fr}.dash-stat-grid{grid-template-columns:repeat(2,1fr)}}

/* == EMPLOYEE DASHBOARD ==================================================================
   Three tiles across, the third being the attendance control. align-items:stretch so the
   attendance tile — which is taller by content — sets the row height and the two figure
   tiles match it, rather than two short cards floating beside one tall one. */
.emp-tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch;margin-bottom:16px}
.emp-tile{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column}
.emp-tile-label{font-size:10.5px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.7px}
/* The figure is the point of these tiles, so it gets the space — margin-top:auto is deliberately
   absent: the value sits under its label, and the sub line is pushed to the bottom instead. */
.emp-tile-val{font-size:30px;font-weight:800;line-height:1.15;color:var(--navy);margin-top:14px}
.emp-tile-sub{font-size:11.5px;font-weight:500;color:var(--gray);margin-top:auto;padding-top:10px}
.emp-tile-sub-green{color:#16a34a}
/* -- Attendance tile: a read-out plus its action, so no oversized figure. -- */
.emp-att{gap:0}
.emp-att-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:12px}
.emp-att-view{border:0;background:none;padding:0;font-family:inherit;font-size:12px;font-weight:600;color:var(--gray);cursor:pointer}
.emp-att-view:hover{color:var(--navy);text-decoration:underline}
.emp-att-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.emp-att-key{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--gray);min-width:0}
.emp-att-key svg{width:14px;height:14px;flex-shrink:0;color:#94a3b8}
.emp-att-val{font-size:12.5px;font-weight:700;color:var(--navy);white-space:nowrap}
.emp-att-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.emp-att-logged{font-size:11.5px;font-weight:500;color:var(--gray)}
.emp-att-clock{border:0;border-radius:8px;padding:7px 16px;background:#16a34a;color:#fff;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s ease;white-space:nowrap}
.emp-att-clock:hover{background:#15803d}
/* -- Action Required table -- */
.emp-act-panel{margin-bottom:0}
.emp-act-panel .dash-panel-head span{cursor:pointer}
.emp-act-viewall:hover{color:var(--navy);text-decoration:underline}
.emp-act-table{min-width:640px}
.emp-act-item{font-weight:600;color:var(--navy)}
/* Type is a category, not a value — amber keeps it readable without competing with the item. */
.emp-act-type{color:#b45309;font-size:12.5px}
.emp-act-due{color:#64748b;font-size:12.5px;white-space:nowrap}
.emp-act-btn{border:1px solid var(--border);border-radius:7px;padding:5px 13px;background:#f8fafc;color:var(--navy);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.emp-act-btn:hover{background:var(--ol);border-color:#cbd5e1}
/* At two columns the attendance tile drops to its own row and spans it, rather than sitting
   half-width beside empty space. */
@media(max-width:1000px){.emp-tile-grid{grid-template-columns:repeat(2,1fr)}.emp-att{grid-column:1/-1}}
@media(max-width:620px){.emp-tile-grid{grid-template-columns:1fr}}
.row-action{width:28px;height:28px;border:0;background:transparent;color:var(--gray);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.row-action:hover{background:#f1f3f5;color:var(--navy)}
.pagination{display:flex;justify-content:flex-end;align-items:center;gap:4px;padding:12px 16px;border-top:1px solid #f0f1f3}
.page-btn{min-width:28px;height:28px;padding:0 8px;border:0;background:transparent;border-radius:6px;color:var(--gray);font-size:12px;cursor:pointer}
.page-btn.active{background:var(--orange);color:#fff;font-weight:700}
.page-btn:hover:not(.active){background:#f1f3f5;color:var(--navy)}
/* CONTRACT LOADER */
.contract-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:14px;padding:60px 40px;text-align:center;animation:fadeUp .35s cubic-bezier(.2,.8,.2,1)}
.cl-spinner{width:44px;height:44px;border:3px solid var(--ol);border-top-color:var(--orange);border-right-color:var(--orange);border-radius:50%;animation:spin .7s cubic-bezier(.5,0,.5,1) infinite;flex-shrink:0}
.cl-title{font-size:17px;font-weight:700;color:var(--navy);letter-spacing:-.2px;animation:cl-pulse 1.8s ease-in-out infinite}
.cl-sub{font-size:12.5px;color:var(--gray);line-height:1.5}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes cl-pulse{0%,100%{opacity:1}50%{opacity:.6}}
.agent-workspace-btn{position:fixed;bottom:28px;right:28px;width:56px;height:56px;border-radius:50%;background:var(--navy);border:none;cursor:pointer;display:none;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 16px rgba(15,23,42,.22);transition:all .25s cubic-bezier(.4,0,.2,1);z-index:65}
.agent-workspace-btn:hover{transform:scale(1.08);box-shadow:0 8px 24px rgba(15,23,42,.28)}
.agent-workspace-btn svg{width:24px;height:24px;color:var(--orange)}
.agent-module-content{flex:1;overflow-y:auto;padding:28px 32px;background:var(--light)}
/* SUCCESS */
.success-card{text-align:center;padding:60px 40px;display:flex;flex-direction:column;align-items:center}
.success-check{width:88px;height:88px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:24px;position:relative;animation:popIn .5s cubic-bezier(.34,1.56,.64,1)}
.success-check::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid #cbd5e1;opacity:.6}
.success-check svg{width:40px;height:40px;color:#fff}
@keyframes popIn{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
.success-meta{display:inline-flex;align-items:center;gap:8px;background:#f1f5f9;color:var(--navy);padding:6px 14px;border-radius:20px;font-size:11.5px;font-weight:600;margin-bottom:24px}
/* REVIEW */
.review-section{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:14px;transition:.2s}
.review-section:hover{border-color:#f1c27a;background:#fffdf9;box-shadow:0 2px 10px rgba(15,23,42,.04)}
.review-title{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:800;color:#050b18;margin-bottom:14px}
.review-edit{font-size:11px;color:var(--orange);font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:4px;background:var(--ol);border:1px solid #d1d5db;border-radius:999px;padding:5px 10px;font-family:inherit;transition:.18s}
.review-edit:hover{background:#fce4bf;border-color:#efbf75;transform:translateY(-1px)}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.review-row{display:flex;flex-direction:column;gap:2px;padding:6px 0;font-size:12.5px;min-width:0;color:#050b18}
.review-row .rr-label{color:#4b5563;font-weight:500;font-size:11.5px}
.review-row .rr-val{font-weight:700;color:#050b18;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.review-row .rr-val.empty{color:#b8c0cc;font-style:italic;font-weight:600}
/* LEAVE TABLE */
.leave-table{width:100%;border-collapse:separate;border-spacing:0;margin-bottom:8px;font-size:12.5px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.leave-table th{text-align:left;padding:11px 14px;background:#fafbfc;color:var(--navy);font-weight:600;font-size:11.5px;border-bottom:1px solid var(--border)}
.leave-table td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--navy)}
.leave-table tr:last-child td{border-bottom:0}
.leave-table .lt-name{font-weight:600}
.leave-table .lt-add{color:var(--orange);font-weight:500;cursor:pointer}
.leave-table .lt-total{font-weight:700}
.add-link{font-size:12px;color:var(--orange);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:8px 0;background:0;border:0;font-family:inherit}
.add-link:hover{text-decoration:underline}
/* == SEARCH OVERLAY == */
#search-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-start;justify-content:center;padding-top:80px;opacity:0;pointer-events:none;transition:opacity .18s ease}
#search-overlay.open{opacity:1;pointer-events:all}
#search-overlay .search-backdrop{position:absolute;inset:0;background:rgba(10,14,20,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#search-overlay .search-box{position:relative;z-index:1;width:100%;max-width:560px;background:#fff;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);overflow:hidden;transform:translateY(-12px) scale(.97);transition:transform .18s ease}
#search-overlay.open .search-box{transform:translateY(0) scale(1)}
#search-overlay .search-input-row{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #f0f0f0}
#search-overlay .search-input-row svg{flex-shrink:0;color:#9ca3af}
#search-overlay .search-input-row input{flex:1;border:0;outline:0;font-size:15px;font-family:inherit;color:#1a1a1a;background:transparent;line-height:1.5}
#search-overlay .search-input-row input::placeholder{color:#b0b8c4}
#search-overlay .search-input-row .search-clear{width:22px;height:22px;border-radius:50%;background:#f0f0f0;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transition:opacity .12s}
#search-overlay .search-input-row .search-clear.visible{opacity:1}
#search-overlay .search-hints{padding:10px 18px 14px;display:flex;flex-wrap:wrap;gap:6px}
#search-overlay .search-hint-chip{padding:5px 12px;border-radius:20px;background:#f5f5f5;border:1px solid #ebebeb;font-size:12px;color:#555;cursor:pointer;font-family:inherit;transition:background .12s}
#search-overlay .search-hint-chip:hover{background:#ede9fe;border-color:#c4b5fd;color:#7c3aed}
#search-overlay .search-footer{padding:8px 18px;background:#fafafa;border-top:1px solid #f0f0f0;display:flex;align-items:center;gap:6px;font-size:11px;color:#b0b8c4}
#search-overlay .search-footer kbd{background:#f0f0f0;border:1px solid #e0e0e0;border-radius:4px;padding:1px 5px;font-size:10px;color:#555;font-family:inherit}
/* ===== LEAVE POLICIES PAGE ===== */
.lp-page{display:flex;flex-direction:column;gap:16px;min-width:0;width:100%}
.lp-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lp-title{font-size:26px;font-weight:700;color:var(--navy);margin-bottom:6px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.lp-subtitle{font-size:12px;color:var(--gray)}
.lp-role-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid}
.lp-role-badge.manager{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.lp-role-badge.hr{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.lp-role-badge.super-admin{background:#faf5ff;color:#7e22ce;border-color:#e9d5ff}
.lp-add-btn{display:flex;align-items:center;gap:6px;padding:9px 18px;background:var(--orange);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:.2s;white-space:nowrap;flex-shrink:0}
.lp-add-btn:hover{background:#c76d08}
.tb-page-add{width:22px;height:22px;border-radius:50%;background:var(--orange);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:.15s;flex-shrink:0;padding:0;margin-left:6px}
.tb-page-add:hover{background:#c76d08;transform:scale(1.1)}
.tb-cost-calc{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:1.5px solid var(--border);border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;color:var(--navy);background:#fff;font-family:inherit;transition:.15s;margin-left:8px;white-space:nowrap}
.tb-cost-calc:hover{border-color:var(--orange);color:var(--orange)}
.lp-filter-bar{padding:14px 0 10px}
.lp-filter-bar-label{font-size:10.5px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px}
.lp-filter-bar-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lp-filter-bar-row .cs-wrap{width:auto;min-width:120px}
.lp-filter-bar-row .cs-trigger{height:34px;border-radius:20px;padding:0 14px;font-size:13px;white-space:nowrap}
.lp-filter-bar-row .cs-dropdown{border-radius:12px;min-width:160px;top:calc(100% + 5px)}
.lp-pill-select{border:1.5px solid var(--border);border-radius:20px;padding:6px 28px 6px 14px;font-size:13px;color:var(--navy);background:#fff;appearance:none;cursor:pointer;font-family:inherit;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;outline:none;min-width:110px;transition:.15s}
.lp-pill-select:focus{border-color:var(--orange)}
.lp-pill-reset{padding:6px 18px;border:1.5px solid var(--border);border-radius:20px;font-size:13px;color:var(--gray);background:#fff;cursor:pointer;font-family:inherit;transition:.15s;font-weight:500}
.lp-pill-reset:hover{border-color:#94a3b8;color:var(--navy)}
.lp-pill-search{padding:6px 20px;border:none;border-radius:20px;font-size:13px;color:#fff;background:#1e293b;cursor:pointer;font-family:inherit;transition:.15s;font-weight:600}
.lp-pill-search:hover{background:#0f172a}
.lp-filter-card{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 0}
.lp-select{border:1px solid var(--border);border-radius:8px;padding:8px 28px 8px 12px;font-size:13px;color:var(--navy);background:#fff;appearance:none;cursor:pointer;font-family:inherit;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;outline:none;min-width:120px}
.lp-select:focus{border-color:var(--orange)}
.lp-clear-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--gray);background:var(--card);cursor:pointer;font-family:inherit;transition:.15s}
.lp-clear-btn:hover{border-color:#94a3b8;color:var(--navy)}
.lp-table-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow-x:auto;overflow-y:visible;min-width:0;width:100%}
.lp-table{width:100%;min-width:680px;border-collapse:collapse}
.lp-table th{padding:11px 16px;text-align:left;font-size:10.5px;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);background:#fafbfc;white-space:nowrap}
.lp-table td{padding:13px 16px;font-size:13px;color:var(--navy);border-bottom:1px solid #f1f3f5;vertical-align:middle}
.lp-table tr:last-child td{border-bottom:none}
.lp-table tbody tr:hover td{background:#fafbfc}
.lp-yes{color:#16a34a;font-weight:600}
.lp-no{color:#dc2626;font-weight:600}
.lp-dash{color:#9ca3af}
.lp-status-badge{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:3px 12px;border-radius:20px;font-size:11px;font-weight:600;border:1.5px solid transparent;white-space:nowrap;min-width:68px}
.de-row--pending{background:#fffbeb}
.de-row--pending:hover{background:#fef3c7}
.de-onboard-badge{display:inline-block;width:7px;height:7px;border-radius:50%;background:#eab308;margin-left:7px;vertical-align:middle;box-shadow:0 0 0 3px #fffbeb}
.lp-status-badge.active{background:#f0fdf4;color:#16a34a;border-color:#86efac}
.lp-status-badge.inactive{background:#fff0f0;color:#dc2626;border-color:#fca5a5}
.lp-status-badge.approved{background:#f0fdf4;color:#16a34a;border-color:#86efac}
.lp-status-badge.pending{background:#fdf6d8;color:#8a6d10;border-color:#f0dfa0}
.lp-status-badge.unapproved{background:#fffbeb;color:#b45309;border-color:#fde68a}
.lp-status-badge.expired{background:#f8fafc;color:#64748b;border-color:#cbd5e1}
.lp-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.lp-edit-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border:1px solid var(--orange);border-radius:7px;font-size:12px;font-weight:600;color:var(--orange);background:#fff;cursor:pointer;transition:.15s;font-family:inherit}
.lp-edit-btn:hover{background:#f1f5f9}
.lp-info-row{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--gray)}
/* ===== EDIT LEAVE POLICY PAGE ===== */
.ep-page{display:flex;flex-direction:column;gap:18px;min-width:0;width:100%}
.ep-breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gray)}
.ep-breadcrumb a{color:var(--orange);text-decoration:none;font-weight:500}
.ep-breadcrumb a:hover{text-decoration:underline}
.ep-breadcrumb-sep{color:#d1d5db}
.ep-back{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:var(--navy);cursor:pointer;background:none;border:none;padding:0;font-family:inherit;transition:.15s;margin-top:8px}
.ep-back:hover{color:var(--orange)}
.ep-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.ep-title-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ep-title{font-size:22px;font-weight:700;color:var(--navy)}
.ep-actions{display:flex;align-items:center;gap:10px}
.ep-cancel-btn{padding:8px 20px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;color:var(--navy);background:var(--card);cursor:pointer;font-family:inherit;transition:.15s}
.ep-cancel-btn:hover{border-color:#94a3b8;background:#f8f9fb}
.ep-save-btn{padding:8px 20px;border:none;border-radius:8px;font-size:13px;font-weight:600;color:#fff;background:var(--orange);cursor:pointer;font-family:inherit;transition:.15s}
.ep-save-btn:hover{background:#c76d08}
.ep-summary-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;min-width:0;overflow:hidden}
.ep-summary-left{display:flex;align-items:center;gap:14px}
.ep-summary-icon{width:46px;height:46px;border-radius:10px;background:#f0fdf4;border:1px solid #bbf7d0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ep-summary-name{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:5px}
.ep-summary-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gray);flex-wrap:wrap}
.ep-summary-sep{color:#d1d5db}
.ep-status-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;background:#dcfce7;color:#16a34a}
.ep-status-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.ep-stats{display:flex;align-items:center;gap:0;flex-shrink:0}
.ep-stat{text-align:center;padding:0 20px;border-left:1px solid var(--border)}
.ep-stat:first-child{border-left:none}
.ep-stat-label{font-size:10px;color:var(--gray);font-weight:500;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.ep-stat-val{font-size:20px;font-weight:700;color:var(--navy)}
.ep-stat-val.green{color:#16a34a}
.ep-form-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:22px;min-width:0;overflow:hidden}
.agent-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px 24px;margin-bottom:14px;transition:.2s}
.agent-card:hover{border-color:#f1c27a;box-shadow:0 4px 16px rgba(15,23,42,.06)}
.agent-card-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s}
/* == AGENT DIRECTORY ====================================================================
   auto-fill rather than a fixed column count, so the grid keeps a readable card width at any
   viewport instead of stretching three cards across a wide monitor. */
/* One filter row above everything it scopes, never a control per group. */
.cfg-agf-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.cfg-agf{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:20px;border:1px solid var(--border);background:#fff;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--gray);cursor:pointer;transition:.15s}
.cfg-agf b{font-size:11px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.cfg-agf:hover{border-color:#cbd5e1;color:var(--navy)}
.cfg-agf.on{background:var(--navy);border-color:var(--navy);color:#fff}
.cfg-agf.on b{color:#fff;opacity:.75}
.cfg-aggrp{margin-bottom:22px}
.cfg-aggrp-head{display:flex;align-items:baseline;gap:9px;margin-bottom:11px}
.cfg-aggrp-head span{font-size:12px;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.4px}
.cfg-aggrp-head i{font-style:normal;font-size:11px;font-weight:800;color:var(--gray);font-variant-numeric:tabular-nums}
.cfg-aggrp-head em{font-style:normal;font-size:11px;color:var(--gray);margin-left:2px}
.agent-tile-shared{font-weight:800;color:var(--navy)}
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
/* A button, not a div: the whole tile is the hit area, so it should be focusable and respond
   to Enter like any other control. text-align resets the browser's button centring. */
.agent-tile{display:flex;flex-direction:column;text-align:left;font-family:inherit;cursor:pointer;
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px 14px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.agent-tile:hover{border-color:#f1c27a;box-shadow:0 6px 20px rgba(15,23,42,.08);transform:translateY(-2px)}
.agent-tile:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.agent-tile-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.agent-tile-name{font-size:14px;font-weight:700;color:var(--navy);line-height:1.35}
.agent-tile-type{font-size:11.5px;font-weight:500;color:var(--gray);margin-top:3px}
/* margin-top:auto pins the footer to the bottom so tiles with a one- or two-line name still
   line their footers up across the row. */
.agent-tile-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:14px;font-size:11.5px;font-weight:500;color:var(--gray)}
.agent-tile-open{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--navy);opacity:0;transform:translateX(-4px);transition:opacity .18s ease,transform .18s ease}
.agent-tile:hover .agent-tile-open,.agent-tile:focus-visible .agent-tile-open{opacity:1;transform:translateX(0)}
/* -- Agent detail modal -- */
/* .ct-modal.agent-modal, not .agent-modal: leaves.css loads after main.css and its .ct-modal
   base carries an equal-specificity width/max-height/overflow that would otherwise win on
   source order. overflow:hidden hands scrolling to .agent-modal-body, so the header and the
   action row stay put instead of scrolling away with the content. */
.ct-modal.agent-modal{width:min(560px,94vw);max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.agent-modal-title{display:flex;align-items:center;gap:11px;min-width:0}
.agent-modal-name{display:block;font-size:14.5px;font-weight:700;color:var(--navy)}
.agent-modal-sub{display:block;font-size:11.5px;font-weight:500;color:var(--gray);margin-top:2px}
.agent-modal-body{overflow-y:auto;flex:1;min-height:0;padding-top:4px}
.agent-modal-desc{font-size:12.5px;color:var(--gray);line-height:1.65;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.agent-modal-row{display:flex;align-items:flex-start;gap:14px;padding:11px 0;border-bottom:1px dashed var(--border)}
.agent-modal-row:last-child{border-bottom:none}
.agent-modal-key{width:96px;flex-shrink:0;font-size:11.5px;font-weight:600;color:var(--gray);padding-top:2px}
.agent-modal-val{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--navy);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.agent-modal-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:14px;flex-shrink:0}
@media(max-width:520px){.agent-grid{grid-template-columns:1fr}}
.ep-form-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.ep-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ep-form-group{display:flex;flex-direction:column;gap:6px}
.ep-form-label{font-size:12px;font-weight:600;color:var(--navy)}
.ep-form-label span.req{color:#ef4444}
.ep-form-input{padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--navy);font-family:inherit;outline:none;transition:.15s;width:100%;box-sizing:border-box}
.ep-form-input:focus{border-color:var(--orange);box-shadow:0 0 0 2px rgba(26,26,26,.1)}
.ai-ct-field-fill{background:var(--ol)!important;border-color:var(--orange)!important;transition:background .25s,border-color .25s}
.ep-form-select{padding:9px 28px 9px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--navy);font-family:inherit;appearance:none;background:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;outline:none;cursor:pointer;transition:.15s;width:100%;box-sizing:border-box}
.ep-form-select:focus{border-color:var(--orange);box-shadow:0 0 0 2px rgba(26,26,26,.1)}
.cas-modal{width:min(560px,92vw)}
.cas-modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:26px;padding-top:18px;border-top:1px solid var(--border)}
.ep-form-full{grid-column:1/-1}
.ai-wizard-form-card{padding:28px 30px}
.ai-wizard-form-grid{row-gap:26px;column-gap:32px}
.ai-wizard-form-grid .ep-form-group{gap:8px}
.ep-emp-search{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:8px;padding:8px 12px;background:var(--card);margin-bottom:10px;transition:.15s}
.ep-emp-search:focus-within{border-color:var(--orange);box-shadow:0 0 0 2px rgba(26,26,26,.1)}
.ep-emp-search input{border:none;outline:none;font-size:13px;color:var(--navy);background:transparent;flex:1;font-family:inherit}
.ep-emp-search input::placeholder{color:#9ca3af}
.ep-emp-tags{display:flex;flex-wrap:wrap;gap:7px}
.ep-emp-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 12px;border:1px solid var(--border);border-radius:6px;font-size:12px;color:var(--navy);background:#f8f9fb}
.ep-emp-tag button{border:none;background:none;cursor:pointer;color:#9ca3af;line-height:1;padding:0;font-size:14px;transition:.1s}
.ep-emp-tag button:hover{color:#ef4444}
/* ===== EMPLOYEE DUAL-PANE SELECTOR ===== */
.emp-selector{border:1px solid var(--border);border-radius:12px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:320px}
.emp-sel-pane{display:flex;flex-direction:column;min-height:0}
.emp-sel-pane:first-child{border-right:1px solid var(--border)}
.emp-sel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#fafbfc;border-bottom:1px solid var(--border);flex-shrink:0}
.emp-sel-title{font-size:10.5px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:7px}
.emp-sel-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:10px;font-weight:700;background:#e8edf4;color:#374151}
.emp-sel-count.has-selection{background:#e5e7eb;color:var(--navy)}
.emp-sel-clear{font-size:11.5px;font-weight:600;color:#ef4444;background:none;border:none;cursor:pointer;padding:2px 6px;border-radius:5px;font-family:inherit;transition:.12s}
.emp-sel-clear:hover{background:#fff0f0}
.emp-sel-search-wrap{padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.emp-sel-search{display:flex;align-items:center;gap:7px;background:#f4f6f9;border-radius:7px;padding:6px 10px;transition:.15s}
.emp-sel-search:focus-within{background:#fff;box-shadow:0 0 0 2px rgba(26,26,26,.15)}
.emp-sel-search input{border:none;outline:none;font-size:12.5px;color:var(--navy);background:transparent;flex:1;font-family:inherit}
.emp-sel-search input::placeholder{color:#9ca3af}
.emp-sel-filters{display:flex;align-items:center;gap:4px;padding:7px 10px;border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0}
.emp-sel-filter{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid transparent;cursor:pointer;font-family:inherit;background:transparent;color:#6b7280;transition:.12s}
.emp-sel-filter:hover{background:#f1f5f9;color:#374151}
.emp-sel-filter.active{background:#f1f5f9;color:var(--orange);border-color:#d1d5db}
.emp-sel-list{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.08) transparent}
.emp-sel-list::-webkit-scrollbar{width:3px}
.emp-sel-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:99px}
.emp-sel-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;transition:background .12s;border-bottom:1px solid #f5f6f8}
.emp-sel-item:last-child{border-bottom:none}
.emp-sel-item:hover{background:#f8fafc}
.emp-sel-item.selected{background:#f1f5f9}
.emp-sel-avatar{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;flex-shrink:0;color:#fff}
.emp-sel-info{flex:1;min-width:0}
.emp-sel-name{font-size:12.5px;font-weight:600;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-sel-meta{font-size:11px;color:#9ca3af;margin-top:1px}
.emp-sel-dept{display:inline-block;padding:1px 7px;border-radius:4px;font-size:10px;font-weight:600;flex-shrink:0}
.emp-sel-add{width:24px;height:24px;border-radius:6px;border:1.5px solid #d1d5db;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:.12s;flex-shrink:0;font-size:15px;line-height:1;font-family:inherit}
.emp-sel-add:hover{border-color:var(--orange);color:var(--orange);background:#f1f5f9}
.emp-sel-item.selected .emp-sel-add{border-color:#16a34a;background:#f0fdf4;color:#16a34a}
.emp-sel-remove{width:22px;height:22px;border-radius:6px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#9ca3af;transition:.12s;flex-shrink:0;font-size:14px;font-family:inherit}
.emp-sel-remove:hover{background:#fff0f0;color:#ef4444}
.emp-sel-footer{padding:8px 12px;background:#fafbfc;border-top:1px solid var(--border);flex-shrink:0}
.emp-sel-add-all{width:100%;padding:7px;border-radius:7px;border:1.5px dashed #d1d5db;background:transparent;font-size:12px;font-weight:600;color:#6b7280;cursor:pointer;font-family:inherit;transition:.15s;display:flex;align-items:center;justify-content:center;gap:5px}
.emp-sel-add-all:hover{border-color:var(--orange);color:var(--orange);background:#f1f5f9}
.emp-sel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;color:#9ca3af;text-align:center;gap:8px;flex:1}
.emp-sel-empty svg{opacity:.35}
.emp-sel-empty-text{font-size:12.5px;font-weight:500}
.emp-sel-empty-sub{font-size:11.5px;color:#b0b8c4}
/* QUICK COMPARISON */
.qcmp-wrap{margin-top:28px;margin-bottom:0}
.qcmp-label{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--navy);background:#f1f5f9;padding:4px 12px;border-radius:20px}
.qcmp-section-title{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:16px}
.qcmp-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.qcmp-table{width:100%;border-collapse:collapse}
.qcmp-th-brand{padding:16px 20px;text-align:center}
.qcmp-brand-adt{background:linear-gradient(135deg,#de7909,#f59e0b);color:#fff}
.qcmp-brand-deel{background:linear-gradient(135deg,#1e293b,#334155);color:#fff}
.qcmp-brand-name{font-size:15px;font-weight:800;display:block}
.qcmp-brand-tag{font-size:10px;opacity:.8;display:block;margin-top:2px}
.qcmp-tr{border-bottom:1px solid var(--border)}
.qcmp-tr:last-child{border-bottom:none}
.qcmp-tr:hover td{background:#fafbfc}
.qcmp-td-crit{padding:12px 20px;font-size:12px;font-weight:600;color:#374151;border-right:1px solid var(--border)}
.qcmp-td-val{padding:12px 20px;text-align:center;font-size:12px;font-weight:600;color:var(--navy)}
.qcmp-td-val.adt-col{border-right:1px solid var(--border);background:#fffdf9}
.qcmp-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
.qcmp-pill.price{background:#f1f5f9;color:var(--navy)}
.qcmp-pill.yes{background:#dcfce7;color:#16a34a}
.qcmp-pill.no{background:#fee2e2;color:#dc2626}
.qcmp-pill.spec{background:#eff6ff;color:#1d4ed8}
.qcmp-pill.gen{background:#f3f4f6;color:#6b7280}
.qcmp-pill.incl{background:#dcfce7;color:#16a34a}
.qcmp-pill.avail{background:#eff6ff;color:#1d4ed8}
.qcmp-winner-bar{background:linear-gradient(135deg,#de7909,#f59e0b);padding:12px 20px;display:flex;align-items:center;justify-content:space-between}
.qcmp-winner-text{font-size:12px;font-weight:700;color:#fff}
.qcmp-winner-tag{font-size:10px;background:rgba(255,255,255,.22);color:#fff;padding:3px 10px;border-radius:20px;font-weight:700}
/* FULL COMPARISON */
.fcmp-wrap{margin-top:24px;margin-bottom:0}
.fcmp-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.fcmp-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#fafbfc}
.fcmp-title{font-size:15px;font-weight:700;color:var(--navy)}
.fcmp-sub{font-size:11px;color:var(--gray);margin-top:2px}
.fcmp-note{font-size:10px;color:var(--gray);background:#fff;border:1px solid var(--border);border-radius:20px;padding:4px 12px;white-space:nowrap}
.fcmp-table{width:100%;border-collapse:collapse}
.fcmp-table th{padding:12px 24px;font-size:11px;font-weight:700;color:var(--gray);text-align:left;background:#fafbfc;border-bottom:2px solid var(--border)}
.fcmp-th-adt{text-align:center!important;color:var(--orange)!important}
.fcmp-th-deel{text-align:center!important;color:#334155!important}
.fcmp-table td{padding:13px 24px;font-size:12.5px;border-bottom:1px solid var(--border);color:var(--navy);vertical-align:middle}
.fcmp-table tr:last-child td{border-bottom:none}
.fcmp-table tr:hover td{background:#fafbfc}
.fcmp-td-val{text-align:center}
.fcmp-sec-row td{padding:9px 24px;background:#f8f9fb;font-size:10.5px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--border)}
.fcmp-feature-name{font-weight:600;color:var(--navy);font-size:12.5px}
.fcmp-feature-desc{font-size:11px;color:var(--gray);margin-top:2px}
.fcmp-check{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#dcfce7;color:#16a34a}
.fcmp-cross{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#fee2e2;color:#dc2626}
.fcmp-adt-col{background:#fffdf9}
.fcmp-footer{padding:14px 24px;background:#f8f9fb;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px}
.fcmp-footer-note{font-size:11px;color:var(--gray);line-height:1.5}
.fcmp-footer-btn{padding:7px 16px;background:var(--navy);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0}
.fcmp-footer-btn:hover{background:#1e293b}

/* ── My Timesheet Page ── */
.ts-filter-bar{display:flex;align-items:center;gap:10px;padding:0 0 18px;flex-shrink:0}
.ts-filter-label{font-size:12px;font-weight:600;color:var(--gray);margin-right:2px}
.ts-date-btn{display:flex;align-items:center;gap:8px;padding:0 14px;height:34px;background:var(--card);border:1px solid var(--border);border-radius:8px;font-size:12px;font-weight:500;color:var(--navy);cursor:pointer;white-space:nowrap}
.ts-date-btn svg{width:14px;height:14px;stroke:var(--gray);flex-shrink:0;fill:none}
.ts-date-chev{width:10px!important;height:10px!important;stroke:var(--gray)!important}
.ts-btn-reset{height:34px;padding:0 16px;border-radius:8px;border:1px solid var(--border);background:var(--card);font-size:12px;font-weight:500;color:var(--navy);cursor:pointer}
.ts-btn-reset:hover{background:var(--light)}
.ts-btn-search{height:34px;padding:0 18px;border-radius:8px;border:none;background:var(--navy);color:#fff;font-size:12px;font-weight:600;cursor:pointer}
.ts-btn-search:hover{background:#1e293b}
.ts-user-bar{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 20px;margin-bottom:16px}
.ts-user-left{display:flex;align-items:center;gap:14px}
.ts-user-av{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ts-user-name{font-size:14px;font-weight:700;color:var(--navy)}
.ts-user-role{display:inline-flex;align-items:center;margin-top:4px;font-size:11px;font-weight:600;color:#2563eb;background:#dbeafe;padding:2px 8px;border-radius:20px}
.ts-user-right{display:flex;align-items:center;gap:8px}
.ts-month-btn{display:flex;align-items:center;gap:7px;padding:0 13px;height:32px;background:var(--card);border:1px solid var(--border);border-radius:8px;font-size:12px;font-weight:600;color:var(--navy);cursor:pointer}
.ts-month-btn svg{width:13px;height:13px;stroke:var(--gray);fill:none;flex-shrink:0}
.ts-refresh-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ts-refresh-btn:hover{background:var(--light)}
.ts-refresh-btn svg{width:14px;height:14px;stroke:var(--gray);fill:none}
.ts-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.ts-stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 20px}
.ts-stat-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.ts-stat-label{font-size:11px;font-weight:600;color:var(--gray);letter-spacing:.3px}
.ts-stat-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ts-stat-ico svg{width:15px;height:15px;fill:none}
.ts-stat-val{font-size:28px;font-weight:800;color:var(--navy);line-height:1}
.ts-stat-sub{font-size:11px;color:var(--gray);margin-top:4px}
.ts-stat-vs{font-size:11px;font-weight:500;margin-top:10px;display:flex;align-items:center;gap:4px}
.ts-stat-vs.pos{color:var(--green)}
.ts-stat-vs.neu{color:var(--gray)}
.ts-cal-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:16px}
.ts-cal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border)}
.ts-cal-title{font-size:14px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:10px}
.ts-inprog{font-size:10px;font-weight:600;padding:3px 9px;border-radius:20px;background:#dbeafe;color:#1d4ed8}
.ts-cal-legend{display:flex;align-items:center;gap:14px}
.ts-leg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--gray);font-weight:500}
.ts-leg-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ts-col-hdrs{display:grid;grid-template-columns:62px repeat(5,1fr) 88px 88px;background:var(--light);border-bottom:1px solid var(--border)}
.ts-col-hdr{padding:9px 10px;font-size:10px;font-weight:700;letter-spacing:.6px;color:var(--gray);text-align:center}
.ts-col-hdr.we{color:#d97706;background:rgba(254,243,226,.6)}
.ts-cal-row{display:grid;grid-template-columns:62px repeat(5,1fr) 88px 88px;border-bottom:1px solid var(--border)}
.ts-cal-row:last-child{border-bottom:none}
.ts-week-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 4px;background:var(--light);border-right:1px solid var(--border)}
.ts-wk-label{font-size:10px;font-weight:600;color:var(--gray)}
.ts-wk-cb{width:14px;height:14px;accent-color:var(--orange);cursor:pointer}
.ts-day-cell{padding:10px 12px;border-right:1px solid var(--border);min-height:76px;display:flex;flex-direction:column;gap:3px;cursor:pointer;transition:background .12s}
.ts-day-cell:last-child{border-right:none}
.ts-day-cell.we{background:rgba(254,243,226,.3);cursor:default}
.ts-day-cell.is-today{background:rgba(26,26,26,.06)}
.ts-day-cell.is-selected{background:rgba(26,26,26,.1)}
.ts-day-cell:not(.we):not(.ts-empty):hover{background:rgba(26,26,26,.05)}
.ts-empty{background:transparent;cursor:default}
.ts-day-num{font-size:13px;font-weight:700;color:var(--navy);line-height:1}
.ts-day-num.today{color:var(--orange)}
.ts-day-pill{font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;display:inline-flex;align-items:center;gap:3px;letter-spacing:.2px;width:fit-content;margin-top:2px}
.ts-day-pill.present{background:#dcfce7;color:#15803d}
.ts-day-pill.absent{background:#fee2e2;color:#dc2626}
.ts-day-pill.inprog{background:#fef9c3;color:#854d0e}
.ts-day-pill.we{background:#f3f4f6;color:#9ca3af}
.ts-day-pill.future{color:#cbd5e1}
.ts-day-hrs{font-size:10px;color:var(--gray);margin-top:2px}
.ts-day-view-btn{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--orange);margin-top:auto;cursor:pointer}
.ts-day-view-btn svg{width:10px;height:10px;stroke:var(--orange);fill:none}
.ts-day-src{font-size:9px;color:#94a3b8;font-weight:500;margin-left:auto;margin-top:auto}
.ts-footer{display:flex;justify-content:flex-end;padding:4px 0 8px}
.ts-submit-btn{padding:10px 26px;background:var(--navy);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.ts-submit-btn:hover{background:#1e293b}
/* Timesheet sidebar */
.ts-split{display:block}
.ts-main{display:block}
.ts-sb-old-removed{display:none}
.ts-sb-old-open-removed{display:none}
.ts-sb-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.ts-sb-title{font-size:14px;font-weight:700;color:var(--navy)}
.ts-sb-close{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.ts-sb-close svg{width:12px;height:12px;stroke:var(--gray);fill:none}
.ts-sb-inner{padding:16px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:12px}
.ts-sb-date-box{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#eff6ff;border-radius:10px}
.ts-sb-date-box svg{width:16px;height:16px;stroke:#3b82f6;fill:none;flex-shrink:0}
.ts-sb-date-val{font-size:13px;font-weight:700;color:var(--navy)}
.ts-sb-date-day{font-size:11px;color:#3b82f6;font-weight:500;margin-top:1px}
.ts-sb-section{background:var(--light);border-radius:10px;padding:12px 14px}
.ts-sb-sec-title{font-size:10px;font-weight:700;color:var(--gray);letter-spacing:.5px;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-bottom:10px}
.ts-sb-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ts-sb-dot.in{background:#22c55e}
.ts-sb-dot.out{background:#ef4444}
.ts-sb-field{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ts-sb-field:last-child{margin-bottom:0}
.ts-sb-field svg{width:14px;height:14px;stroke:var(--gray);fill:none;flex-shrink:0}
.ts-sb-flabel{font-size:11px;color:var(--gray);width:58px;font-weight:500}
.ts-sb-fval{font-size:12px;font-weight:600;color:var(--navy)}
.ts-sb-total{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--light);border-radius:10px}
.ts-sb-total-label{font-size:12px;font-weight:600;color:var(--navy)}
.ts-sb-total-val{font-size:20px;font-weight:800;color:var(--orange)}
.ts-sb-src{font-size:11px;color:var(--gray);padding:0 2px}
.ts-sb-actions{margin-top:auto;flex-shrink:0;padding:12px 0 0}
.ts-sb-submit{width:100%;padding:11px;background:var(--navy);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.ts-sb-submit:hover{background:#1e293b}
/* ── Timesheet overlay sidebar ── */
.ts-overlay{position:fixed;inset:0;z-index:400;display:flex;justify-content:flex-end}
.ts-overlay-bg{position:absolute;inset:0;background:rgba(10,18,30,.45);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.ts-overlay-panel{position:relative;z-index:1;width:380px;height:100vh;background:var(--card);display:flex;flex-direction:column;box-shadow:-12px 0 48px rgba(0,0,0,.18);overflow:hidden;animation:ts-sb-slide .22s ease}
@keyframes ts-sb-slide{from{transform:translateX(60px);opacity:0}to{transform:translateX(0);opacity:1}}
/* ── All Timesheet Page ── */
.at-top{display:flex;align-items:flex-start;gap:16px;padding:0 0 20px;flex-wrap:wrap}
.at-filter-label{font-size:12px;font-weight:600;color:var(--gray);white-space:nowrap;margin-right:2px}
.at-sel-wrap{position:relative;display:inline-flex;align-items:center}
.at-sel{appearance:none;-webkit-appearance:none;height:34px;padding:0 30px 0 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);font-size:12px;font-weight:500;color:var(--navy);cursor:pointer;min-width:100px;outline:none}
.at-sel:focus{border-color:var(--orange)}
.at-chev{position:absolute;right:9px;pointer-events:none;width:11px;height:11px;stroke:var(--gray);fill:none}
.at-input{height:34px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);font-size:12px;color:var(--navy);width:148px;outline:none}
.at-input::placeholder{color:#94a3b8}
.at-input:focus{border-color:var(--orange)}
.at-btn-reset{height:34px;padding:0 18px;border-radius:8px;border:1.5px solid var(--border);background:var(--card);font-size:12px;font-weight:600;color:var(--navy);cursor:pointer}
.at-btn-reset:hover{background:var(--light)}
.at-btn-search{height:34px;padding:0 22px;border-radius:8px;border:none;background:var(--navy);color:#fff;font-size:12px;font-weight:600;cursor:pointer}
.at-btn-search:hover{background:#1e293b}
.at-stats{display:flex;align-items:stretch;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;flex-shrink:0;align-self:flex-start}
.at-stat-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 22px;min-width:88px;gap:3px;border-right:1px solid var(--border)}
.at-stat-item:last-child{border-right:none}
.at-stat-num{font-size:22px;font-weight:700;line-height:1.2}
.at-stat-lbl{font-size:10.5px;font-weight:500;color:var(--gray);white-space:nowrap}
.at-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.at-table{width:100%;border-collapse:collapse}
.at-th{padding:11px 16px;font-size:11px;font-weight:700;color:var(--gray);text-align:left;letter-spacing:.3px;background:var(--light);border-bottom:1px solid var(--border)}
.at-td{padding:14px 16px;font-size:13px;color:var(--navy);border-bottom:1px solid var(--border);vertical-align:middle}
.at-tr:last-child .at-td{border-bottom:none}
.at-tr:hover .at-td{background:#fafafa}
.at-sno{font-size:13px;font-weight:700;color:var(--orange)}
.at-emp-id{font-size:13px;font-weight:600}
.at-emp-name{font-size:13px;font-weight:600}
.at-badge-active{display:inline-flex;padding:3px 11px;border-radius:20px;font-size:11px;font-weight:700;background:#dcfce7;color:#16a34a}
.at-badge-inactive{display:inline-flex;padding:3px 11px;border-radius:20px;font-size:11px;font-weight:700;background:#fee2e2;color:#dc2626}
.at-badge-unfilled{display:inline-flex;padding:3px 11px;border-radius:20px;font-size:11px;font-weight:700;background:transparent;border:1.5px solid #eab308;color:#b45309}
.at-badge-filled{display:inline-flex;padding:3px 11px;border-radius:20px;font-size:11px;font-weight:700;background:transparent;border:1.5px solid #22c55e;color:#16a34a}
.at-actions{display:flex;align-items:center;gap:8px}
.at-act-btn{width:32px;height:32px;border-radius:7px;border:1px solid var(--border);background:var(--card);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,border-color .12s}
.at-act-btn:hover{background:var(--ol);border-color:var(--orange)}
.at-act-btn svg{width:15px;height:15px;stroke:var(--gray);fill:none}
.at-act-btn:hover svg{stroke:var(--orange)}
.at-pagination{display:flex;align-items:center;justify-content:flex-end;padding:14px 20px;gap:5px}
.at-pg-btn{min-width:30px;height:30px;border-radius:6px;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:600;color:var(--gray);padding:0 6px}
.at-pg-btn.active{background:var(--orange);border-color:var(--orange);color:#fff}
.at-pg-btn:hover:not(.active){background:var(--light)}
.at-pg-arr{width:30px;height:30px;border-radius:6px;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer}
/* ── COMPANY SETTINGS PAGE ── */
.cs-page{display:block}
.cs-tab-strip{display:flex;align-items:stretch;border-bottom:2px solid var(--border);background:var(--card);flex-shrink:0;overflow-x:auto;padding:0 2px;scrollbar-width:none;gap:0}
.cs-tab-strip::-webkit-scrollbar{display:none}
.cs-page-tab{padding:12px 16px;border:none;background:none;font-size:13px;font-weight:500;color:var(--gray);cursor:pointer;font-family:inherit;white-space:nowrap;border-bottom:2.5px solid transparent;margin-bottom:-2px;transition:.15s;display:inline-flex;align-items:center}
.cs-page-tab.active{color:var(--orange);border-bottom-color:var(--orange);font-weight:600}
.cs-page-tab:hover:not(.active){color:var(--navy)}
.cs-tab-content{padding:20px 0 0}
.cs-tab-header{display:flex;justify-content:flex-end;margin-bottom:16px}
.cs-edit-btn{display:flex;align-items:center;gap:5px;padding:5px 14px;font-size:12px;font-weight:600;color:var(--orange);background:none;border:1.5px solid var(--orange);border-radius:7px;cursor:pointer;font-family:inherit;transition:.15s}
.cs-edit-btn:hover{background:#f1f5f9}
.cs-add-btn{color:var(--orange);background:none;border:none;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.cs-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.cs-field-card{background:#f8f9fb;border:1px solid #eef0f3;border-radius:10px;padding:12px 14px;display:flex;align-items:flex-start;gap:10px}
.cs-field-card.wide{grid-column:span 2}
.cs-field-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#9ca3af;margin-top:2px}
.cs-field-icon svg{width:15px;height:15px}
.cs-field-content{flex:1;min-width:0}
.cs-field-label{font-size:11px;color:#9ca3af;font-weight:500;margin-bottom:4px}
.cs-field-value{font-size:13.5px;font-weight:600;color:#1e293b;line-height:1.4}
.cs-section-header{display:flex;align-items:center;justify-content:space-between;margin:20px 0 12px}
.cs-section-title{font-size:13.5px;font-weight:700;color:var(--navy)}
.cs-table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.cs-th{padding:9px 12px;text-align:left;font-size:11px;font-weight:600;color:#6b7280;background:#f8fafc;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.4px}
.cs-td{padding:10px 12px;font-size:13px;color:var(--navy);border-bottom:1px solid #f1f5f9}
.cs-tr:last-child .cs-td{border-bottom:none}
.cs-empty-row{padding:28px;text-align:center;color:#9ca3af;font-size:13px}
.cs-sub-tabs{display:flex;gap:0;border-bottom:1.5px solid var(--border);margin-bottom:16px}
.cs-sub-tab{padding:8px 16px;border:none;background:none;font-size:13px;font-weight:500;color:var(--gray);cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:.15s}
.cs-sub-tab.active{color:var(--orange);border-bottom-color:var(--orange);font-weight:600}
.cs-sub-tab:hover:not(.active){color:var(--navy)}
.cs-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #f1f5f9}
.cs-toggle-row:last-child{border-bottom:none}
.cs-toggle-label{font-size:13px;color:var(--navy)}
.cs-toggle{position:relative;display:inline-flex;width:40px;height:22px;cursor:pointer;flex-shrink:0}
.cs-toggle input{opacity:0;width:0;height:0;position:absolute}
.cs-toggle-slider{position:absolute;inset:0;background:#d1d5db;border-radius:99px;transition:.2s}
.cs-toggle-slider:before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.cs-toggle input:checked+.cs-toggle-slider{background:#22c55e}
.cs-toggle input:checked+.cs-toggle-slider:before{transform:translateX(18px)}
.cs-role-direct{color:#3b82f6;font-weight:600}
.cs-role-entity{color:var(--orange);font-weight:600}
.cs-status-active{color:#16a34a;font-weight:600;font-size:13px}
.at-pg-arr:hover{background:var(--light)}
.at-pg-arr svg{width:13px;height:13px;stroke:var(--gray);fill:none}
/* ── MY PROFILE PAGE ── */
.prof-page{gap:20px}
.prof-hero-card{display:flex;align-items:center;gap:20px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px 28px;flex-wrap:wrap}
.prof-avatar-wrap{position:relative;flex-shrink:0}
.prof-avatar{width:72px;height:72px;border-radius:50%;background:var(--ol);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:var(--orange);border:3px solid #fde68a}
.prof-avatar-badge{position:absolute;bottom:2px;right:2px;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #86efac;display:flex;align-items:center;justify-content:center}
.prof-hero-info{flex:1;min-width:0}
.prof-hero-name{font-size:20px;font-weight:800;color:var(--navy);margin-bottom:6px}
.prof-hero-role{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.prof-role-badge{background:#f1f5f9;color:var(--navy);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.prof-hero-entity{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--gray);font-weight:500}
.prof-hero-entity svg{color:var(--gray)}
.prof-hero-meta{font-size:11.5px;color:var(--gray)}
.prof-edit-btn{display:flex;align-items:center;gap:6px;padding:8px 18px;font-size:13px;margin-left:auto;flex-shrink:0}
.prof-body{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}
@media(max-width:900px){.prof-body{grid-template-columns:1fr}}
.prof-left,.prof-right{display:flex;flex-direction:column;gap:18px}
.prof-section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.prof-section-hdr .policy-section-title{margin-bottom:0}
.prof-section-hdr svg{color:var(--gray)}
.prof-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prof-field{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--light)}
.prof-field-icon{width:32px;height:32px;border-radius:8px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gray)}
.prof-field-body{min-width:0}
.prof-field-label{font-size:10.5px;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.prof-field-val{font-size:13px;font-weight:600;color:var(--navy);line-height:1.4;word-break:break-word}
.prof-stats-card{}
.prof-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prof-stat{background:var(--light);border:1px solid var(--border);border-radius:10px;padding:14px 16px;text-align:center}
.prof-stat-num{font-size:26px;font-weight:800;line-height:1.1;margin-bottom:4px}
.prof-stat-lbl{font-size:11px;font-weight:500;color:var(--gray)}
.prof-notif-list{display:flex;flex-direction:column;gap:0}
.prof-notif-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #f1f5f9}
.prof-notif-row:last-child{border-bottom:none;padding-bottom:0}
.prof-notif-label{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px}
.prof-notif-desc{font-size:11.5px;color:var(--gray)}
.prof-toggle{width:38px;height:21px;border-radius:99px;background:#d1d5db;position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
.prof-toggle::after{content:'';position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.prof-toggle.on{background:#22c55e}
.prof-toggle.on::after{transform:translateX(17px)}
.prof-activity-list{display:flex;flex-direction:column;gap:0}
.prof-activity-row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid #f1f5f9}
.prof-activity-row:last-child{border-bottom:none;padding-bottom:0}
.prof-activity-dot{width:9px;height:9px;border-radius:50%;background:#d1d5db;flex-shrink:0;margin-top:4px}
.prof-activity-dot.active{background:var(--orange)}
.prof-activity-action{font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:2px}
.prof-activity-time{font-size:11px;color:var(--gray)}
/* ── SWITCH ENTITY PAGE ── */
.se-page{position:fixed;inset:0;background:#0a0a14;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1000}
.se-min-bg{position:absolute;inset:0;background:linear-gradient(145deg,#0d0d1f 0%,#110828 55%,#080e1e 100%)}
.se-center{position:relative;z-index:1;width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:0}
.se-min-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:40px 28px 28px;box-shadow:0 4px 24px rgba(0,0,0,.35)}
.se-icon-wrap{width:60px;height:60px;border-radius:18px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:18px;box-shadow:0 8px 32px rgba(0,0,0,.35)}
.se-title{font-size:26px;font-weight:800;color:#fff;margin:0 0 8px;text-align:center;letter-spacing:-.3px;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.se-subtitle{font-size:13.5px;color:rgba(255,255,255,.55);text-align:center;margin:0 0 28px;line-height:1.6;max-width:320px}
.se-dd-wrap{position:relative;width:100%;margin-bottom:20px}
.se-dd-trigger{display:flex;align-items:center;gap:10px;padding:0 14px;height:50px;background:rgba(255,255,255,.06);border-radius:14px;cursor:pointer;border:1.5px solid rgba(255,255,255,.14);box-shadow:0 8px 32px rgba(0,0,0,.3);transition:box-shadow .18s,border-color .18s,background .18s;user-select:none;backdrop-filter:blur(16px)}
.se-dd-trigger:hover{box-shadow:0 10px 40px rgba(0,0,0,.4);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.1)}
.se-dd-sel-initials{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.se-dd-sel-name{flex:1;font-size:14px;font-weight:700;color:#fff}
.se-dd-chev{color:rgba(255,255,255,.4);flex-shrink:0;transition:transform .2s}
.se-dd-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.06);overflow:hidden;display:none;z-index:20;animation:seFadeIn .15s ease}
.se-dd-panel.open{display:block}
@keyframes seFadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.se-dd-option{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .12s}
.se-dd-option:hover{background:#f1f5f9}
.se-dd-option.active{background:#f1f5f9}
.se-dd-opt-initials{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0}
.se-dd-opt-info{flex:1;min-width:0}
.se-dd-opt-name{font-size:13.5px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:6px}
.se-dd-curr{font-size:10px;font-weight:700;background:#dcfce7;color:#15803d;border-radius:5px;padding:1px 6px}
.se-dd-opt-sub{font-size:11.5px;color:#9ca3af;margin-top:1px}
.se-dd-check{color:var(--orange);display:flex;align-items:center}
.se-btns{display:flex;gap:10px;width:100%}
.se-cancel{flex:1;height:46px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.4);border-radius:12px;font-size:14px;font-weight:600;color:#fff;cursor:pointer;font-family:inherit;backdrop-filter:blur(8px);transition:background .15s}
.se-cancel:hover{background:rgba(255,255,255,.26)}
.se-proceed{flex:2;height:46px;background:#fff;border:none;border-radius:12px;font-size:14px;font-weight:700;color:var(--orange);cursor:pointer;font-family:inherit;box-shadow:0 4px 20px rgba(0,0,0,.12);transition:transform .12s,box-shadow .12s}
.se-proceed:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.18)}
.se-proceed:active{transform:translateY(0)}
/* Profile tabs */
.prof-tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px;overflow-x:auto}
.prof-tab{padding:10px 20px;font-size:13px;font-weight:600;border:none;background:none;cursor:pointer;white-space:nowrap;font-family:inherit;color:#6b7280;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}
.prof-tab.active{color:var(--orange);border-bottom-color:var(--orange)}
.prof-tab:hover:not(.active){color:var(--navy)}
.prof-tab-body{width:100%}
/* Profile attachments grid */
.prof-att-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.prof-att-item{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid #f1f5f9;border-right:1px solid #f1f5f9}
.prof-att-item:nth-child(3n){border-right:none}
.prof-att-icon{color:#9ca3af;flex-shrink:0;display:flex;align-items:center}
.prof-att-name{flex:1;font-size:13px;color:var(--navy);font-weight:500}
.prof-att-upload{background:none;border:none;cursor:pointer;color:#9ca3af;display:flex;align-items:center;padding:4px;border-radius:6px;transition:color .15s,background .15s}
/* == AI EXECUTIVE MODULE == */
.ai-exec-page{max-width:1180px;margin:0 auto;width:100%}
.btn.btn-sm{padding:7px 14px;font-size:12px}
.status-pill.available{background:#eff6ff;color:#2563eb;border-color:#93c5fd}
.status-pill.draft{background:#f8fafc;color:#64748b;border-color:#cbd5e1}
/* Journey cards (dashboard) */
.ai-journey-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-top:4px}
.ai-journey-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:26px 26px 22px;display:flex;flex-direction:column;gap:18px;transition:.2s;min-width:0;cursor:pointer}
.ai-journey-card:hover{border-color:#f1c27a;box-shadow:0 14px 32px rgba(15,23,42,.14);transform:translateY(-3px)}
.ai-journey-card:active{transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,23,42,.12)}
.ai-journey-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-width:0}
.ai-journey-name{font-size:15.5px;font-weight:700;color:var(--navy);line-height:1.4;min-width:0}
.ai-journey-desc{font-size:12px;color:var(--gray);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Dashboard: bigger journey cards, no coverage % */
/* Compact journey cards. The old treatment (34px padding, 220px min-height, 20px title, a
   full-width black CTA) made each card a hero section; three of them filled the screen. Sized
   down so the grid reads as a set of options, not a stack of banners. */
.ai-journey-grid-lg{grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px}
/* The launcher card. Four things carry it, and they are the same four every console-grade card
   uses: a settled resting state, one clear line of hierarchy, a readable measure, and an action
   that sits in its own footer rather than floating in whitespace.

   Resting elevation is a 1px hairline plus a barely-there shadow — enough to lift the card off
   the page ground without competing with the content. Hover darkens the border and lifts 2px;
   it does NOT recolour. The orange hover this inherited was the only warm pixel on an otherwise
   monochrome page, so it read as a warning rather than as "clickable". */
/* cursor:default overrides the base card's pointer: the body of these cards no longer navigates
   anywhere, and a pointer would promise a click that does nothing. The footer action carries the
   click; the locked variant re-adds its own pointer inline. */
.ai-journey-card-lg{padding:22px 24px 0;gap:0;border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:border-color .18s,box-shadow .18s,transform .18s;cursor:default}
.ai-journey-card-lg:hover{border-color:#cbd5e1;box-shadow:0 6px 20px rgba(15,23,42,.09);transform:translateY(-2px)}
.ai-journey-card-lg:active{transform:translateY(0);box-shadow:0 2px 8px rgba(15,23,42,.07)}
.ai-journey-card-lg .ai-journey-card-head{align-items:center;gap:13px;margin-bottom:14px}
.ai-journey-card-lg .ai-journey-icon{width:40px;height:40px;border-radius:11px;background:#f8fafc;border-color:#e8edf3}
.ai-journey-card-lg .ai-journey-icon svg{width:19px;height:19px}
/* Monochrome on hover, matching the rest of the journey language. */
.ai-journey-card-lg:hover .ai-journey-icon{background:#f1f5f9;border-color:#cbd5e1;color:var(--navy)}
.ai-journey-card-lg .ai-journey-head-text{padding-top:0}
.ai-journey-card-lg .ai-journey-name{font-size:16.5px;font-weight:700;letter-spacing:-.2px;line-height:1.35}
/* 52ch is the readable measure for a line and a half at this size — long enough to say what the
   journey does, short enough that the eye never has to hunt for the next line's start. */
.ai-journey-card-lg .ai-journey-desc{font-size:13px;line-height:1.62;color:var(--gray);white-space:normal;overflow:visible;text-overflow:clip;max-width:52ch;margin-bottom:18px}
/* The action gets its own footer, divided by a hairline. Floating in open space it read as an
   afterthought and left an uneven gap under every card of differing description length; a
   footer makes every card in the row end on the same line whatever its copy does. */
.ai-journey-card-lg .ai-journey-cta-btn{align-self:stretch;margin:0 -24px;padding:14px 24px;width:calc(100% + 48px);border-top:1px solid var(--border);border-radius:0 0 14px 14px;justify-content:flex-start;background:transparent;color:var(--navy);font-size:13px;font-weight:600;letter-spacing:-.1px;box-shadow:none;transform:none;transition:background .15s,color .15s}
/* The inherited .btn-primary:hover lifts and shadows the button; inside a footer that would peel
   it off the card, so both are cancelled and the feedback is a ground tint instead. */
.ai-journey-card-lg .ai-journey-cta-btn:hover{background:#f8fafc;color:#000;box-shadow:none;transform:none}
.ai-journey-card-lg .ai-journey-cta-btn::after{content:'\2192';margin-left:8px;transition:transform .18s}
.ai-journey-card-lg:hover .ai-journey-cta-btn::after{transform:translateX(3px)}
.ai-journey-card-lg .ai-journey-draft-banner{margin-bottom:16px}
/* Activated is a state, not a headline: tighter, quieter, and aligned to the title's optical
   centre rather than shouting from the corner. */
.ai-journey-card-lg .ai-journey-active-badge{align-self:center;font-size:9px;letter-spacing:.6px;padding:3px 9px;background:#f8fafc;border-color:#e2e8f0;color:#64748b}
.ai-journey-card-lg .ai-journey-active-dot{background:#16a34a;box-shadow:0 0 0 2.5px rgba(22,163,74,.14)}
.ai-journey-card-lg.ai-journey-card-active{background:var(--card)}
.ai-journey-card-lg.ai-journey-card-active:hover{border-color:#cbd5e1}
.ai-journey-modules{display:flex;flex-wrap:wrap;gap:6px}
.ai-journey-module-tag{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:6px;background:#f1f3f5;color:var(--gray)}
.ai-journey-module-more{background:transparent;color:var(--gray);padding-left:2px}
.ai-journey-progress-block{display:flex;flex-direction:column;gap:8px}
.ai-journey-progress-top{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--gray);font-weight:500}
.ai-journey-progress-pct{color:var(--navy);font-weight:700;font-size:13px}
.ai-journey-progress-bar{height:6px;border-radius:3px;overflow:hidden;background:#f1f3f5}
.ai-journey-progress-fill{height:100%;background:var(--orange);border-radius:3px}
.ai-journey-actions{display:flex;gap:10px;margin-top:auto;padding-top:18px;border-top:1px solid #f0f1f3}
.ai-journey-actions .btn{flex:1;justify-content:center}
/* Actor / type chips */
.ai-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;border:1.5px solid;letter-spacing:.1px;white-space:nowrap}
/* Monochrome chip family. Who acts is fill weight (solid ink = AI, outlined = human, tinted =
   system/client); state chips are grey — except the two that demand a person's attention, which
   keep their alert colours: amber for Approval Required, red for Exception. */
.ai-chip-ai{background:var(--navy);color:#fff;border-color:var(--navy)}
.ai-chip-human{background:#fff;color:var(--navy);border-color:var(--navy)}
.ai-chip-system{background:#f1f5f9;color:#475569;border-color:#cbd5e1}
.ai-chip-client{background:#f8fafc;color:#475569;border-color:#cbd5e1;border-style:dashed}
.ai-chip-validation{background:#f1f5f9;color:#475569;border-color:#cbd5e1}
.ai-chip-approval{background:#fffbeb;color:#b45309;border-color:#fcd34d}
.ai-chip-exception{background:#fef2f2;color:#dc2626;border-color:#fca5a5}
.ai-chip-completed{background:#f1f5f9;color:var(--navy);border-color:#cbd5e1}
.ai-chip-queued{background:#f8fafc;color:#94a3b8;border-color:var(--border)}
.ai-chip-more{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;color:var(--gray);padding:3px 4px}
/* Run detail timeline dot states */
/* Done and current are structure, so they are ink; only the exception dot keeps colour. */
.ai-timeline-dot.run-done{border-color:var(--navy);color:#fff;background:var(--navy);font-size:13px}
.ai-timeline-dot.run-current{border-color:var(--navy);color:var(--navy);background:#fff;font-size:13px;animation:aicj-current-pulse 1.8s ease-in-out infinite}
.ai-timeline-dot.run-exception{border-color:#ef4444;color:#dc2626;background:#fee2e2;font-size:13px}
.ai-timeline-dot.run-pending{border-color:var(--border);color:#cbd5e1;background:#fff;font-size:13px}
/* Active automation: meta row + runs table */
.ai-run-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.ai-run-meta-item{display:flex;align-items:center;gap:6px;font-size:11.5px;background:var(--light);border:1px solid var(--border);border-radius:20px;padding:6px 12px}
.ai-run-meta-label{color:var(--gray);font-weight:500}
.ai-run-meta-val{color:var(--navy);font-weight:700}
.cell-primary{font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap}
.cell-sub{font-size:11px;color:var(--gray);margin-top:2px;white-space:nowrap}
.ai-run-progress{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;white-space:nowrap}
.ai-run-progress-ai{color:var(--navy)}
.ai-run-progress-human{color:#64748b}
.ai-run-table{min-width:960px}
.ai-run-table th:first-child,.ai-run-table td:first-child{text-align:left;width:auto;font-weight:400}
.ai-run-table td{height:auto;padding:14px 16px;white-space:nowrap}
/* AI Executive — Create Your Journey wizard */
.ai-wizard-stepper{display:flex;align-items:center;gap:0;margin-bottom:28px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px 24px;overflow-x:auto}
.ai-wizard-step{display:flex;align-items:center;gap:9px;cursor:pointer;flex-shrink:0}
.ai-wizard-step-circle{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex-shrink:0;border:2px solid #d1d5db;color:#9ca3af;background:transparent;transition:.15s}
.ai-wizard-step.active .ai-wizard-step-circle{border-color:var(--orange);color:var(--orange)}
.ai-wizard-step.done .ai-wizard-step-circle{background:var(--orange);border-color:var(--orange);color:#fff}
.ai-wizard-step-label{font-size:12.5px;font-weight:600;color:#9ca3af;white-space:nowrap}
.ai-wizard-step.active .ai-wizard-step-label{color:var(--orange)}
.ai-wizard-step.done .ai-wizard-step-label{color:var(--navy)}
.ai-wizard-step-line{flex:1;height:1px;background:#e5e7eb;margin:0 16px;min-width:28px}
.ai-wizard-step-line.done{background:var(--orange)}
.ai-wizard-step-header{margin-bottom:22px}
.ai-wizard-step-title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:5px}
.ai-wizard-step-subtitle{font-size:12.5px;color:var(--gray);line-height:1.6;max-width:640px}
.ai-wizard-step-body{margin-bottom:4px}
.ai-journey-pick-card{position:relative;background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:20px;cursor:pointer;transition:.18s;display:flex;flex-direction:column;gap:10px}
.ai-journey-pick-card:hover{border-color:#f1c27a;box-shadow:0 10px 24px rgba(15,23,42,.1);transform:translateY(-2px)}
.ai-journey-pick-card.selected{border-color:var(--orange);background:var(--ol);box-shadow:0 10px 24px rgba(224,123,0,.14)}
.ai-journey-pick-check{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:.15s}
.ai-journey-pick-card.selected .ai-journey-pick-check{opacity:1;transform:scale(1)}
.ai-journey-pick-icon{width:44px;height:44px;border-radius:12px;background:var(--light);display:flex;align-items:center;justify-content:center;color:var(--orange)}
.ai-journey-pick-icon svg{width:22px;height:22px}
.ai-journey-pick-name{font-size:14.5px;font-weight:700;color:var(--navy);padding-right:24px}
.ai-journey-pick-desc{font-size:12px;color:var(--gray);line-height:1.55}
.ai-journey-pick-meta{font-size:11px;color:var(--gray);font-weight:600;margin-top:auto;padding-top:10px;border-top:1px solid #f0f1f3}
.ai-journey-draft-banner{display:flex;flex-direction:column;gap:2px;background:var(--ol);border:1px solid #d1d5db;border-radius:10px;padding:10px 12px;cursor:pointer;transition:.15s}
.ai-journey-draft-banner:hover{background:#fbe4bf;border-color:var(--orange)}
.ai-journey-draft-banner-text{font-size:10.5px;font-weight:700;color:#92400e;text-transform:uppercase;letter-spacing:.3px}
.ai-journey-draft-banner-cta{font-size:12px;font-weight:600;color:var(--orange)}
.ai-draft-pending{display:flex;align-items:center;gap:14px;background:var(--ol);border:1px solid #d1d5db;border-radius:10px;padding:9px 14px}
.ai-draft-pending-text{font-size:12px;color:#92400e;font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap}
.ai-draft-pending-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0;box-shadow:0 0 0 3px rgba(26,26,26,.18)}
/* Dashboard: activated journey highlight + CTA */
.ai-journey-card-active{border-color:#94a3b8;background:linear-gradient(180deg,#f8fafc,var(--card) 55%)}
.ai-journey-card-active:hover{border-color:#64748b;box-shadow:0 8px 22px rgba(15,23,42,.10)}
/* Quiet status tag, not a solid pill — "activated" is context, and it was out-shouting the
   journey name below it. Outlined, smaller, with the dot as the live signal. */
.ai-journey-active-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:#fff;border:1px solid #cbd5e1;color:var(--navy);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:20px;flex-shrink:0;white-space:nowrap}
.ai-journey-active-dot{width:5px;height:5px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 2.5px rgba(15,23,42,.12)}
.ai-journey-card-locked{cursor:default;opacity:.55}
.ai-journey-card-locked:hover{border-color:var(--border);box-shadow:none;transform:none}
.ai-journey-lock-badge{display:inline-flex;align-items:center;gap:5px;min-width:72px;height:24px;padding:0 10px;border-radius:20px;font-size:11px;font-weight:600;border:1.5px solid var(--border);color:var(--gray);background:#f8fafc;flex-shrink:0}
/* An action, not a banner: compact pill, left-aligned with the content it acts on. The
   full-width black slab weighed more than everything it belonged to. */
.ai-journey-cta-btn{width:auto;align-self:flex-start;justify-content:center;margin-top:2px;padding:8px 22px;border-radius:99px;font-size:12.5px}
/* Journey card header: icon, then title block, then the status tag pinned right. The icon is what
   makes a card identifiable before it is read — three cards of near-identical text length were
   otherwise distinguishable only by their titles. */
.ai-journey-card-head{display:flex;align-items:flex-start;gap:12px;min-width:0}
.ai-journey-icon{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--border);color:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s}
.ai-journey-icon svg{width:19px;height:19px}
.ai-journey-card:hover .ai-journey-icon{background:var(--ol);border-color:#f1c27a;color:var(--orange)}
.ai-journey-card-locked:hover .ai-journey-icon{background:#fff;border-color:var(--border);color:var(--navy)}
.ai-journey-head-text{flex:1;min-width:0;padding-top:2px}
.ai-journey-name-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
/* Facts about the journey, not actions on it: quiet, uppercase-free, and clearly subordinate to
   both the title above and the CTA below. */
.ai-journey-meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:2px}
.ai-journey-meta-chip{font-size:11px;font-weight:600;color:var(--gray);background:#f8fafc;border:1px solid var(--border);border-radius:6px;padding:3px 8px;white-space:nowrap}
/* AI Executive: prompt-driven run flow (Create Employee / Run Payroll) */
.ai-run-icon-wrap{width:52px;height:52px;border-radius:14px;background:var(--ol);color:var(--orange);display:flex;align-items:center;justify-content:center;margin:0 0 16px}
.ai-run-icon-wrap svg{width:26px;height:26px}
.ai-run-payment-panel{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px;text-align:center;margin-top:20px}
.ai-run-card{width:100%;max-width:320px;border-radius:16px;padding:22px 24px;background:linear-gradient(135deg,#7a1530,#b5233f 60%,#8b1e3f);color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:28px;box-shadow:0 14px 30px rgba(122,21,48,.3);margin:0 auto 22px;min-height:170px}
.ai-run-card-top{display:flex;align-items:center;justify-content:space-between}
.ai-run-card-bank{font-size:13px;font-weight:800;letter-spacing:.5px}
.ai-run-card-chip{width:34px;height:26px;border-radius:5px;background:linear-gradient(135deg,#f4d78b,#d4af37)}
.ai-run-card-number{font-size:16px;letter-spacing:2.5px;font-weight:600;font-family:monospace}
.ai-run-card-bottom{display:flex;align-items:flex-end;justify-content:space-between}
.ai-run-card-label{font-size:9px;opacity:.7;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.ai-run-card-name{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.ai-run-card-visa{font-size:15px;font-weight:800;font-style:italic}
/* AI Contract Assistant — intro + live result, side by side to avoid page scroll */
.ai-ct-assist-split{display:flex;align-items:flex-start;gap:20px;margin-top:20px}
.ai-ct-assist-left{flex:0 0 400px;min-width:0}
.ai-ct-assist-right{flex:1;min-width:0}
.ai-ct-assist-idle{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;min-height:280px;border:1.5px dashed var(--border);border-radius:16px;padding:32px 28px;color:var(--gray)}
.ai-ct-assist-idle-icon{width:38px;height:38px;border-radius:50%;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:var(--gray);margin-bottom:14px}
.ai-ct-assist-idle-title{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
.ai-ct-assist-idle-text{font-size:12px;line-height:1.6;max-width:280px}
@media(max-width:840px){.ai-ct-assist-split{flex-direction:column}.ai-ct-assist-left{flex:1 1 auto;width:100%}}
/* Waiting on the engagement model — the assistant panel is held back until a type is chosen, so
   this stands in its place rather than leaving the step empty. */
.ai-ct-await{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:280px;margin-top:20px;border:1.5px dashed var(--border);border-radius:16px;padding:38px 28px;background:#fff}
.ai-ct-await-icon{width:40px;height:40px;border-radius:50%;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:var(--gray);margin-bottom:14px}
.ai-ct-await-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:7px}
.ai-ct-await-text{font-size:12.5px;color:var(--gray);line-height:1.65;max-width:400px}
.ai-ct-await-text b{color:var(--navy);font-weight:700}
/* Engagement model chooser — EOR / PEO / Contract based, above the journey rail on every step */
.ai-ct-type-row{display:flex;gap:12px;margin-bottom:14px}
.ai-ct-type-card{flex:1 1 0;min-width:0;display:flex;align-items:flex-start;gap:12px;padding:14px 15px;border:1.5px solid var(--border);border-radius:14px;background:#fff;font-family:inherit;text-align:left;transition:.16s}
.ai-ct-type-card.live{cursor:pointer}
.ai-ct-type-card.live:hover{border-color:#94a3b8;box-shadow:0 2px 12px rgba(15,23,42,.07)}
.ai-ct-type-card.selected{border-color:var(--navy);background:#f8fafc;box-shadow:0 0 0 2.5px rgba(15,23,42,.07)}
.ai-ct-type-card.locked{background:#f8fafc;border-style:dashed;cursor:not-allowed}
/* Past intake the chosen card is locked but still the answer to "what model is this run?" — it
   keeps the selected treatment and only loses the pressable affordance. */
.ai-ct-type-card.locked.selected{border-style:solid;cursor:default}
.ai-ct-type-ico{width:34px;height:34px;border-radius:10px;background:#f1f5f9;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--navy)}
.ai-ct-type-card.selected .ai-ct-type-ico{background:var(--navy);border-color:var(--navy);color:#fff}
.ai-ct-type-card.locked .ai-ct-type-ico{color:#9ca3af;opacity:.7}
.ai-ct-type-body{display:flex;flex-direction:column;min-width:0}
.ai-ct-type-title{font-size:13.5px;font-weight:800;color:var(--navy);line-height:1.25}
.ai-ct-type-sub{font-size:10.5px;font-weight:600;color:var(--gray);margin-top:2px;line-height:1.35}
.ai-ct-type-desc{font-size:11px;color:#94a3b8;line-height:1.5;margin-top:6px}
.ai-ct-type-card.locked .ai-ct-type-title,.ai-ct-type-card.locked .ai-ct-type-sub{color:#9ca3af}
.ai-ct-type-card.locked.selected .ai-ct-type-title{color:var(--navy)}
.ai-ct-type-card.locked.selected .ai-ct-type-sub{color:var(--gray)}
.ai-ct-type-card.locked.selected .ai-ct-type-ico{background:var(--navy);border-color:var(--navy);color:#fff;opacity:1}
.ai-ct-type-flag{align-self:flex-start;margin-top:9px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:20px;background:#f1f5f9;color:var(--navy);white-space:nowrap}
.ai-ct-type-flag.on{background:var(--navy);color:#fff}
.ai-ct-type-flag.locked{background:transparent;border:1px dashed #cbd5e1;color:#9ca3af}
@media(max-width:900px){.ai-ct-type-row{flex-wrap:wrap}.ai-ct-type-card{flex:1 1 240px}.ai-ct-type-desc{display:none}}
/* SCREEN ONE — the engagement-model choice, given the whole page instead of a strip above a
   progress rail for a run that has not started. One card component, two scales: the same
   .ai-ct-type-card is a full option here and a context chip once the journey is underway, so a
   reader learns the shape once. */
.ai-ct-choose{padding:26px 0 0}
.ai-ct-choose-h1{font-size:24px;font-weight:800;color:var(--navy);letter-spacing:-.4px;margin:0 0 8px}
.ai-ct-choose-sub{font-size:13.5px;color:var(--gray);line-height:1.65;max-width:620px;margin:0 0 26px}
/* Taller, evenly weighted, and never wrapped mid-row: three options compared side by side is
   the entire job of this screen, so they get equal width and equal height regardless of how
   much description each carries. */
.ai-ct-type-row.choosing{align-items:stretch;gap:16px}
.ai-ct-type-row.choosing .ai-ct-type-card{flex:1 1 0;min-height:210px;padding:22px 22px 20px;border-radius:16px;align-items:flex-start}
.ai-ct-type-row.choosing .ai-ct-type-body{flex:1;display:flex;flex-direction:column}
.ai-ct-type-row.choosing .ai-ct-type-title{font-size:17px}
.ai-ct-type-row.choosing .ai-ct-type-desc{display:block;margin-bottom:14px}
/* The flag sits above the outcome and the outcome pins to the bottom, so the three "what this
   opens" lines align across the row and can be read as one comparison rather than three. */
.ai-ct-type-row.choosing .ai-ct-type-flag{margin-top:auto}
.ai-ct-type-outcome{display:block;margin-top:12px;padding-top:11px;border-top:1px solid var(--border);font-size:11.5px;font-weight:600;color:var(--gray)}
.ai-ct-type-row.choosing .ai-ct-type-card.live:hover .ai-ct-type-outcome{color:var(--navy)}
.ai-ct-choose-skip{margin-top:22px}
@media(max-width:900px){.ai-ct-type-row.choosing .ai-ct-type-card{flex:1 1 100%;min-height:0}}
/* Contract Creation — nine stage cards, the same shape the Account Manager pipeline board uses.
   No number on the card: on the board that number is a record count, and this surface is one run.
   State carries the reading instead — filled rule + ink for done, ring for current, muted ahead.
   Contract Creation only; payroll and H2R keep the numbered dot rail (.aicj-bar below). */
.aicj-cards-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 16px 15px;margin-bottom:22px}
.aicj-cards{display:flex;align-items:stretch;min-width:0}
.aicj-cards-group{display:flex;flex-direction:column;min-width:0}
.aicj-cards-cap{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#b6c0cc;margin:0 0 9px 2px;white-space:nowrap;transition:color .3s}
.aicj-cards-cap.done{color:#94a3b8}
.aicj-cards-cap.current{color:var(--navy)}
.aicj-cards-row{display:flex;align-items:stretch;gap:7px;flex:1;min-width:0}
.aicj-cards-div{width:0;border-left:1.5px dashed #d7dee7;margin:0 15px;align-self:stretch;flex-shrink:0}
/* Content starts at the TOP, not the bottom. Bottom alignment put the two-line "Quote in
   preparation" on a different baseline from its single-line neighbours, so the row read as
   ragged; top alignment lines every number and every first line of text up across all nine. */
.aicj-card{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-height:76px;padding:14px 12px 12px;border:1px solid #e8edf3;border-radius:11px;background:#fff;overflow:hidden;transition:border-color .25s,background .25s,box-shadow .25s,transform .25s}
/* The top rule is the progress bar. Read left to right it fills ink for what is done, turns
   orange at where you are, and stays pale ahead — so the row answers "how far along" before any
   label is read. It was already here but invisible at stage 1, when nothing is filled yet. */
.aicj-card-rule{position:absolute;top:0;left:0;right:0;height:3px;background:#eef2f6;transition:background .25s}
/* The step number: the ordinal anchor the card was missing. Nine unnumbered boxes force you to
   count along the row to place yourself, which is the one thing this component is for. */
.aicj-card-num{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;line-height:1;border:1.5px solid #e2e8f0;background:#fff;color:#a3aeba;transition:background .25s,border-color .25s,color .25s}
.aicj-card-name{font-size:11.5px;font-weight:600;color:#94a3b8;line-height:1.4;transition:color .25s}
/* DONE — settled, not shouting: tinted ground, ink rule, filled numeral carrying a check. */
.aicj-card.done{background:#f8fafc;border-color:#e2e8f0}
.aicj-card.done .aicj-card-rule{background:var(--navy)}
.aicj-card.done .aicj-card-num{background:var(--navy);border-color:var(--navy);color:#fff}
.aicj-card.done .aicj-card-name{color:var(--navy)}
/* A completed stage is inspectable, so it earns a hover. Nothing else in the row moves. */
.aicj-card.done:hover{border-color:#cbd5e1;box-shadow:0 1px 5px rgba(15,23,42,.07)}
/* CURRENT — 1.5px and a soft ring, not the 2px hard black outline it used to wear. That weight
   is the vocabulary of an error or a focus trap; "you are here" should point, not shout. The
   orange belongs on the rule, where it reads as the leading edge of progress. */
.aicj-card.current{border-color:var(--navy);border-width:1.5px;box-shadow:0 0 0 3px rgba(15,23,42,.05),0 1px 6px rgba(15,23,42,.06)}
.aicj-card.current .aicj-card-rule{background:var(--orange)}
.aicj-card.current .aicj-card-num{background:var(--navy);border-color:var(--navy);color:#fff}
.aicj-card.current .aicj-card-name{color:var(--navy);font-weight:800}
.aicj-card.enter{animation:aicj-card-pop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes aicj-card-pop{from{transform:translateY(5px);opacity:.45}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.aicj-card,.aicj-card-rule,.aicj-card-num,.aicj-card-name{transition:none}.aicj-card.enter{animation:none}}
@media(max-width:1000px){.aicj-cards{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:4px}.aicj-cards-group{flex:0 0 auto}.aicj-card{flex:0 0 112px}.aicj-cards-div{margin:0 10px}}

/* The assisted-contract page is a full-bleed, viewport-height two-column split sized by a hard
   calc. The runner now sits above it, so that calc has to account for it or the split's bottom
   edge falls off screen. Additive override — the base rule is untouched. */
.aicj-wrap.has-runner .ai-ct-split{height:calc(100vh - 56px - 120px - var(--aicj-runner-h,150px))}
/* == THE SUB-STATUS RUNNER ================================================================
   The rail above says which of nine stages the run is on. This says what is happening inside
   it: the stage's sub-statuses listed vertically, one expanded in place with its evidence.

   The whole surface is monochrome except for three signals that each mean exactly one thing —
   a green verdict, an amber wait, a red failure. Everything else is ink on paper. That is the
   discipline that lets a reader scan nine rows and know instantly which one needs them. == */
/* The runner is a STATUS STRIP, not a page. It reports what the machine is doing while the
   journey itself happens below it, so it is capped: the list scrolls inside the card and the
   stage content underneath never gets pushed off screen no matter how many sub-statuses a
   stage has. 300px is roughly a third of what an uncapped card cost. */
.aicj-runner{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:14px;box-shadow:0 1px 2px rgba(15,23,42,.04);overflow:hidden;display:flex;flex-direction:column;max-height:280px}
.aicj-runner-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--border);background:#fcfdfe;flex-shrink:0}
.aicj-runner-title{font-size:11.5px;font-weight:700;color:var(--navy);letter-spacing:-.1px}
.aicj-runner-count{font-size:9px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.5px;background:#f1f5f9;border-radius:20px;padding:2px 7px}
.aicj-runner-sla{margin-left:auto;font-size:10px;color:#94a3b8;white-space:nowrap}
.aicj-runner-head .am-sub-tag{transform:scale(.92);transform-origin:left center}

/* The list. Rows are separated by hairlines rather than gaps so the column reads as one
   continuous record — a sequence of things that happened, not a set of unrelated tiles. */
/* THE SUB-STATUS RAIL — the nine-card stage rail's shape, one scale down. A reader learns the
   card once above and reads it again here without a legend: same top rule as a progress bar,
   same numbered mark, same done/current/upcoming states. The stage rail says which of nine
   stages; this says which sub-status inside it.
   Evidence is NOT in these cards — it plays in the one panel below, which is what keeps the box
   the same height whether a stage has three sub-statuses or six. */
.aicj-srail{display:flex;align-items:stretch;gap:6px;padding:11px 14px;flex-shrink:0;overflow-x:auto;scrollbar-width:thin}
.aicj-srail::-webkit-scrollbar{height:5px}
.aicj-srail::-webkit-scrollbar-thumb{background:#dde3ea;border-radius:3px}
.aicj-scard{flex:1 1 0;min-width:96px;position:relative;display:flex;align-items:center;gap:7px;padding:9px 10px 8px;border:1px solid #e8edf3;border-radius:9px;background:#fff;overflow:hidden;text-align:left;font-family:inherit;transition:border-color .2s,background .2s,box-shadow .2s}
button.aicj-scard{cursor:pointer}
button.aicj-scard:hover{border-color:#cbd5e1;box-shadow:0 1px 4px rgba(15,23,42,.06)}
/* The top rule reads left to right as a progress bar: ink for done, orange at the live one,
   pale ahead — so the rail answers "how far into this stage" before any label is read. */
.aicj-scard-rule{position:absolute;top:0;left:0;right:0;height:2.5px;background:#eef2f6;transition:background .25s}
.aicj-scard-mark{width:16px;height:16px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:800;line-height:1;border:1.5px solid #e2e8f0;background:#fff;color:#a3aeba;transition:.2s}
.aicj-scard-name{font-size:10.5px;font-weight:600;color:#94a3b8;line-height:1.3;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:color .2s}
.aicj-scard.done{background:#f8fafc}
.aicj-scard.done .aicj-scard-rule{background:var(--navy)}
.aicj-scard.done .aicj-scard-mark{background:var(--navy);border-color:var(--navy);color:#fff}
.aicj-scard.done .aicj-scard-name{color:var(--navy)}
.aicj-scard.skipped{background:#fcfdfe;border-style:dashed}
.aicj-scard.skipped .aicj-scard-mark{border-style:dashed;color:#cbd5e1}
.aicj-scard.skipped .aicj-scard-name{color:#a3aeba;text-decoration:line-through;text-decoration-color:#e2e8f0}
.aicj-scard.current{border-color:var(--navy);border-width:1.5px;background:#fff;box-shadow:0 0 0 3px rgba(15,23,42,.05)}
.aicj-scard.current .aicj-scard-rule{background:var(--orange)}
.aicj-scard.current .aicj-scard-mark{background:var(--navy);border-color:var(--navy);color:#fff}
.aicj-scard.current .aicj-scard-name{color:var(--navy);font-weight:700}
/* The way back from inspecting history. */
.aicj-runner-live{margin-left:auto;border:none;background:none;font-family:inherit;font-size:10px;font-weight:700;color:var(--navy);cursor:pointer;padding:2px 0;border-bottom:1px solid transparent}
.aicj-runner-live:hover{border-bottom-color:var(--navy)}
.aicj-ev-name{font-size:11.5px;font-weight:700;color:var(--navy)}
.aicj-ev-past{font-size:8.5px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.5px;background:#f1f5f9;border-radius:20px;padding:2px 7px}
.aicj-owner{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:#64748b;white-space:nowrap}
.aicj-owner-av{width:16px;height:16px;border-radius:50%;background:var(--navy);color:#fff;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center}
/* A skipped step's evidence IS its reason. */
.aicj-skip{font-size:11px;color:#64748b;line-height:1.55;background:#fff;border:1px dashed var(--border);border-radius:8px;padding:8px 11px}
.aicj-skip span{color:#a3aeba}

/* The evidence body, expanded in place under the active row. */
.aicj-runner-body{padding:2px 14px 12px;background:#f8fafc;border-bottom:1px solid var(--border);flex-shrink:0;animation:aicj-ev-in .24s cubic-bezier(.2,.8,.2,1)}
@keyframes aicj-ev-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.aicj-runner-body.derived{background:#fbfcfd}
.aicj-ev-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.aicj-ev-sla{font-size:9px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.5px;border:1px solid var(--border);border-radius:20px;padding:2px 7px;background:#fff}
.aicj-ev-head .aicj-agent-badge{font-size:9.5px;padding:2px 8px}
/* The explainer, clamped to one line with the full text on hover. It is context, not evidence —
   two lines of prose above the data pushed the thing the reader came for below the fold. */
.aicj-ev-note{font-size:10.5px;color:#94a3b8;line-height:1.5;margin-top:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:help}
.aicj-ev-note b{color:#64748b;font-weight:700}

/* Two columns: what it reached, what it decided. Cause on the left, consequence on the right —
   the order they happened in, which is also the order they should be read in. */
.aicj-ev-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.aicj-ev-col{min-width:0}
.aicj-ev-cap{font-size:8.5px;font-weight:800;color:#a3aeba;text-transform:uppercase;letter-spacing:.6px;margin:0 0 5px}
.aicj-ev-col .aicj-ev-cap:not(:first-child){margin-top:9px}
/* The caption and the system it reached share one baseline, so "Reached — NFAdmin" reads as a
   single statement rather than a label with a chip floating under it. */
.aicj-ev-cap-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.aicj-ev-cap-row .aicj-ev-cap{margin:0}
/* One returned field per line: label, its qualifier in small grey, value pinned right. */
.aicj-rows{background:#fff;border:1px solid var(--border);border-radius:8px;padding:1px 9px}
.aicj-row{display:flex;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px solid #f4f7fa;min-width:0}
.aicj-row:last-child{border-bottom:none}
.aicj-row-k{font-size:10.5px;font-weight:600;color:var(--navy);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aicj-row-k i{font-style:normal;font-weight:500;color:#a3aeba;margin-left:6px;font-size:9.5px}
.aicj-row-v{margin-left:auto;flex-shrink:0;font-size:10.5px;font-weight:700;color:var(--navy);white-space:nowrap}
.aicj-row-v.on{color:#16a34a}
.aicj-row-v.off{color:#a3aeba;font-weight:600}
.aicj-row-v.wait{color:#b45309}
/* The request, monospace, with its latency trailing. This one line is most of what makes a row
   read as a real call rather than a caption describing one. */
.aicj-ev-call{display:flex;align-items:baseline;gap:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9.5px;color:#475569;background:#fff;border:1px solid var(--border);border-radius:6px;padding:4px 8px;margin-bottom:6px;line-height:1.45;overflow:hidden}
.aicj-ev-call>:not(.aicj-ev-ms),.aicj-ev-call{white-space:nowrap;text-overflow:ellipsis}
.aicj-ev-ms{margin-left:auto;flex-shrink:0;font-size:9px;color:#a3aeba;font-family:inherit}
.aicj-ev-sys{font-size:9.5px;font-weight:700;color:var(--navy);background:#fff;border:1px solid var(--border);border-radius:5px;padding:2px 7px;cursor:pointer;font-family:inherit;transition:.15s}
.aicj-ev-sys:hover{border-color:#94a3b8;background:#f1f5f9}
/* Named but not a configured system record — no endpoint to open, so it must not look clickable. */
.aicj-ev-sys.unlinked{cursor:default;color:#64748b;border-style:dashed}

/* A check is a claim with a receipt: the rule, what was expected, what was actually found.
   Showing all three is the difference between "validated ✓" and evidence. */
/* Rule on top, then "expected → actual" on one line. Three stacked lines per check was the
   biggest single consumer of height here, and a comparison reads better on one line anyway. */
.aicj-check{display:grid;grid-template-columns:auto 1fr;gap:1px 7px;background:#fff;border:1px solid var(--border);border-left-width:2px;border-radius:7px;padding:5px 9px;margin-bottom:5px}
.aicj-check::before{grid-row:1/3;align-self:start;margin-top:1px;font-size:10px;font-weight:800;line-height:1.35}
.aicj-check-rule{font-size:10.5px;font-weight:600;color:var(--navy);line-height:1.4}
.aicj-check-cmp{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap}
.aicj-check-cmp i{font-style:normal;font-size:9.5px;color:#a3aeba;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aicj-check-cmp i::after{content:'\2192';margin-left:6px;color:#cbd5e1}
.aicj-check-cmp b{font-size:10px;font-weight:700;color:var(--navy)}
.aicj-check.pass{border-left-color:#16a34a}
.aicj-check.pass::before{content:'\2713';color:#16a34a}
.aicj-check.fail{border-left-color:#dc2626;background:#fffafa}
.aicj-check.fail::before{content:'\2715';color:#dc2626}
.aicj-check.fail .aicj-check-cmp b{color:#dc2626}
.aicj-check.na{border-left-color:#cbd5e1}
.aicj-check.na::before{content:'\2013';color:#cbd5e1}
.aicj-check.na .aicj-check-rule{color:#64748b}
.aicj-runner-body .agrun-kv-row{margin-top:0;gap:5px}
.aicj-runner-body .agrun-kv{padding:3px 7px;border-radius:6px}
.aicj-runner-body .agrun-kv span{font-size:8.5px}
.aicj-runner-body .agrun-kv b{font-size:10.5px}

/* The halt strip. Amber only when someone is genuinely blocked; a step waiting on a third party
   is not the reader's emergency and stays grey. */
.aicj-act{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:9px;padding:7px 10px;border-radius:9px;background:#fff;border:1px solid var(--border);border-left:2.5px solid #cbd5e1}
.aicj-act-why{font-size:10.5px;color:#64748b;line-height:1.5}
.aicj-act.act{border-left-color:var(--orange);background:#fffdf8}
.aicj-act.act .aicj-act-why{color:var(--navy);font-weight:600}
.aicj-act.handoff{border-left-color:#94a3b8}

@media(prefers-reduced-motion:reduce){.aicj-runner-body{animation:none}.aicj-sub,.aicj-sub-mark,.aicj-sub-name{transition:none}}
/* Below ~760px the two evidence columns stop being comparable and simply stack. */
@media(max-width:860px){
  .aicj-ev-grid{grid-template-columns:1fr;gap:14px}
  .aicj-runner-body{padding-left:18px}
  .aicj-sub-sum,.aicj-sub-own{max-width:38%}
}
/* Contract Creation Journey — persistent animated step bar */
/* Same measure as .ai-exec-page. In focus mode the sidebar is gone, so without a cap the stepper
   and the step under it would stretch the full viewport on a wide monitor — trading a cramped
   column for an unreadable one. */
.aicj-wrap{display:flex;flex-direction:column;max-width:1180px;margin:0 auto;width:100%;animation:fadeUp .35s cubic-bezier(.2,.8,.2,1)}
.aicj-label{display:flex;align-items:center;gap:10px;padding:0 4px;margin-bottom:10px;flex-wrap:wrap}
/* Solid ink chip — the step counter is the strongest label on the row, so it takes the strongest
   monochrome treatment; the amber border it had was the last non-alert colour on this bar. */
.aicj-label-step{font-size:10.5px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.5px;background:var(--navy);border:1px solid var(--navy);border-radius:20px;padding:3px 11px;white-space:nowrap}
.aicj-label-name{font-size:13.5px;font-weight:700;color:var(--navy)}
/* The engagement model, standing in for the three cards this row replaced. Outlined rather than
   filled: it is context the run carries, not a state that changes, so it must not compete with
   the filled step counter beside it. */
.aicj-label-model{font-size:10px;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.5px;border:1.5px solid var(--navy);border-radius:20px;padding:2px 10px;white-space:nowrap;cursor:help}
.aicj-agent-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--navy);background:#f1f5f9;border:1px solid #cbd5e1;border-radius:20px;padding:3px 10px;cursor:pointer;white-space:nowrap;transition:background .15s}
.aicj-agent-badge:hover{background:#e5e7eb}
/* Pushed to the far end of the header row: it answers a different question from the rest of the
   row (who to chase, not what this step is), so it reads better as its own column than as one
   more chip in the run. */
.aicj-label-wait{margin-left:auto;font-size:11px;font-weight:600;color:var(--gray);white-space:nowrap}
.aicj-label-wait b{font-weight:800;color:var(--navy)}
.ai-ellipsis span{animation:blink 1.4s infinite}
.ai-ellipsis span:nth-child(2){animation-delay:.2s}
.ai-ellipsis span:nth-child(3){animation-delay:.4s}
.skel-avatar,.skel-line{background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);background-size:400% 100%;animation:skeleton-sweep 1.4s ease infinite;border-radius:6px}
.skel-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0}
.skel-line{height:12px}
@keyframes skeleton-sweep{0%{background-position:100% 50%}100%{background-position:0 50%}}
.ai-toast-stack{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:200;pointer-events:none}
.ai-toast{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgba(15,23,42,.14);padding:14px 16px;max-width:320px;animation:fadeUp .25s ease}
.ai-toast-out{animation:ai-toast-out .25s ease forwards}
@keyframes ai-toast-out{to{opacity:0;transform:translateY(6px)}}
.ai-toast-icon{width:22px;height:22px;border-radius:50%;background:#dcfce7;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.ai-toast-title{font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.4}
.ai-toast-sub{font-size:11px;color:var(--gray);margin-top:2px;line-height:1.4}
/* Top-right notification-style toast (mirrors the Notifications popover .np-item look) */
.locked-toast-stack{position:fixed;top:68px;right:24px;display:flex;flex-direction:column;gap:12px;z-index:300;pointer-events:none}
.locked-toast{display:flex;gap:14px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 34px rgba(15,23,42,.16);padding:16px 18px;width:380px;max-width:calc(100vw - 48px);align-items:flex-start;animation:fadeDown .25s ease;pointer-events:auto;cursor:pointer}
.locked-toast-out{animation:locked-toast-out .25s ease forwards}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes locked-toast-out{to{opacity:0;transform:translateY(-6px)}}
.locked-toast-avatar{width:40px;height:40px;border-radius:50%;background:#dbeafe;color:#3b82f6;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0}
.locked-toast-body{flex:1;min-width:0}
.locked-toast-row1{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.locked-toast-text{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.45}
.locked-toast-time{font-size:11px;color:var(--gray);white-space:nowrap;flex-shrink:0;margin-top:2px}
.locked-toast-row2{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--gray);line-height:1.4}
.locked-toast-journey{flex:1;min-width:0;word-break:break-word}
.locked-toast-pending{padding:3px 9px;border-radius:5px;background:#fef3c7;color:#92400e;font-size:10.5px;font-weight:600;flex-shrink:0}
.locked-toast-contact-btn{padding:3px 11px;border-radius:5px;background:var(--orange);color:#fff;font-size:10.5px;font-weight:600;flex-shrink:0;border:0;cursor:pointer;font-family:inherit}
.locked-toast-contact-btn:hover{background:#c66a08}
.locked-toast-close{border:0;background:none;color:var(--gray);cursor:pointer;padding:4px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}
.locked-toast-close:hover{background:#f1f3f5;color:var(--navy)}
/* Locked journey details modal (opened from the top-right toast) */
.lj-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px}
.lj-modal-overlay.hidden{display:none}
.lj-modal-panel{background:#fff;border-radius:18px;width:100%;max-width:440px;box-shadow:0 24px 60px rgba(15,23,42,.2);overflow:hidden;animation:fadeUp .2s ease}
.lj-modal-header{display:flex;justify-content:flex-end;padding:16px 16px 0}
.lj-modal-close{width:32px;height:32px;border:none;background:#f1f5f9;border-radius:8px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--gray);font-family:inherit}
.lj-modal-close:hover{background:#e2e8f0}
.lj-modal-body{padding:4px 28px 28px;text-align:center}
.lj-modal-icon{width:52px;height:52px;border-radius:50%;background:#fef3c7;color:#92400e;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:0 auto 16px}
.lj-modal-title{font-size:17px;font-weight:700;color:var(--navy);line-height:1.4;margin-bottom:10px}
.lj-modal-badges{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px}
.lj-modal-desc{font-size:13px;color:var(--gray);line-height:1.6;margin-bottom:22px}
.lj-modal-cta{width:100%;justify-content:center;padding:12px;font-size:14px}
.lj-modal-note{font-size:11.5px;color:var(--gray);margin-top:12px;line-height:1.5}
#aicj-inner{scroll-margin-top:12px}
#aicj-inner>*{animation:fadeUp .32s cubic-bezier(.2,.8,.2,1)}
/* The bar is now a plain shell and the flex row lives on .aicj-bar-scroll, so nine stages can
   scroll sideways on a narrow viewport instead of crushing the labels into two-line stacks. */
.aicj-bar{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px 24px 14px;margin-bottom:22px;transition:box-shadow .3s}
.aicj-bar-scroll{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.aicj-bar-tracked{align-items:stretch}
.aicj-bar-scroll::-webkit-scrollbar{height:5px}
.aicj-bar-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
/* One column per track, weighted by how many stages it holds, so stage spacing stays even
   across the divider rather than each track getting half the width. */
.aicj-track{display:flex;flex-direction:column;min-width:0}
.aicj-track-steps{display:flex;align-items:flex-start;flex:1}
.aicj-track-cap{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#b6c0cc;margin-bottom:12px;padding-left:2px;white-space:nowrap;transition:color .3s}
.aicj-track-cap.done{color:#94a3b8}
.aicj-track-cap.current{color:var(--navy)}
/* Mirrors the dashed split on the pipeline board — everything left of it happens once per
   client, everything right of it repeats for every hire. */
.aicj-track-split{width:0;border-left:1.5px dashed #cbd5e1;margin:0 18px;align-self:stretch;flex-shrink:0}
.aicj-step{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.aicj-dot-wrap{position:relative;width:20px;height:20px;flex-shrink:0}
.aicj-dot-wrap.clickable{cursor:pointer}
.aicj-dot-wrap.clickable:hover .aicj-dot{border-color:var(--navy)}
.aicj-stage-badge{position:absolute;top:-7px;right:-8px;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;color:#fff;padding:0 3px;pointer-events:none;box-shadow:0 0 0 2px #fff}
.aicj-stage-badge.pending{background:#ca8a04}
.aicj-stage-badge.exception{background:#dc2626}
/* MONOCHROME JOURNEY SYSTEM — progress is ink, not green. Done = solid ink disc with a drawn
   check; current = ink ring with a soft pulse; pending = pale ring. Colour is reserved for the
   two alert states (amber badge = waiting on someone, red = exception), so anything coloured on
   this bar means "look here". */
/* 24px rather than 20px, and a 2px border rather than 3px, because the dot now carries its own
   stage number — at nine stages the numeral is what tells you where you are. */
.aicj-dot{position:relative;width:24px;height:24px;border-radius:50%;flex-shrink:0;border:2px solid var(--border);background:#fff;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;color:#94a3b8;line-height:1;transition:border-color .3s cubic-bezier(.4,0,.2,1),background .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),color .3s}
.aicj-dot.done{background:var(--navy);border-color:var(--navy)}
/* CSS-drawn check, so the done disc reads as "completed", not merely "filled". */
.aicj-dot.done::after{content:'';position:absolute;left:7.5px;top:8px;width:7px;height:3.5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.aicj-dot.current{background:#fff;border-color:var(--orange);color:var(--navy);box-shadow:0 0 0 4px rgba(26,26,26,.16);animation:aicj-current-pulse 1.8s ease-in-out infinite}
.aicj-dot.pending{background:#fff;border-color:var(--border)}
@keyframes aicj-current-pulse{0%,100%{box-shadow:0 0 0 4px rgba(26,26,26,.16)}50%{box-shadow:0 0 0 7px rgba(26,26,26,.09)}}
/* 92px, down from 100px: the stage names are shorter now ("Quote sent", not "Proposal Sent"),
   and nine of them have to share the row that seven used to. */
.aicj-step-label{margin-top:9px;width:92px;text-align:center;font-size:10.5px;font-weight:600;color:#94a3b8;line-height:1.4;letter-spacing:.1px;transition:color .3s}
.aicj-step-label.done{color:var(--navy)}
.aicj-step-label.current{color:var(--orange);font-weight:800}
/* margin-top tracks the dot's vertical centre: 24px dot, 2px rule -> 11px. */
.aicj-line{flex:1;height:2px;background:var(--border);margin:11px 6px 0;border-radius:2px;position:relative;overflow:hidden;min-width:12px}
.aicj-line-fill{position:absolute;inset:0;background:var(--navy);transform:scaleX(0);transform-origin:left}
.aicj-line.filled .aicj-line-fill{transform:scaleX(1)}
.aicj-line.grow .aicj-line-fill{animation:aicj-grow .7s cubic-bezier(.4,0,.2,1) forwards}
@keyframes aicj-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.aicj-box-row{display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch}
.aicj-box{flex:1 1 0;min-width:0;min-height:172px;border:1.5px solid var(--border);border-radius:14px;padding:14px 12px;display:flex;flex-direction:column;gap:8px;background:#fff;transition:.15s;box-sizing:border-box}
.aicj-box.clickable{cursor:pointer}
.aicj-box.clickable:hover{border-color:#cbd5e1;box-shadow:0 1px 4px rgba(15,23,42,.06)}
.aicj-box.selected{border-color:var(--orange);background:#f1f5f9}
.aicj-box-num{width:24px;height:24px;border-radius:50%;background:#f1f5f9;color:var(--navy);font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.aicj-box-name{font-size:13px;font-weight:700;color:var(--navy);line-height:1.4}
.aicj-box-resp{align-self:flex-start;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.2px}
/* Role encoded by fill weight, not hue: AI acts alone = solid ink; a human acts = white with an
   ink border; mixed = grey tint. Distinct at a glance without spending colour on it. */
.aicj-box-resp.ai{background:var(--navy);color:#fff}
.aicj-box-resp.human{background:#fff;color:var(--navy);border:1.5px solid var(--navy);padding:2px 8px}
.aicj-box-resp.mixed{background:#e2e8f0;color:#334155}
.aicj-box-badge{align-self:flex-start;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;line-height:1.45;margin-top:auto}
.aicj-box-badge.pending{background:#fef9c3;color:#854d0e}
.aicj-box-badge.exception{background:#fee2e2;color:#dc2626}
.aicj-box-badge.none{background:#f1f5f9;color:var(--gray)}
/* Contract Creation Journey — dummy ADT contract document template */
.adt-doc-page{background:#fff;border:1px solid var(--border);border-radius:14px;max-width:680px;margin:0 auto;padding:36px 40px;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.adt-doc-page.adt-doc-editing{outline:2px dashed var(--orange);outline-offset:6px;cursor:text}
.adt-doc-page.adt-doc-editing .rr-val,.adt-doc-page.adt-doc-editing .adt-doc-clause{border-radius:4px;transition:.15s}
.adt-doc-page.adt-doc-editing .rr-val:hover,.adt-doc-page.adt-doc-editing .adt-doc-clause:hover{background:#f1f5f9}
.adt-doc-header{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:2px solid var(--navy);padding-bottom:18px;margin-bottom:24px}
.adt-doc-brand{font-size:18px;font-weight:800;color:var(--navy);letter-spacing:.5px}
.adt-doc-brand-sub{font-size:10.5px;color:var(--gray);margin-top:2px;letter-spacing:.3px}
.adt-doc-title{font-size:13px;font-weight:700;color:var(--navy);text-align:right}
.adt-doc-meta{font-size:11px;color:var(--gray);text-align:right;margin-top:4px}
.adt-doc-section{margin-bottom:16px}
.adt-doc-section-title{font-size:11.5px;font-weight:800;color:var(--orange);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.adt-doc-clause{font-size:12.5px;color:#374151;line-height:1.65;margin-bottom:8px}
.adt-doc-sig-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:24px}
.adt-doc-sig-block{padding-top:36px;border-top:1.5px solid var(--navy)}
.adt-doc-sig-label{font-size:11px;color:var(--gray);margin-top:6px}
.ai-run-table th{white-space:nowrap}
/* AI vs Human responsibility split */
.ai-resp-split{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.ai-resp-strip{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:9px 18px}
.ai-resp-strip.ai-resp-ai{border-left:3px solid var(--orange)}
.ai-resp-strip.ai-resp-human{border-left:3px solid #2563eb}
.ai-resp-strip-label{display:flex;flex-direction:column;gap:2px;flex-shrink:0;min-width:150px}
.ai-resp-strip-label b{font-size:12.5px;font-weight:700;color:var(--navy)}
.ai-resp-strip-label span{font-size:11px;color:var(--gray)}
.ai-resp-chips{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.ai-resp-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid var(--border);background:var(--light);color:var(--navy);white-space:nowrap}
.ai-resp-chip-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.ai-resp-chip.ai .ai-resp-chip-dot{background:var(--orange)}
.ai-resp-chip.human .ai-resp-chip-dot{background:#2563eb}
.cfg-resp-caption{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gray);margin-bottom:8px}
/* AI-assisted contract creation: chat (left) + form workspace (right) */
.ai-ct-split{display:flex;margin:0 -32px -28px;height:calc(100vh - 56px - 120px);background:var(--light)}
.ai-ct-split-chat{display:flex;flex-direction:column;flex:0 0 380px;min-width:0;margin:14px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 2px 12px rgba(15,23,42,.04);overflow:hidden}
.ai-ct-upload-bar{padding:10px 14px;border-bottom:1px solid var(--border);background:#fafbfc;flex-shrink:0}
.ai-ct-upload-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;font-size:12px;font-weight:600;color:var(--navy);background:#fff;border:1px dashed var(--border);border-radius:9px;padding:8px 10px;cursor:pointer;transition:.15s}
.ai-ct-upload-btn:hover{background:#fff7ed;border-color:var(--orange);color:var(--orange)}
.ai-ct-upload-btn svg{flex-shrink:0;color:var(--orange)}
/* Vertical event timeline (journey detail + run detail) */
.ai-timeline{position:relative;padding-left:4px}
.ai-timeline-item{position:relative;padding-left:44px;padding-bottom:20px}
.ai-timeline-item:last-child{padding-bottom:0}
.ai-timeline-item::before{content:"";position:absolute;left:14px;top:30px;bottom:0;width:2px;background:var(--border)}
.ai-timeline-item:last-child::before{display:none}
.ai-timeline-dot{position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--border);font-size:11px;font-weight:700;color:var(--gray);flex-shrink:0;z-index:1}
.ai-timeline-dot.ai,.ai-timeline-dot.human,.ai-timeline-dot.client,.ai-timeline-dot.system{border-color:var(--navy);color:var(--navy);background:#fff}
/* Config journey flow: scroll-tracked step markers (scoped to .cfg-step-item only) */
/* pending: not yet reached — plain black, no glow */
.ai-timeline-item.cfg-step-item::before{width:1px;background:#4b5563;box-shadow:none;transition:background .75s ease-out,box-shadow .75s ease-out}
.ai-timeline-dot.cfg-flow-dot{background:#fff;border:1px solid #4b5563;color:var(--navy);font-size:12px;box-shadow:none;transition:background .6s ease-out,border-color .6s ease-out,color .6s ease-out,box-shadow .6s ease-out}
/* reached: scrolled past — steady solid green line/ring, no glow (thicker than the unreached gray segments) */
.cfg-step-item.cfg-flow-reached::before{left:13px;width:3px;background:#16a34a;box-shadow:none}
.cfg-step-item.cfg-flow-reached .cfg-flow-dot{background:#fff;border-width:2.5px;border-color:#16a34a;color:var(--navy);box-shadow:none}
/* active: currently at the reading line — interior unchanged, breathing glow stays outside the ring */
.cfg-step-item.cfg-flow-active .cfg-flow-dot{background:#fff;border-width:2.5px;border-color:#16a34a;color:var(--navy);animation:cfgFlowActivePulse 2.2s ease-in-out infinite}
@keyframes cfgFlowActivePulse{
  0%,100%{box-shadow:0 0 0 4px rgba(22,163,74,.16),0 0 8px rgba(22,163,74,.28)}
  50%{box-shadow:0 0 0 6px rgba(22,163,74,.24),0 0 14px rgba(22,163,74,.4)}
}
@media(prefers-reduced-motion:reduce){
  .cfg-step-item.cfg-flow-active .cfg-flow-dot{animation:none;box-shadow:0 0 0 5px rgba(22,163,74,.2),0 0 10px rgba(22,163,74,.32)}
}
.ai-timeline-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:.15s}
.ai-timeline-card:hover{border-color:var(--orange);box-shadow:0 2px 10px rgba(15,23,42,.05)}
.ai-timeline-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}
.ai-timeline-card-title{font-size:13px;font-weight:700;color:var(--navy)}
.ai-timeline-card-desc{font-size:11.5px;color:var(--gray);line-height:1.5;margin-bottom:9px}
.ai-timeline-chips{display:flex;flex-wrap:wrap;gap:6px}
/* Agent Mode — chat-driven journey run panel */
.agrun-wrap{padding:22px 26px;overflow-y:auto;height:100%;flex:1;min-width:0}
.agrun-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.agrun-title{font-size:15px;font-weight:700;color:var(--navy)}
.agrun-sub{font-size:12px;color:var(--gray);margin-top:3px}
.agrun-body{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap}
.agrun-timeline-col{flex:1 1 340px;min-width:300px}
.agrun-details-col{flex:1 1 360px;min-width:300px}
.agrun-success-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#f8fafc;border:1px solid #cbd5e1;color:var(--navy);border-radius:10px;padding:12px 16px;font-size:12.5px;font-weight:600;margin-bottom:18px;animation:fadeUp .35s ease}
.agrun-noconfig{background:#fff7ed;border:1px solid #fed7aa;color:#9a4d09;border-radius:8px;padding:8px 10px;font-size:11.5px;font-weight:600;margin-top:2px;line-height:1.5}
.agrun-approver-assigned{display:flex;align-items:center;gap:8px;margin-top:10px;background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.agrun-approver-name{font-size:12px;font-weight:700;color:var(--navy)}
.agrun-approver-role{font-size:10.5px;color:var(--gray)}
.agrun-progress-track{height:5px;border-radius:99px;background:#eef1f5;overflow:hidden;margin-bottom:18px}
.agrun-progress-fill{height:100%;background:linear-gradient(90deg,var(--orange),#fbbf6b);border-radius:99px;transition:width .5s ease}
.agrun-activity{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--navy);font-weight:600}
.agrun-activity-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0;animation:agrunPulse 1s ease-in-out infinite}
@keyframes agrunPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
/* Agent evaluation comparison (setup step: "checking for the right agent") */
.agrun-agent-eval{display:flex;flex-direction:column;gap:8px;animation:fadeUp .3s ease}
.agrun-agent-eval-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#fff}
.agrun-agent-eval-row.selected{border-color:#86efac;background:#f6fdf8}
.agrun-agent-eval-row.skipped{opacity:.65}
.agrun-agent-eval-info{flex:1;min-width:0}
.agrun-agent-eval-name{font-size:12px;font-weight:700;color:var(--navy)}
.agrun-agent-eval-desc{font-size:10.5px;color:var(--gray)}
.agrun-agent-eval-badge{font-size:10px;font-weight:700;color:#16a34a;background:#dcfce7;border:1px solid #86efac;border-radius:20px;padding:3px 9px;white-space:nowrap}
.agrun-agent-eval-badge.muted{color:#94a3b8;background:#f1f5f9;border-color:#e2e8f0}
/* Contract document preview */
.agrun-doc{position:relative;background:#fff;border:1px solid var(--border);border-radius:16px;padding:26px 28px;box-shadow:0 4px 20px rgba(15,23,42,.06);overflow:hidden}
.agrun-doc-stamp{position:absolute;top:22px;right:-34px;transform:rotate(35deg);width:150px;text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:4px 0;border-top:1.5px solid;border-bottom:1.5px solid}
.agrun-doc-stamp.draft{color:#94a3b8;border-color:#cbd5e1;background:#f8fafc}
.agrun-doc-stamp.sent{color:#2563eb;border-color:#93c5fd;background:#eff6ff}
.agrun-doc-stamp.signed{color:#16a34a;border-color:#86efac;background:#f0fdf4}
.agrun-doc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.agrun-doc-brand{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--navy)}
.agrun-doc-brand img{width:18px;height:18px;object-fit:contain}
.agrun-doc-num{font-size:11px;color:var(--gray);font-weight:600}
.agrun-doc-title{font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.2px}
.agrun-doc-sub{font-size:12px;color:var(--gray);margin-top:2px}
.agrun-doc-divider{height:1px;background:var(--border);margin:16px 0}
.agrun-doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.agrun-doc-field label{display:block;font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.agrun-doc-field div{font-size:12.5px;font-weight:600;color:var(--navy);animation:fadeUp .3s ease}
.agrun-doc-field.pending div{color:#cbd5e1;font-weight:500;font-style:italic}
.agrun-doc-section{margin-top:20px;padding-top:16px;border-top:1px dashed var(--border)}
.agrun-doc-section-title{font-size:11px;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.4px;margin-bottom:12px}
.agrun-doc-sig-row{display:flex;gap:24px;flex-wrap:wrap}
.agrun-doc-sig{flex:1;min-width:160px}
.agrun-doc-sig span{display:block;font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.agrun-doc-sig-line{font-size:12.5px;font-weight:600;color:var(--navy);border-bottom:1.5px solid var(--border);padding-bottom:8px;font-family:cursive}
/* Field-by-field capture: chips inside step cards + flash on the doc field being written */
.agrun-kv-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.agrun-kv{display:inline-flex;flex-direction:column;gap:1px;background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:5px 9px;animation:fadeUp .25s ease}
.agrun-kv span{font-size:9.5px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.3px}
.agrun-kv b{font-size:11.5px;color:var(--navy);font-weight:600}
.agrun-kv.just-filled{border-color:#f3cf8f;background:var(--ol)}
.agrun-doc-field.just-filled div{animation:agrunFieldFlash 1s ease}
@keyframes agrunFieldFlash{0%{background:#fff0d9;box-shadow:0 0 0 5px #fff0d9;border-radius:4px}100%{background:transparent;box-shadow:none}}
.agrun-phase-label{font-size:10.5px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.7px;margin:0 0 12px 2px}
.agrun-setup-summary{cursor:pointer;background:#f6fdf8;border-color:#bbf0cd}
.agrun-setup-summary:hover{border-color:#86efac;box-shadow:0 2px 10px rgba(22,163,74,.08)}
.agrun-linktext{font-size:11px;font-weight:700;color:var(--orange);white-space:nowrap}
.agrun-linkbtn{display:block;background:none;border:none;font-family:inherit;font-size:11px;font-weight:700;color:var(--orange);cursor:pointer;padding:4px 0 0 44px}
.agrun-linkbtn:hover{text-decoration:underline}
.agrun-live-badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--orange);background:var(--ol);border:1px solid #f3cf8f;border-radius:20px;padding:3px 10px;text-transform:none;letter-spacing:0}
.agrun-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.agrun-stat{display:flex;align-items:baseline;gap:7px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:9px 14px;animation:fadeUp .35s ease}
.agrun-stat b{font-size:17px;font-weight:800;color:var(--navy)}
.agrun-stat span{font-size:11px;color:var(--gray);font-weight:600}
/* Automate Journey — per-event scope rows */
.ai-scope-table{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.ai-scope-row{display:flex;align-items:center;gap:16px;padding:14px 16px;border-bottom:1px solid #f1f5f9;flex-wrap:wrap}
.ai-scope-row:last-child{border-bottom:none}
.ai-scope-row:nth-child(odd){background:#fafbfc}
.ai-scope-name{flex:1 1 240px;min-width:220px}
.ai-scope-name-text{font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:6px}
.ai-scope-mode-seg{flex:0 0 auto;width:auto;min-width:150px}
.ai-scope-row-manual{background:#fafbfc}
.ai-scope-manual-badge{flex:0 0 auto;font-size:11px;font-weight:600;color:#64748b;background:#f1f5f9;border:1px solid var(--border);border-radius:20px;padding:6px 14px}
.prof-att-upload:hover{color:var(--orange);background:#f1f5f9}
/* Manual Mode + Enable Agent journey layer */
/* min-height:132px was forcing every row to the size of its tallest possible content, so a
   journey with a short description got the same footprint as one with four lines. Dropped, with
   the padding tightened to match: three tight lines instead of four loose ones. */
.cfg-journey-card{flex-direction:row;align-items:center;justify-content:space-between;gap:18px;padding:17px 22px;border-radius:14px}
.cfg-journey-card:hover{transform:none;box-shadow:0 4px 14px rgba(15,23,42,.06);border-color:#d7dde6}
.cfg-journey-main{flex:1;min-width:0}
.cfg-journey-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.cfg-journey-statuses{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* One line, ellipsised. The full text is on the row's title attribute. */
.cfg-journey-desc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:720px;line-height:1.5}
.cfg-journey-meta{font-size:11.5px;font-weight:500;color:#94a3b8;margin-top:6px}
.cfg-journey-arrow{display:flex;align-items:center;justify-content:center;color:#64748b;flex:0 0 auto}
/* == AN INTERNAL PLATFORM'S WHOLE PAGE ===================================================
   This panel IS the route, so it carries the weight of one: card surface, real padding, and a
   lead line at 15px rather than the 11.5px of the .sa-note it used to borrow. Text caps at 62
   characters of measure so the second paragraph stays readable on a wide screen instead of
   running the full width of the content column. == */
.cfg-sys-internal{display:flex;gap:22px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:32px 34px;margin-bottom:24px}
.cfg-sys-internal-ico{flex:0 0 auto;width:54px;height:54px;border-radius:14px;background:#f1f5f9;color:#475569;display:flex;align-items:center;justify-content:center}
.cfg-sys-internal-ico svg{width:27px;height:27px}
.cfg-sys-internal-body{min-width:0}
/* 72ch of measure, not 62: at this size the shorter cap broke the second paragraph into four
   stub lines against a card three times its width, which read as a fragment rather than a
   statement. Long enough to fill the card, short enough to stay one comfortable read. */
.cfg-sys-internal-lead{font-size:19px;font-weight:700;color:var(--navy);line-height:1.4;letter-spacing:-.2px;margin:3px 0 0;max-width:72ch}
.cfg-sys-internal-sub{font-size:14px;color:var(--gray);line-height:1.7;margin:11px 0 0;max-width:72ch}
@media(max-width:640px){
  .cfg-sys-internal{flex-direction:column;gap:14px;padding:20px}
}
/* == NOT CONFIGURED ======================================================================
   A journey that is only named yet. Greyed by dropping each piece of content one step toward
   the surface rather than by fading the whole card in one blanket opacity, so the row still
   reads as a row rather than as a smudge.

   THE TWO PILLS ARE DELIBERATELY NOT MUTED. The category and the "Not Configured" badge are
   what EXPLAIN the greying — fading the explanation along with the thing it explains leaves a
   reader with a dim row and no reason for it.

   IT DOES NOT REACT TO HOVER. The generic .cfg-journey-card:hover lift is cancelled here and
   nothing is restored on the way in: a row that brightens under the pointer is advertising
   itself, and these are the rows the page is trying to push into the background. The click
   still works — Super Admin configures the journey from here — it simply is not sold. == */
.cfg-journey-card-unconfigured{background:#fcfcfd;border-color:#eef1f5}
.cfg-journey-card-unconfigured .ai-journey-name{color:#7c8899}
.cfg-journey-card-unconfigured .cfg-journey-desc{color:#a9b2bd}
.cfg-journey-card-unconfigured .cfg-journey-meta{color:#b8c0ca}
.cfg-journey-card-unconfigured .cfg-journey-arrow{color:#c2c9d2}
.cfg-journey-card-unconfigured:hover{background:#fcfcfd;border-color:#eef1f5;box-shadow:none;transform:none}
.journey-mode-badge{display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 9px;border-radius:999px;border:1px solid var(--border);font-size:10.5px;font-weight:800;color:#475569;background:#f8fafc}
/* Same fill-weight scale as the chips: fully automated = solid, part-automated = outlined,
   manual = plain grey. Reads as a spectrum of automation without needing a legend. */
.journey-mode-badge.agent{border-color:var(--navy);background:var(--navy);color:#fff}
.journey-mode-badge.hybrid{border-color:var(--navy);background:#fff;color:var(--navy)}
.journey-mode-badge.manual{border-color:var(--border);background:#f8fafc;color:#475569}
.journey-activation-badge{display:inline-flex;align-items:center;height:23px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid var(--border);background:#f8fafc;color:#64748b}
.journey-activation-badge.active{border-color:#bbf7d0;background:#f0fdf4;color:#16a34a}
.journey-activation-badge.pending{border-color:#fde68a;background:#fffbeb;color:#b45309}
.journey-activation-badge.locked{border-color:#e5e7eb;background:#f8fafc;color:#94a3b8}
.cfg-agent-control{display:inline-flex;align-items:center;gap:11px;color:#64748b;font-size:13.5px;font-weight:800;white-space:nowrap}
.agent-toggle{display:inline-flex;align-items:center;border:0;background:transparent;padding:0;cursor:pointer;font:inherit;color:#64748b}
.agent-toggle[disabled]{cursor:not-allowed;opacity:.55}
.agent-toggle-track{border:1.5px solid #cbd5e1;border-radius:9px;background:#fff;display:inline-flex;align-items:center;gap:10px;padding:9px 16px;transition:.18s;flex-shrink:0}
.agent-toggle-knob{width:34px;height:18px;border-radius:999px;background:#e2e8f0;position:relative;flex-shrink:0;transition:.18s}
.agent-toggle-knob::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.25);transition:.18s}
.agent-toggle.on .agent-toggle-knob{background:#16a34a}
.agent-toggle.on .agent-toggle-knob::after{transform:translateX(16px)}
.agent-toggle-label{font-size:12.5px;font-weight:800;color:#94a3b8;white-space:nowrap;transition:.18s}
.agent-toggle-label.off-label{color:#334155}
.agent-toggle.on .agent-toggle-label.off-label{color:#94a3b8}
.agent-toggle.on .agent-toggle-label.on-label{color:#16a34a}
.agent-toggle.small .agent-toggle-track{padding:9px 16px;gap:9px}
.agent-toggle.small .agent-toggle-knob{width:33px;height:18px}
.agent-toggle.small .agent-toggle-knob::after{width:14px;height:14px}
.agent-toggle.small.on .agent-toggle-knob::after{transform:translateX(15px)}
.agent-toggle.small .agent-toggle-label{font-size:13px}
.enable-agent-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px;border:1px solid var(--border);border-radius:12px;background:#fff;margin:12px 0 16px}
.enable-agent-copy{font-size:12px;color:#64748b;line-height:1.45}
.enable-agent-copy strong{display:block;font-size:13px;color:var(--navy);margin-bottom:3px}
.manual-step-owner{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.cfg-detail-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:15px 22px;margin-bottom:14px}
.cfg-detail-stat-grid{gap:10px}
.cfg-detail-stat-grid .stat-card{padding:12px 16px}
.cfg-detail-stat-grid .stat-label{margin-bottom:3px}
.cfg-detail-stat-grid .stat-val{font-size:19px}
.cfg-detail-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.cfg-detail-title-row p{font-size:18px;font-weight:800;color:var(--navy);margin:0;line-height:1.35}
.cfg-detail-sub{font-size:12.5px;color:var(--gray);line-height:1.55;max-width:760px}
.cfg-detail-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dry-run-note{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--border);border-left:3px solid var(--orange);border-radius:12px;padding:12px 14px;margin:-8px 0 22px}
.dry-run-note strong{font-size:12px;font-weight:900;color:var(--navy);white-space:nowrap}
.dry-run-note span{font-size:12px;color:#64748b;line-height:1.45}
.dry-run-cycle-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin:16px 0 18px}
.dry-run-cycle-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.dry-run-cycle-head strong{display:block;font-size:14px;font-weight:900;color:var(--navy);margin-bottom:4px}
.dry-run-cycle-head span:not(.journey-mode-badge){display:block;font-size:12px;color:#64748b;line-height:1.45}
.dry-run-cycle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dry-run-cycle-grid>div{border:1px solid #eef2f7;background:#fafbfc;border-radius:11px;padding:12px}
.dry-run-cycle-grid span{display:block;font-size:10.5px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.dry-run-cycle-grid strong{display:block;font-size:22px;font-weight:900;color:var(--navy);line-height:1.1;margin-bottom:6px}
.dry-run-cycle-grid p{font-size:11.5px;color:#64748b;line-height:1.45;margin:0}
.cfg-step-item{padding-bottom:14px}
.cfg-step-card{padding:16px 18px;border-radius:12px}
.cfg-step-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:8px}
.cfg-step-title-wrap{min-width:0}
.cfg-owner-pill{display:inline-flex;align-items:center;min-height:24px;padding:3px 10px;border-radius:999px;background:#f8fafc;border:1px solid var(--border);font-size:11px;font-weight:700;color:#475569;white-space:nowrap;flex-shrink:0}
.cfg-step-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px;font-size:11.5px;color:#64748b}
.cfg-step-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid #eef2f7}
.cfg-step-footer .ai-timeline-chips{gap:6px;min-width:0}
.cfg-step-footer .badge{margin-left:0!important}
.cfg-step-footer .cfg-agent-recommend{max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enable-agent-inline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid #eef2f7}
.enable-agent-inline-text{font-size:11px;color:#64748b;line-height:1.4}
.manual-step-mode{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:#f8fafc;color:#475569;border:1px solid var(--border);font-size:10.5px;font-weight:800}
.manual-step-mode.agent{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.manual-step-mode.hybrid{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}

/* Run + exception cards (My Tasks, persona dashboards, manual run preview) */
.cockpit-run-panel{background:transparent;border:none;box-shadow:none;overflow:visible}
.cockpit-run-panel .dash-panel-head{padding-left:2px;padding-right:2px;border-bottom:none;margin-bottom:2px}
.cockpit-run-list{display:flex;flex-direction:column;gap:14px}
.cockpit-run-card{border:1px solid var(--border);border-radius:12px;background:#fff;padding:14px 16px;transition:.15s;box-shadow:0 1px 2px rgba(15,23,42,.04);cursor:pointer}
.cockpit-run-card:hover{border-color:#cbd5e1;box-shadow:0 6px 16px rgba(15,23,42,.09);transform:translateY(-1px)}
.cockpit-run-card.mt-card-selected{border-color:var(--orange);background:#f1f5f9}
.cockpit-run-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cockpit-run-head-main{flex:1;min-width:0}
.cockpit-run-id{font-size:13px;font-weight:900;color:var(--navy);line-height:1.3}
.cockpit-run-entity{font-size:11.5px;color:#64748b;margin-top:2px}
.cockpit-progress-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:10.5px;font-weight:700;color:#64748b}
.cockpit-run-mini-sub{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:#64748b}
.cockpit-progress{height:5px;border-radius:999px;background:#eef2f7;overflow:hidden;margin-bottom:7px}
.cockpit-progress span{display:block;height:100%;background:#86efac;border-radius:999px}
.cockpit-notify-btn{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.cockpit-notify-btn.notified{background:#f0fdf4;border-color:#bbf7d0;color:#15803d;cursor:default;opacity:1}
.cockpit-empty-state{font-size:12px;color:#64748b;padding:16px;border:1px dashed var(--border);border-radius:12px;background:#fafbfc;margin:0 16px 16px}
.cockpit-sb-field{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.cockpit-sb-field:last-child{border-bottom:none}
.cockpit-sb-flabel{font-size:10.5px;color:var(--gray);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.cockpit-sb-fval{font-size:12.5px;font-weight:700;color:var(--navy);text-align:right}
.cockpit-sb-note{font-size:12.5px;color:#475569;line-height:1.6;margin:0}
.cockpit-ex-list{display:flex;flex-direction:column;gap:10px}
.cockpit-ex-card{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid #eef2f7;border-radius:12px;background:#fff;padding:13px 14px;transition:.15s;cursor:pointer}
.cockpit-ex-card:hover{border-color:#f0c17a;background:#fffcf7;box-shadow:0 4px 12px rgba(15,23,42,.06)}
.cockpit-ex-card-static,.cockpit-ex-card-static:hover{cursor:default;border-color:#eef2f7;background:#fff;box-shadow:none}
.cockpit-ex-left{display:flex;align-items:flex-start;gap:10px;min-width:0}
.cockpit-ex-title{font-size:12.5px;font-weight:900;color:var(--navy);line-height:1.35;margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cockpit-ex-kind{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#5b8def;background:#f5f9ff;border:1px solid #e3edfc;border-radius:999px;padding:2px 7px}
.cockpit-ex-new-flag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--orange);border-radius:999px;padding:2px 7px}
.cockpit-ex-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:10.5px;color:#64748b;margin-bottom:6px}
.cockpit-ex-meta span{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:#f8fafc;border:1px solid #eef2f7}
.cockpit-ex-dept{cursor:pointer;font-weight:800;color:#b66430;background:#fdf3e7!important;border-color:#f5d9ab!important;transition:.15s}
.cockpit-ex-dept:hover{background:#f9e9d5!important;border-color:#f0c17a!important}
.cockpit-ex-escalation{color:#af4747!important;font-weight:800;background:#fbeeee!important;border-color:#f0bebe!important}
.cockpit-ex-resolution{font-size:11.5px;color:#475569;line-height:1.45}
.cockpit-ex-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex-shrink:0}
.cockpit-ex-btn{white-space:nowrap}
.roi-card{position:relative;background:linear-gradient(180deg,#fffaf2 0%,#fff 72%);border:1px solid #d1d5db;border-left:4px solid var(--orange);color:var(--navy);border-radius:14px;padding:17px 18px;display:flex;flex-direction:column;gap:12px;margin-top:14px;box-shadow:0 8px 20px rgba(26,26,26,.08)}
.roi-card::after{content:"";position:absolute;right:14px;top:14px;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle,rgba(26,26,26,.18),rgba(26,26,26,0) 70%);pointer-events:none}
.roi-topline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.roi-topline span{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:#ffedd5;color:#1a1a1a;font-size:10px;font-weight:900;letter-spacing:.04em}
.roi-topline strong{font-size:14px;font-weight:900;color:var(--navy)}
.roi-card-title{font-size:13px;font-weight:800;color:var(--navy)}
.roi-card-copy{font-size:12px;line-height:1.55;color:#64748b}
.roi-title{font-size:13px;font-weight:800;color:var(--navy)}
.roi-copy{font-size:12px;line-height:1.55;color:#64748b}
.roi-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.roi-metrics div{border:1px solid #d1d5db;background:#fff;border-radius:10px;padding:9px 10px}
.roi-metrics strong{display:block;font-size:17px;font-weight:900;color:#1a1a1a;line-height:1.15}
.roi-metrics span{display:block;font-size:10.5px;font-weight:700;color:#64748b;margin-top:3px}
.roi-metric{border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px;background:rgba(255,255,255,.04)}
.roi-metric-value{font-size:18px;font-weight:900;margin-bottom:3px}
.roi-metric-label{font-size:10.5px;color:#cbd5e1}

/* Manual journey run + simulation */
.manual-run-page{display:flex;flex-direction:column;gap:16px}
.manual-run-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px 24px}
.manual-run-kicker{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px;font-size:11.5px;font-weight:800;color:#64748b}
.manual-run-kicker span{display:inline-flex;align-items:center;height:23px;padding:0 9px;border-radius:999px;background:#f8fafc;border:1px solid #eef2f7;color:#475569}
.manual-run-title{font-size:20px;font-weight:800;color:var(--navy);line-height:1.25;margin-bottom:6px}
.manual-run-sub{font-size:13px;color:#64748b;line-height:1.55;max-width:780px}
.manual-run-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.manual-current-card{background:#fff;border:1px solid var(--border);border-left:3px solid var(--orange);border-radius:14px;padding:20px 22px}
.manual-current-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.manual-current-kicker{display:block;font-size:10.5px;font-weight:900;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.manual-current-title{font-size:17px;font-weight:800;color:var(--navy);line-height:1.3}
.manual-current-progress{text-align:right;min-width:120px;flex-shrink:0}
.manual-current-progress strong{display:block;font-size:24px;font-weight:900;color:var(--orange);line-height:1.2}
.manual-current-progress span{display:block;font-size:11.5px;color:#64748b;margin-top:2px}
.manual-current-desc{font-size:12.5px;color:#475569;line-height:1.55;margin:12px 0 0;max-width:860px}
.manual-current-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid #eef2f7}
.manual-current-meta{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#475569}
.manual-current-meta .dot{color:#cbd5e1;font-weight:400}
.manual-current-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.manual-waiting-note{font-size:12px;font-weight:600;color:#b45309;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:6px 12px}
.manual-waiting-note strong{color:#9a3412}
.btn-glow-green{background:#f0fdf4;color:#15803d;border:1.5px solid #86efac;animation:btnGlowGreen 1.8s ease-in-out infinite}
.btn-glow-green:hover{background:#dcfce7;border-color:#4ade80}
@keyframes btnGlowGreen{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.35)}50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.manual-run-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(360px,.7fr);gap:16px;align-items:start}
.manual-run-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.manual-panel-body{padding:16px 18px 18px}
.manual-steps-panel .manual-panel-body{display:flex;flex-direction:column;gap:12px}
.manual-step-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:flex-start;padding:16px;border:1px solid #eef2f7;border-radius:12px;background:#fff}
.manual-step-row:last-child{border-bottom:1px solid #eef2f7}
.manual-step-row.done{opacity:.72}
.manual-step-row.current{border-color:#d1d5db;background:#fffdf8;box-shadow:0 8px 18px rgba(26,26,26,.06)}
.manual-step-row.current .manual-step-num{border-color:var(--orange);box-shadow:0 0 0 4px rgba(26,26,26,.12)}
.manual-step-num{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#64748b;background:#fff}
.manual-step-row.done .manual-step-num{background:#16a34a;border-color:#16a34a;color:#fff}
.manual-step-title{font-size:13.5px;font-weight:900;color:var(--navy);line-height:1.35;margin-bottom:6px}
.manual-step-sub{font-size:11.5px;color:#64748b;line-height:1.45;margin-bottom:7px}
.manual-step-row>.manual-step-mode{justify-self:end;align-self:start;margin-top:1px}
.manual-step-action{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:124px}
.manual-step-body .manual-step-action{display:block;min-width:0;margin-top:0;font-size:12px;color:#475569;line-height:1.5;max-width:620px}
.manual-exception-card{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border:1px solid #eef2f7;border-radius:12px;padding:16px;background:#fff}
.manual-exception-card p{margin:8px 0 0;font-size:12px;line-height:1.5;color:#475569}
.manual-run-grid.solo{grid-template-columns:1fr}
.manual-run-grid.solo .manual-steps-panel{max-width:860px;width:100%;margin:0 auto}
.manual-run-grid.solo .manual-panel-body{position:relative;padding:20px 22px 22px;gap:14px}
.manual-run-grid.solo .manual-panel-body::before{content:'';position:absolute;left:39px;top:36px;bottom:36px;width:2px;background:#e7ebf1;z-index:0}
.manual-run-grid.solo .manual-step-row{position:relative;z-index:1;padding:18px}
.manual-run-grid.solo .manual-step-row.current::after{content:'';position:absolute;left:-1px;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--orange)}
.manual-res-modal{width:min(760px,94vw);max-height:88vh;display:flex;flex-direction:column;padding:0!important;overflow:hidden}
.manual-res-modal .ct-modal-hdr{flex-shrink:0}
.manual-res-modal .ct-modal-hdr{padding:22px 26px 14px;margin-bottom:0;border-bottom:1px solid #eef2f7}
.manual-res-body{padding:18px 26px 0;overflow:auto}
.manual-res-issue{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;margin-bottom:18px}
.manual-res-issue>div{border:1px solid #eef2f7;background:#fafbfc;border-radius:12px;padding:13px 14px}
.manual-res-issue span{display:block;font-size:10px;font-weight:900;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.manual-res-issue strong{display:block;font-size:13px;font-weight:900;color:var(--navy);line-height:1.35}
.manual-res-issue p{font-size:12px;color:#475569;line-height:1.45;margin:7px 0 0}
.manual-res-section-title{font-size:12px;font-weight:900;color:var(--navy);text-transform:uppercase;letter-spacing:.04em;margin:4px 0 10px}
.manual-res-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:16px;align-items:start}
.manual-res-options{display:flex;flex-direction:column;gap:10px}
.manual-res-option{display:grid;grid-template-columns:18px minmax(0,1fr);gap:11px;border:1px solid #e2e8f0;border-radius:13px;background:#fff;padding:13px;cursor:pointer;transition:.15s}
.manual-res-option:hover{border-color:#d1d5db;background:#fffdf8}
.manual-res-option.selected{border-color:var(--orange);box-shadow:0 0 0 3px rgba(26,26,26,.1);background:#fffaf2}
.manual-res-option input{margin-top:2px;accent-color:var(--orange)}
.manual-res-option strong{display:block;font-size:13px;font-weight:900;color:var(--navy);margin-bottom:4px}
.manual-res-option span{display:block;font-size:12px;color:#64748b;line-height:1.45;margin-bottom:10px}
.manual-res-option ol{margin:0;padding-left:18px;display:none;gap:5px}
.manual-res-option.selected ol{display:grid}
.manual-res-option li{font-size:12px;color:#334155;line-height:1.4}
.manual-res-confirm{border:1px solid #eef2f7;background:#fafbfc;border-radius:14px;padding:14px;position:sticky;top:0}
.manual-res-confirm label{display:flex;align-items:flex-start;gap:9px;font-size:12px;font-weight:700;color:#334155;line-height:1.4;padding:9px 0;border-bottom:1px solid #e8edf4}
.manual-res-confirm label:last-of-type{border-bottom:none}
.manual-res-confirm input{accent-color:var(--orange);margin-top:2px;flex-shrink:0}
.manual-res-confirm textarea{width:100%;min-height:86px;margin-top:12px;border:1px solid #e2e8f0;border-radius:10px;padding:10px 11px;font:inherit;font-size:12px;line-height:1.45;color:var(--navy);resize:vertical;background:#fff}
.manual-res-confirm textarea:focus{outline:none;border-color:#d1d5db;box-shadow:0 0 0 3px rgba(26,26,26,.1)}
.manual-res-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid #eef2f7;margin-top:18px;padding:16px 26px;flex-shrink:0;background:#fff}
.manual-res-footer div{margin-right:auto;font-size:11.5px;color:#64748b;line-height:1.45}
.sim-finding{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #eef2f7;border-radius:10px;background:#fff;margin-bottom:10px}
.sim-finding-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f1f5f9;color:var(--orange);font-size:12px;font-weight:900;flex-shrink:0}
.sim-finding-title{font-size:12.5px;font-weight:900;color:var(--navy);margin-bottom:3px}
.sim-finding-copy{font-size:11.5px;color:#64748b;line-height:1.45}
@media(max-width:1100px){
  .manual-run-grid{grid-template-columns:1fr}
  .manual-run-hero{flex-direction:column}
  .manual-run-actions{justify-content:flex-start}
  .cfg-journey-card,.cfg-detail-hero{flex-direction:column;align-items:stretch}
  .cfg-journey-actions,.cfg-detail-actions{justify-content:flex-start}
  .ai-resp-strip{flex-direction:column;align-items:flex-start;gap:8px}
}
@media(max-width:760px){
  .roi-metrics{grid-template-columns:1fr}
  .cockpit-ex-card{flex-direction:column}
  .cockpit-ex-actions{flex-direction:row;width:100%}
  .cockpit-ex-actions .btn{flex:1}
  .dry-run-cycle-head{flex-direction:column}
  .dry-run-cycle-grid{grid-template-columns:1fr}
  .enable-agent-row{flex-direction:column;align-items:flex-start}
  .manual-current-head{flex-direction:column}
  .manual-current-progress{text-align:left}
  .manual-current-foot{flex-direction:column;align-items:flex-start}
  .stat-grid-3{grid-template-columns:1fr}
  .manual-res-issue{grid-template-columns:1fr}
  .manual-res-layout{grid-template-columns:1fr}
  .manual-res-confirm{position:static}
  .manual-res-footer{flex-direction:column;align-items:stretch}
  .manual-res-footer div{margin-right:0}
  .manual-step-row{grid-template-columns:30px minmax(0,1fr)}
  .manual-step-row>.manual-step-mode{grid-column:2;justify-self:start;margin-top:4px}
  .manual-step-action{grid-column:2;align-items:flex-start}
  .manual-run-grid.solo .manual-panel-body::before{display:none}
  .cfg-step-head,.cfg-step-footer{flex-direction:column;align-items:flex-start}
  .cfg-owner-pill{white-space:normal}
}
/* Where a page's own Approve button used to be while the runner is hosting that same decision
   beside its evidence. A pointer, not a second button — the whole point is that exactly one
   affordance exists for one decision. */
.aicj-deferred{font-size:11.5px;font-weight:600;color:#94a3b8;background:#f8fafc;border:1px dashed var(--border);border-radius:8px;padding:9px 14px;text-align:center}
/* The live step's activity line. One moving thing on the page at a time. */
.aicj-runner-body.working .agrun-activity{margin:0 0 9px}
/* A step the runner resolved on someone else's behalf. Labelled, always — a viewer must never
   be left thinking the client actually signed something at that moment. */
.aicj-sim{font-size:8.5px;font-weight:800;color:#b45309;text-transform:uppercase;letter-spacing:.5px;background:#fffbeb;border:1px solid #fde68a;border-radius:20px;padding:2px 7px}

/* A zone without `box:true` — Workspace today. It keeps the group's child
   spacing and the "drops out when empty" behaviour, but not the tinted panel
   that marks the AI Execution Layer as one object. */
.sb-group.sb-group-plain{background:transparent;border-color:transparent;box-shadow:none;
  margin-top:6px;padding-top:2px}
.sb-group.sb-group-plain > .sb-group-label{padding-left:15px}

/* Create actions that were sidebar rows and are now buttons on the listing
   they fill (pageActionBtn, js/pages.js). Sits in the filter bar beside
   Reset/Search/Refresh, styled as the one primary among them. */
.lp-pill-action{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;
  border-radius:20px;border:1px solid var(--orange);background:var(--orange);color:#fff;
  font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;flex:none}
.lp-pill-action:hover{filter:brightness(1.06)}
.lp-pill-action svg{flex:none}