/* Lead file: wider, responsive drawer · grouped accordion sections · agent picker */

/* ---- width (desktop side panel; <=860px stays a bottom sheet) ---- */
@media (min-width:861px){
  .dr.dx-lead{--dxw:clamp(580px,56vw,920px);width:var(--dxw)}
  .dr.dx-lead.dx-wide{--dxw:min(1240px,96vw)}
  .dr.dx-lead .sticky{width:var(--dxw)}
  .dr.dx-lead{transition:transform var(--t-slow,.3s) var(--ease,ease),width .25s ease,visibility 0s}
  .dr.dx-lead .sticky{transition:width .25s ease}
}
@media (max-width:860px){.dx-max{display:none!important}}
.dx-hbtn{display:flex;gap:8px;align-items:flex-start;flex:none}
.dx-max .li{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dx-max[aria-pressed=true] .li{transform:rotate(180deg)}

/* ---- adaptive shell (container-based, so it follows the panel width, not the screen) ---- */
.dx-shell{container:dxs/inline-size;padding-bottom:8px}

.dx-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 16px 8px;color:var(--c-n600,#5b6b82);font:700 10px 'Source Sans 3',sans-serif;letter-spacing:.09em;text-transform:uppercase}
.dx-bar>div{display:flex;gap:6px}
.dx-tb{border:1px solid var(--line);background:var(--c-white,#fff);border-radius:999px;padding:5px 12px;font:600 12px 'Source Sans 3',sans-serif;letter-spacing:0;text-transform:none;color:var(--navy);cursor:pointer;min-height:30px}
.dx-tb:hover{background:var(--c-n50,#f5f8fc)}

/* ---- groups ---- */
.dx-groups{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:0 16px;align-items:start}
.dx-col{display:grid;gap:10px;align-content:start;min-width:0}
.dx-grp{border:1px solid var(--line);border-radius:14px;background:var(--c-white,#fff);min-width:0;transition:border-color .2s,box-shadow .2s}
.dx-grp[open]{border-color:var(--c-sand,#cea577);box-shadow:0 6px 18px rgba(22,45,76,.07)}
.dx-grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border-radius:14px;-webkit-tap-highlight-color:transparent}
.dx-grp>summary::-webkit-details-marker{display:none}
.dx-grp>summary:hover{background:var(--c-n50,#f5f8fc)}
.dx-grp>summary:focus-visible{outline:2px solid var(--c-sand,#cea577);outline-offset:-2px}
.dx-gi{width:36px;height:36px;border-radius:11px;background:var(--c-n100,#eaf0f7);color:var(--c-blue,#2f6fe4);display:grid;place-items:center;flex:none;transition:background .2s,color .2s}
.dx-gi .li{width:18px;height:18px}
.dx-grp[open] .dx-gi{background:var(--c-starlight,#162d4c);color:#fff}
.dx-gt{min-width:0;flex:1;display:grid;gap:1px}
.dx-gt b{font:700 15px 'Josefin Sans','Cairo',sans-serif;color:var(--navy)}
.dx-gt small{color:var(--mut);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-gb{font:700 11px 'Source Sans 3',sans-serif;font-style:normal;padding:3px 10px;border-radius:999px;background:var(--c-n100,#eaf0f7);color:var(--c-n600,#5b6b82);flex:none}
.dx-gb.warn{background:var(--c-danger-soft,#fde8e6);color:var(--c-danger,#c0392b)}
.dx-gc{width:9px;height:9px;border-inline-end:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);flex:none;margin-inline:4px 2px;transition:transform .2s}
.dx-grp[open] .dx-gc{transform:rotate(225deg)}
.dx-gbody{padding:4px 14px 16px;display:grid;gap:8px;border-top:1px solid var(--c-n100,#eaf0f7);animation:dxg .22s ease-out both}
@keyframes dxg{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dx-gbody{animation:none}.dr.dx-lead,.dr.dx-lead .sticky{transition:none}}
body.motion-reduced .dx-gbody{animation:none}
.dx-gbody label{margin:6px 0 0}
.dx-gbody .dx-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.dx-gbody .dx-dates{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:6px 12px}
.dx-gbody .dx-out{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.dx-gbody .dx-card{margin:0;border:0;padding:0;box-shadow:none;border-radius:0;animation:none}
.dx-gbody .dx-card>h4{display:none}
.dx-gbody .dx-hint{margin:0}
.dx-gbody .tlx{max-height:420px;overflow:auto}

/* groups needing attention */
.dx-grp.g-own:has(.dx-gb.warn){border-color:var(--c-danger,#c0392b)}

/* panel >= 720px wide: two-column overview and two-column groups */
@container dxs (min-width:720px){
  .dx-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container dxs (min-width:1040px){
}
@container dxs (max-width:420px){
  .dx-groups,.dx-bar{padding-inline:12px;margin-inline:0}
  .dx-bar{padding-inline:12px}
  .dx-grp>summary{gap:10px;padding:9px 12px}
  .dx-gb{display:none}
}

/* ---- agent picker ---- */
.ap{display:grid;gap:4px;position:relative}
.ap>label{margin:0}
.ap-wrap{position:relative}
.ap-btn{width:100%;display:flex;align-items:center;gap:12px;text-align:start;padding:9px 12px;min-height:56px;border:1px solid var(--line);border-radius:12px;background:var(--c-white,#fff);color:var(--navy);cursor:pointer;font:inherit;transition:border-color .15s,box-shadow .15s}
.ap-btn:hover{border-color:var(--c-n300,#b7c3d4)}
.ap-btn:focus-visible,.ap.open .ap-btn{border-color:var(--c-sand,#cea577);box-shadow:0 0 0 3px rgba(206,165,119,.28);outline:0}
.ap-av{width:34px;height:34px;border-radius:50%;background:var(--c-starlight,#162d4c);color:#fff;display:grid;place-items:center;font:700 12px 'Josefin Sans','Source Sans 3',sans-serif;flex:none;letter-spacing:.02em}
.ap-av.none{background:var(--c-n100,#eaf0f7);color:var(--c-n500,#7b8ba3)}
.ap-t{min-width:0;flex:1;display:grid;gap:1px}
.ap-t b{font-weight:700;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-t small{color:var(--mut);font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-chev{width:9px;height:9px;border-inline-end:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);flex:none;margin-inline:4px 2px;transition:transform .2s}
.ap.open .ap-chev{transform:rotate(225deg)}
.ap-pop{position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:8;background:var(--c-white,#fff);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(22,45,76,.2);padding:8px;flex-direction:column;gap:6px;animation:dxg .16s ease-out both}
.ap-pop:not([hidden]){display:flex}
.ap.up .ap-pop{top:auto;bottom:calc(100% + 6px)}
.ap-q{min-height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit}
.ap-q:focus{outline:0;border-color:var(--c-sand,#cea577);box-shadow:0 0 0 3px rgba(206,165,119,.25)}
.ap-pop ul{list-style:none;margin:0;padding:0;max-height:min(280px,40vh);overflow:auto;display:grid;gap:2px;overscroll-behavior:contain}
.ap-o{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;min-height:48px}
.ap-o[hidden]{display:none}
.ap-o:hover,.ap-o:focus-visible{background:var(--c-n50,#f5f8fc);outline:0}
.ap-o:focus-visible{box-shadow:inset 0 0 0 2px var(--c-sand,#cea577)}
.ap-o.on{background:var(--c-blue-soft,#eaf1ff)}
.ap-o .ap-av{width:30px;height:30px;font-size:11px}
.ap-ck{width:6px;height:11px;border-inline-end:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);flex:none;margin-inline-end:6px}
.ap-o.on .ap-ck{border-color:var(--c-blue,#2f6fe4)}
.ap-empty{margin:6px 8px;color:var(--mut);font-size:13px}

/* picker keeps native look off the generic .dr input rule */
.dr .ap input[type=hidden]{display:none}

/* ---- tabs (replace the accordion): one pill strip, one panel at a time ---- */
.dx-tabs{display:flex;gap:8px;padding:10px 16px;margin:0;overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:3;background:var(--c-n50,#f5f8fc);border-bottom:1px solid var(--line)}
.dx-tabs::-webkit-scrollbar{display:none}
.dx-tab{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 16px;border:1px solid var(--c-sand,#cea577);border-radius:999px;background:var(--c-white,#fff);color:var(--c-starlight,#162d4c);font:700 14px/1 inherit;font-family:inherit;cursor:pointer;white-space:nowrap}
.dx-tab .li{width:16px;height:16px}
.dx-tab:hover{background:var(--c-n50,#f5f8fc)}
.dx-tab:focus-visible{outline:2px solid var(--c-sand,#cea577);outline-offset:2px}
.dx-tab.on{background:var(--c-starlight,#162d4c);border-color:var(--c-starlight,#162d4c);color:var(--c-white,#fff)}
.dx-tab em{font-style:normal;font-size:11px;font-weight:800;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:var(--c-sand,#cea577);color:var(--c-starlight,#162d4c)}
.dx-tab em.warn{background:var(--c-danger,#c0392b);color:var(--c-white,#fff)}
.dx-panels{padding:14px 16px 16px}
.dx-panel{border:1px solid var(--line);border-radius:14px;background:var(--c-white,#fff);padding:14px;min-width:0}
.dx-panel[hidden]{display:none}
.dx-subh{margin:16px 0 8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-n600,#5a6c86)}
@container dxs (max-width:420px){.dx-tabs{padding-inline:12px}.dx-panels{padding-inline:12px}}

/* ---- R10: two-row header (name · language · nationality / request summary), timeline above the tabs ---- */
.dh-t{min-width:0;display:grid;gap:3px}
.dh-r1{display:flex;align-items:center;gap:8px;min-width:0}
.dh-r1 h3{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
.dh-chip{flex:none;font:600 11.5px 'Source Sans 3',sans-serif;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;white-space:nowrap}
.dh-r2{font:500 13.5px 'Source Sans 3',sans-serif;color:rgba(255,255,255,.82);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-shell>.stg-lead{margin:12px 16px 10px}
.dx-tabs{border-top:1px solid var(--line)}
.dx-panel .dx-secs{padding:0;margin:0 0 12px}
.dx-panel .dx-gd{padding:0 0 10px;animation:none}
.dx-subh.first{margin-top:0}
@container dxs (max-width:420px){.dx-shell>.stg-lead{margin-inline:12px}}

/* ---- R11: dense layout — compact fixed parts, two-column panels, folded extras ---- */
/* fixed header */
.dr.dx-lead .h{padding:8px 14px}
.dr.dx-lead .dh{gap:10px}
.dr.dx-lead .dh-av{width:36px;height:36px;font-size:13px}
.dr.dx-lead .h .dh h3{font-size:17px}
.dr.dx-lead .dh-r2{font-size:12.5px}
.dr.dx-lead .dx-hbtn .btn{min-width:34px;min-height:34px;height:34px;padding:0 10px}
.dr.dx-lead .dx-max .li{width:15px;height:15px}
/* timeline strip */
.dx-shell>.stg-lead{margin:6px 12px 4px;padding:4px 10px 6px;border-radius:12px;--sz:24px}
.dx-shell>.stg-lead .stg-s{padding-top:13px;gap:2px}
.dx-shell>.stg-lead .stg-s::before{top:calc(13px + var(--sz)/2 - 1px)}
.dx-shell>.stg-lead .stg-s em{font-size:8px;padding:0 6px;line-height:12px}
.dx-shell>.stg-lead .stg-s b{font-size:10.5px}
.dx-shell>.stg-lead .stg-s.cur b{font-size:11.5px}
.dx-shell>.stg-lead .stg-s.cur .stg-c{border-width:2px;box-shadow:0 0 0 3px rgba(var(--c-starlight-rgb),.1)}
.dx-shell>.stg-lead .stg-i{width:12px;height:12px}
.dx-shell>.stg-lead .stg-t{grid-template-columns:repeat(var(--n),minmax(62px,1fr))}
.dx-shell>.stg-lead .stg-note{margin:4px 0 0;padding:3px 10px;border-radius:8px;font-size:11.5px}
/* tab bar */
.dx-tabs{padding:5px 12px;gap:6px}
.dx-tab{min-height:32px;padding:0 12px;font-size:13px;gap:6px}
.dx-tab .li{width:14px;height:14px}
.dx-tab em{min-width:16px;height:16px;font-size:10px}
.dx-panels{padding:8px 12px 6px}
.dx-panel{border:0;border-radius:0;background:none;padding:0}
/* fixed footer */
.dr.dx-lead .sticky{padding:6px 12px;gap:8px}
.dr.dx-lead .sticky .btn{min-height:38px;height:38px;padding:0 12px;font-size:14px}
/* fields */
.dr.dx-lead .dx-panel label{margin:6px 0 2px;font-size:9.5px;letter-spacing:.09em}
.dr.dx-lead .dx-panel .dx-grid>div>label:first-child,.dr.dx-lead .dx-panel .dx-dates>div>label:first-child{margin-top:0}
.dr.dx-lead .dx-panel input,.dr.dx-lead .dx-panel select,.dr.dx-lead .dx-panel textarea{min-height:32px;padding:4px 9px;font-size:13px;border-radius:8px}
.dr.dx-lead .dx-panel textarea{min-height:52px;resize:vertical;line-height:1.35}
.dr.dx-lead .dx-panel input[type=date],.dr.dx-lead .dx-panel input[type=datetime-local]{min-height:32px}
.dx-panel .dx-grid{gap:6px 10px}
.dx-panel .dx-grid.dx-req{grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr))}
.dx-panel .dx-grid.dx-cl{grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))}
.dx-f small{font-size:9.5px;letter-spacing:.06em}
.dx-f b{font-size:13px;line-height:1.25}
.dx-subh{margin:10px 0 5px;font-size:10.5px}
.dx-panel .dx-gd{padding:0 0 6px}
.dx-panel .gd{padding:6px 10px;min-height:0;font-size:12.5px;border-radius:9px}
.dx-panel .gd .li{width:15px;height:15px}
.dx-panel .gd-act{min-height:26px;padding:0 8px;font-size:11.5px}
/* two columns when the panel is wide enough (container = the drawer, not the screen) */
.dx-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px;align-items:start}
.dx-c{min-width:0}
@container dxs (min-width:640px){.dx-cols{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
/* stage pills: wrap, no sideways scroll */
.dx-stagebar label{margin-top:0!important}
.dr.dx-lead .pills.path{flex-wrap:wrap;overflow:visible;gap:4px}
.dr.dx-lead .pills.path .pill{min-height:28px;padding:0 10px;font-size:12px}
.dx-dates{gap:6px 10px}
.dx-fu{margin-top:5px;gap:5px}
.dx-fu .q{min-height:28px;padding:0 10px;font-size:12px}
.dx-out{grid-template-columns:repeat(auto-fit,minmax(min(100%,118px),1fr));gap:5px}
.dx-out .q,.dx-panel .dx-out .q{min-height:34px;font-size:12.5px;border-radius:9px;padding:0 8px}
/* folded extras */
.dx-fold{margin-top:8px;border:1px solid var(--line);border-radius:10px;background:var(--c-n50,#f5f8fc)}
.dx-fold>summary{cursor:pointer;list-style:none;padding:6px 10px;font:700 11.5px 'Source Sans 3',sans-serif;color:var(--c-n600,#5a6c86);display:flex;align-items:center;justify-content:space-between;min-height:30px}
.dx-fold>summary::-webkit-details-marker{display:none}
.dx-fold>summary::after{content:'';width:7px;height:7px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.dx-fold[open]>summary::after{transform:rotate(225deg)}
.dx-fold>:not(summary){margin:0 10px 10px}
.dx-fold .viewing-tools{display:grid;gap:6px}
.dx-fold .viewing-tools .btn,.dx-fold .viewing-tools .pill{min-height:30px;padding:0 10px;font-size:12px}
.dx-fold .viewing-tool-actions{display:flex;flex-wrap:wrap;gap:5px}
/* timeline: compact rows, scrolls inside the column */
.dx-panel .dx-card{border:0;padding:0;margin:0;box-shadow:none;border-radius:0;animation:none}
.dx-panel .dx-card>h4{margin:0 0 5px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-n600,#5a6c86)}
.dx-panel .dx-card>h4 .li{width:13px;height:13px}
.dx-panel .tlx{max-height:min(46vh,380px);overflow:auto;display:grid;gap:5px}
.dx-panel .tle{padding:4px 0;gap:8px;font-size:12.5px}
.dx-panel .tle i{width:22px;height:22px}
.dx-panel .tle small{font-size:11px}
/* management */
.dx-panel .ap-btn{min-height:44px;padding:5px 10px}
.dx-panel .ap-av{width:30px;height:30px}
.dx-panel .ap>label{margin-top:0}
.dx-panel>.ap+.dx-grid{margin-top:8px}
.dx-panel>.dx-grid:not(.dx-req):not(.dx-cl){grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))}
/* matches: tighter rows */
.dx-panel .match-results{display:grid;gap:6px}
.dx-panel .bm-s>h4{margin:6px 0 4px;font-size:11px}
.dx-panel .bm-r{padding:6px 8px}
@container dxs (max-width:420px){.dx-shell>.stg-lead{margin-inline:8px}.dx-tabs,.dx-panels{padding-inline:8px}.dr.dx-lead .sticky{padding-inline:8px}}
.dr.dx-lead .dx-panel .dx-c>label:first-child{margin-top:0}
.dx-out .q .li{width:14px;height:14px;flex:none}
.dx-out .q span{line-height:1.15}
.dx-c+.dx-c{margin-top:8px}
@container dxs (min-width:640px){.dx-c+.dx-c{margin-top:0}}