/* The agent desk's frame (js/desk-nav.js): a sidebar like the admin panel's,
   a topbar that holds search and the person, and the phone drawer's groups.
   Everything is scoped under .has-desk-side or the desk's own classes, so the
   customer storefront keeps its top row. Warm neutrals, as the desk's Jump
   palette and segmented controls already use. */

.app-shell.has-desk-side{
  --desk-side-w:252px;
  --dn-ink:#191612;
  --dn-ink-2:#3d3833;
  --dn-muted:#8a8279;
  --dn-line:#ece6dc;
  --dn-hover:#f6f2ec;
  --dn-selected:#efe8dc;
  padding-left:var(--desk-side-w);
  transition:padding-left .18s ease;
}
.app-shell.has-desk-side.is-side-collapsed{--desk-side-w:68px}

/* ------------------------------------------------------------- sidebar */
.desk-side{
  position:fixed;top:0;bottom:0;left:0;z-index:45;width:var(--desk-side-w);
  display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--dn-line);
  transition:width .18s ease,box-shadow .18s ease;
}
.dn-head{display:flex;align-items:center;gap:10px;height:58px;padding:0 16px 0 20px;border-bottom:1px solid var(--dn-line);flex:0 0 auto}
.dn-logo{display:flex;align-items:center;line-height:0}
.dn-logo img{display:block;width:112px;height:auto}
.dn-tag{
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  color:#7a6447;background:#f7f0e4;border:1px solid #ecdfca;border-radius:999px;padding:3px 8px;
}
.dn-nav{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.dn-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:2px;padding:12px 10px 16px;
  scrollbar-width:thin;scrollbar-color:#e2dbcf transparent;
}
.dn-item{
  display:flex;align-items:center;gap:11px;width:100%;min-height:38px;margin:0;padding:8px 11px;
  border:0;border-radius:9px;background:none;color:var(--dn-ink-2);font:inherit;font-size:13.5px;font-weight:550;
  line-height:1.3;text-align:left;text-decoration:none;cursor:pointer;position:relative;
  transition:background .12s,color .12s;
}
.dn-item:hover{background:var(--dn-hover);color:var(--dn-ink);text-decoration:none}
.dn-item:focus-visible{outline:2px solid var(--dn-ink);outline-offset:1px}
.dn-ico{display:inline-flex;flex:0 0 auto;color:var(--dn-muted);transition:color .12s}
.dn-ico svg{width:18px;height:18px;display:block}
.dn-item:hover .dn-ico{color:var(--dn-ink)}
.dn-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn-item.active{background:var(--dn-selected);color:var(--dn-ink);font-weight:650}
.dn-item.active .dn-ico{color:var(--dn-ink)}
.dn-caret{display:inline-flex;flex:0 0 auto;color:#b0a798;transition:transform .15s ease}
.dn-caret svg{width:14px;height:14px}
.dn-group-btn[aria-expanded="true"] .dn-caret{transform:rotate(90deg)}
.dn-group.has-active > .dn-group-btn{color:var(--dn-ink);font-weight:650}
.dn-group.has-active > .dn-group-btn .dn-ico{color:var(--dn-ink)}
.dn-sub{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 20px;padding-left:10px;border-left:1px solid var(--dn-line)}
.dn-sub[hidden]{display:none}
.dn-sub .dn-item{min-height:34px;padding:7px 10px;font-size:13px;font-weight:500}
.dn-sub .dn-item.active{font-weight:650}
.dn-sub .dn-item.active::before{
  content:'';position:absolute;left:-11px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--dn-ink);
}
.dn-badge{
  flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#c8402e;color:#fff;
  font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
}
.dn-foot{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;padding:10px;border-top:1px solid var(--dn-line)}

/* Collapsed to a rail of icons; hovering or tabbing into it opens it over the
   page, as the admin's sidebar does. */
.is-side-collapsed .desk-side:not(:hover):not(:focus-within) :is(.dn-label,.dn-caret,.dn-tag,.dn-sub,.dn-badge){display:none}
.is-side-collapsed .desk-side:not(:hover):not(:focus-within) .dn-item{justify-content:center;padding:8px 0}
.is-side-collapsed .desk-side:not(:hover):not(:focus-within) .dn-head{padding:0;justify-content:center}
.dn-pin{display:none}
.is-side-collapsed .desk-side:is(:hover,:focus-within) .dn-pin{
  display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:30px;height:30px;flex:0 0 auto;
  border:1px solid var(--dn-line);border-radius:8px;background:#fff;color:var(--dn-ink-2);cursor:pointer;
}
.is-side-collapsed .desk-side .dn-pin:hover{background:var(--dn-hover);color:var(--dn-ink)}
.dn-mark{display:none}
.is-side-collapsed .desk-side:not(:hover):not(:focus-within) .dn-logo img{display:none}
.is-side-collapsed .desk-side:not(:hover):not(:focus-within) .dn-mark{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
  background:#1a1815;color:#f6f2ea;font-size:15px;font-weight:800;letter-spacing:.02em;line-height:1;
}
/* With no labels, the section holding the page is the one that is marked. */
.is-side-collapsed .desk-side:not(:hover):not(:focus-within) .dn-group.has-active > .dn-group-btn{background:var(--dn-selected)}
.is-side-collapsed .desk-side:hover,.is-side-collapsed .desk-side:focus-within{width:252px;box-shadow:0 18px 48px rgba(28,26,23,.18)}

/* --------------------------------------------------------------- topbar */
.desk-side-toggle,.desk-who{display:none}
@media(min-width:901px){
  .has-desk-side .topbar{gap:8px;padding:0 20px 0 12px}
  .has-desk-side .topbar .logo-link{display:none}
  .desk-side-toggle{
    display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;
    border:0;border-radius:9px;background:none;color:var(--dn-ink-2);cursor:pointer;
  }
  .desk-side-toggle:hover{background:var(--dn-hover);color:var(--dn-ink)}
  .desk-side-toggle svg{width:20px;height:20px;display:block}
  .desk-side-toggle:focus-visible{outline:2px solid var(--dn-ink);outline-offset:1px}
  /* Jump reads as the search field it is, at the start of the bar. */
  .has-desk-side .topbar .desk-cmdk-trigger{
    order:0;min-width:min(340px,32vw);height:38px;justify-content:flex-start;gap:10px;margin:0 auto 0 4px;
    padding:0 8px 0 12px;border-radius:10px;border:1px solid #e4ddd2;background:#faf8f4;
    color:#7a7266;font-size:13px;font-weight:500;
  }
  .has-desk-side .topbar .desk-cmdk-trigger:hover{background:#fff;border-color:#cfc6b8}
  .has-desk-side .desk-cmdk-trigger-ico{display:inline-flex;color:#8a8279}
  .has-desk-side .desk-cmdk-trigger-ico svg{width:17px;height:17px}
  .has-desk-side .desk-cmdk-trigger-label{flex:1 1 auto;text-align:left;opacity:1}
  .has-desk-side .topbar .spacer{display:none}
  .desk-who{
    display:inline-flex;align-items:center;gap:9px;max-width:230px;margin-left:6px;padding:3px 12px 3px 3px;
    border:1px solid #e4ddd2;border-radius:999px;background:#fff;color:inherit;font:inherit;cursor:pointer;
  }
  .desk-who:hover{background:var(--dn-hover);border-color:#cfc6b8}
  .desk-who:focus-visible{outline:2px solid var(--dn-ink);outline-offset:2px}
  .desk-who-ava{
    width:30px;height:30px;flex:0 0 auto;border-radius:999px;background:#1a1815;color:#f6f2ea;
    font-size:11px;font-weight:700;letter-spacing:.02em;display:inline-flex;align-items:center;justify-content:center;
  }
  .desk-who-text{display:flex;flex-direction:column;min-width:0;line-height:1.15;text-align:left}
  .desk-who-text b{font-size:12.5px;font-weight:650;color:var(--dn-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .desk-who-text small{font-size:11px;color:#8a8279;white-space:nowrap}
}
@media(min-width:901px) and (max-width:1180px){
  .desk-who-text{display:none}
  .desk-who{padding:3px}
}

/* ------------------------------------------------- Back and breadcrumb
   One Back, in the same place on every desk page, that returns to where the
   person was (DeskNav.record); after it, the section and the page. */
.desk-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;min-height:34px;margin:0 0 18px}
.dc-back{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 9px;flex:0 0 auto;
  border:1px solid #e4ddd2;border-radius:9px;background:#fff;color:var(--dn-ink-2);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.dc-back svg{width:16px;height:16px;display:block}
.dc-back:hover:not(:disabled){background:var(--dn-hover);border-color:#cfc6b8;color:var(--dn-ink)}
.dc-back:focus-visible{outline:2px solid var(--dn-ink);outline-offset:2px}
.dc-back:disabled{opacity:.42;cursor:default}
.dc-list{display:flex;align-items:center;flex-wrap:wrap;gap:2px;min-width:0;margin:0;padding:0;list-style:none;font-size:13px;color:var(--dn-muted)}
.dc-list li{display:inline-flex;align-items:center;min-width:0}
.dc-list li + li::before{content:'/' / '';margin:0 8px 0 6px;color:#cfc6b8}
.dc-list li[hidden]{display:none}
.dc-list a{color:var(--dn-ink-2);font-weight:550;text-decoration:none}
.dc-list a:hover{color:var(--dn-ink);text-decoration:underline}
.dc-list [aria-current="page"]{display:block;max-width:44ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dn-ink);font-weight:650}
.dc-list li[aria-current="page"]::before{display:inline}
/* The pages' own back arrows and "← All tasks" links give way to it. */
.has-desk-side :is(.page-back,.desk-back,.desk-lead-back,.desk-hr-back,.smx-back){display:none !important}
/* Sign out lives at the foot of the desk sidebar; the account page's own
   button would be a second one. (The current session's row under Active
   sessions stays: it belongs to that list.) */
.has-desk-side #logoutBtn{display:none !important}

/* ----------------------------------------------------------- page frame
   Every desk page in one frame: one width, the same gutters, one title
   style, the section named by the breadcrumb rather than a kicker. */
.has-desk-side main.page{max-width:1320px}
@media(min-width:901px){
  .has-desk-side main.page{padding:22px 32px 48px;position:relative}
  /* A page's actions (Log activity, New account) ride on the Back bar. */
  .has-desk-side main.page > div > .crm-nav:first-child{position:absolute;top:22px;right:32px;margin:0;z-index:2}
  .has-desk-side main.page:has(> div > .crm-nav:first-child) > .desk-crumbs{padding-right:280px}
}
/* Narrow centred columns open up to the frame, and a page nested in the
   frame does not add a second set of gutters. */
.has-desk-side :is(.an-page,.guide-page,.smx,.crm-page.crm-book,.desk-tasks,.desk-task-detail){max-width:none}
.has-desk-side main.page > div > .page{max-width:none;padding:0;margin:0}
.has-desk-side main.page :is(h1.pagetitle,h1.crm-title,.gmi-page-head h1,.guide-hero h1,.desk-tmap-hero h1,.an-head h1,.prod-head h1,h1.qo-title){
  font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--dn-ink)
}
.has-desk-side :is(.crm-kicker,.gmi-kicker,.guide-hero-kicker,.desk-hr-hero .eyebrow,.desk-tmap-hero > div > span){display:none}
/* Heroes that were banners read as the shared header. */
.has-desk-side .guide-hero{padding:0;margin:0 0 18px;border:0;border-radius:0;background:none;box-shadow:none}
.has-desk-side .desk-tmap-hero{padding:0;border-radius:0;background:none;box-shadow:none;color:var(--dn-ink)}
.has-desk-side .desk-tmap-hero h1{margin:0 0 4px}
.has-desk-side .desk-tmap-hero p{color:var(--dn-muted)}

/* Book: the count of customers leads the figures, which sit four or eight
   to a row, never with a hole. */
.has-desk-side .crm-stat.is-lead{background:#1a1815;border-color:#1a1815}
.has-desk-side .crm-stat.is-lead .n{color:#fff}
.has-desk-side .crm-stat.is-lead .l{color:#cfc6b8}
@media(min-width:901px){.has-desk-side .crm-book-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1320px){.has-desk-side .crm-book-stats{grid-template-columns:repeat(8,minmax(0,1fr))}}

/* The bell's count is the sidebar's: unread alerts, in the alert colour. */
.has-desk-side .notif-bell .badge{background:#c8402e}

/* ----------------------------------------------------------------- phone */
@media(max-width:900px){
  .app-shell.has-desk-side{padding-left:0}
  .desk-side{display:none}
  .desk-crumbs{margin-bottom:12px}
  .dc-list .dc-section{display:none}
  .dc-list .dc-section + li::before{content:none}
}
/* The drawer lists the same groups. Its own `.drawer a` rules are for the
   shop's flat list, so these win on specificity. */
.drawer .dn-nav{display:block}
.drawer .dn-scroll{overflow:visible;padding:4px 10px 8px}
.drawer .dn-foot{padding:8px 10px 4px;margin-top:4px}
.drawer a.dn-item,.drawer button.dn-item{padding:10px 12px;font-size:14px;font-weight:600;color:var(--ink);box-shadow:none}
.drawer a.dn-item.active{background:#efe8dc;color:#191612;box-shadow:none}
.drawer .dn-sub a.dn-item{padding:9px 10px;font-size:13.5px;font-weight:500}
.drawer .dn-sub a.dn-item.active{font-weight:650}