/* agent-shell.css — generated by make-agent-shell-css.cjs. Part 1: the staff CRM sidebar rules, re-scoped from #app to #agent-app.
   staff source sha256 1dd21e34312bd32777effa7ec729de7e28a5d418cb14f7f6925535b1b14aed71, 25 rules. Part 2: agent-shell-overrides.css. */
#agent-app .rail{background:#0F2638}
#agent-app .rail .brand.brand-nav{border-color:rgba(255,255,255,.08);box-shadow:none;background:transparent}
#agent-app .rail .brand.brand-nav:hover{background:rgba(255,255,255,.05);box-shadow:none}
#agent-app .rail .brand.brand-nav:active{box-shadow:inset 0 2px 3px rgba(0,0,0,.25)}
#agent-app .rail .whoami{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.06)}
#agent-app .rail .whoami .whoset{color:#DCE6EE;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);
  text-shadow:none;box-shadow:none}
#agent-app .rail .whoami .whoset:hover{color:#FFFFFF;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.26)}
#agent-app .rail .whoami .whoset.on,#agent-app .rail .whoami .whoset:active{background:rgba(255,255,255,.06);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
#agent-app .rail .navsec::after{background:rgba(255,255,255,.16)}
#agent-app .rail :is(.navbtn,.stagebtn):not(.phonepad-nav){color:#D3DFE8;background:transparent;border-color:transparent;
  box-shadow:none;text-shadow:none}
#agent-app .rail :is(.navbtn,.stagebtn):not(.phonepad-nav):hover{color:#FFFFFF;background:rgba(255,255,255,.08);
  border-color:transparent;box-shadow:none}
#agent-app .rail :is(.navbtn,.stagebtn):not(.phonepad-nav):active{box-shadow:inset 0 2px 3px rgba(0,0,0,.30)}
#agent-app .rail :is(.navbtn,.stagebtn):not(.phonepad-nav) .ico{color:inherit}
#agent-app .rail :is(.navbtn,.stagebtn)[aria-current="true"]:not(.phonepad-nav),#agent-app .rail :is(.navbtn,.stagebtn)[aria-current="true"]:not(.phonepad-nav):hover{color:#FFFFFF;background:#1E4566;
  border-color:transparent;box-shadow:inset 3px 0 0 #4DBDF0,inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(0,0,0,.30)}
#agent-app .rail :is(.navbtn,.stagebtn)[aria-current="true"]:not(.phonepad-nav) .ico{color:#6FD0FA}
#agent-app .rail :is(.navbtn,.stagebtn) .ct{color:#BFD0DD;background:rgba(255,255,255,.10)}
#agent-app .rail :is(.navbtn,.stagebtn)[aria-current="true"] .ct{color:#04202E;background:#4DBDF0}
#agent-app .rail .navbtn.btn.go.phonepad-nav{background:#13864F;border-color:#0E6B3E;color:#FFFFFF;filter:none;text-shadow:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.30)}
#agent-app .rail .navbtn.btn.go.phonepad-nav:hover{background:#117A48;filter:none}
#agent-app .rail .navbtn.btn.go.phonepad-nav:active{box-shadow:inset 0 2px 3px rgba(0,0,0,.30)}
#agent-app .rail .railfoot{border-top-color:rgba(255,255,255,.09)}
#agent-app .rail .storepill{color:#8FA9BC}
#agent-app .rail #outbtn{background:#1B2428;border-color:#0B1114;color:#FFFFFF;filter:none;text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.24)}
#agent-app .rail #outbtn:hover{background:#242E33;filter:none}
#agent-app .rail #outbtn:active{box-shadow:inset 0 2px 3px rgba(0,0,0,.3)}

/* ===== Part 2: agent-shell-overrides.css (hand-written, sidebar only) =====
   Load agent-shell.css AFTER agent.css. Every selector is inside "#agent-app .rail". Nothing here touches the main work area,
   dialogs, the sign-in page, Miles, payments or the staff CRM. No markup, handlers or data change: the locked rows keep their
   existing "Not Authorized — Agent Leads for Sale Only" behaviour from app.js. */

/* 1. Agent Leads for Sale: a normal staff menu row (was a solid green glowing box). When it is the open page, app.js already sets
      aria-current="true", so the staff "open page" blue row with the light-blue left bar (Part 1) applies to it like any other row. */
#agent-app .rail .navbtn.agent-entry{margin-top:0!important;background:transparent!important;color:#D3DFE8!important;
  border-color:transparent!important;box-shadow:none!important;animation:none!important;font-weight:600}
#agent-app .rail .navbtn.agent-entry:hover{background:rgba(255,255,255,.08)!important;color:#FFFFFF!important}
#agent-app .rail .navbtn.agent-entry[aria-current="true"],#agent-app .rail .navbtn.agent-entry[aria-current="true"]:hover{
  color:#FFFFFF!important;background:#1E4566!important;
  box-shadow:inset 3px 0 0 #4DBDF0,inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(0,0,0,.30)!important}
#agent-app .rail .navbtn.agent-entry .ct{color:#BFD0DD!important;background:rgba(255,255,255,.10)!important}
#agent-app .rail .navbtn.agent-entry[aria-current="true"] .ct{color:#04202E!important;background:#4DBDF0!important}
/*    The glowing dot becomes the staff menu's own "tag" icon (the icon staff see beside Agent Leads for Sale), same size as row icons. */
#agent-app .rail .agent-entry .agent-light{width:18px;height:18px;border-radius:0;box-shadow:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1'/%3E%3C/svg%3E") center/contain no-repeat}
#agent-app .rail .agent-entry[aria-current="true"] .agent-light{background:#6FD0FA}

/* 2. Profile card: the staff layout — name and role on one line, Account Settings as the staff's quiet navy button below. */
#agent-app .rail .whoami{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
#agent-app .rail .whoami .whoami-name{font-weight:700;color:#FFFFFF;font-size:14px}
#agent-app .rail .whoami .sub{font-size:13px;color:#BFD0DD}
#agent-app .rail .whoami .agent-sidebar-account{flex-basis:100%;justify-content:center;min-width:0;margin-top:6px;min-height:28px;
  padding:4px 8px;font-size:12.5px;color:#DCE6EE;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  text-shadow:none;box-shadow:none}
#agent-app .rail .whoami .agent-sidebar-account:hover{color:#FFFFFF;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.26)}
#agent-app .rail .whoami .agent-sidebar-account:active{background:rgba(255,255,255,.06);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}

/* 3. Locked staff rows look exactly like staff rows (Greg: the sidebar should look like the actual CRM). They stay visible —
      "show it, don't hide it" — and app.js keeps answering a click with "Not Authorized — Agent Leads for Sale Only".
      Only the pointer differs, so nobody expects a page to open. */
#agent-app .rail .agent-muted{cursor:not-allowed!important}
#agent-app .rail .agent-muted:active{box-shadow:none!important;transform:none!important}

/* 4. Phones and narrow windows (650px or less): agent.css hid every locked row and every section title, which left only
      Main Dash Board, Agent Leads for Sale, My Tasks, Message Center and the footer ("chopped"). Use the staff narrow layout
      instead: the same full menu, rows wrapping across the width, section titles on their own line. */
@media(max-width:650px){
  #agent-app .rail{display:flex!important;flex-direction:row;flex-wrap:wrap;align-items:center;grid-template-columns:none!important;gap:5px;padding:12px 14px}
  #agent-app .rail .agent-muted:not(.dashboard-nav){display:flex!important}
  #agent-app .rail .navsec{display:flex!important;width:100%}
  #agent-app .rail .brand,#agent-app .rail .railfoot{width:100%}
  #agent-app .rail button{width:auto;max-width:100%;font-size:14px}
  #agent-app .rail .navbtn.sub,#agent-app .rail #outbtn{font-size:13px}
  #agent-app .rail .agent-entry{justify-content:flex-start}
  #agent-app .rail .stagenav[hidden],#agent-app .rail .communication-nav[hidden]{display:none!important}
}

/* 5. Sign Out (Exit Preview in the preview): the staff solid black button. agent.css forced a gradient with !important. */
#agent-app .rail #outbtn{background:#1B2428!important;border-color:#0B1114!important;color:#FFFFFF!important}
#agent-app .rail #outbtn:hover{background:#242E33!important}

/* 6. Phones (650px or less): inventory first. The full menu (item 4) moves BELOW the page instead of filling the first screen;
      a phone agent opens the page straight onto Agent Leads for Sale. Desktop and tablet are unchanged. */
@media(max-width:650px){
  .app#agent-app{display:flex!important;flex-direction:column}
  #agent-app > .main{order:1}
  #agent-app > .rail{order:2}
}

/* Agent portal only: preserve steady attention colors when motion is reduced. */
@media(prefers-reduced-motion:reduce){#agent-app #nav-messages.message-team-alert .message-dots>span:first-child,#agent-app #nav-messages.message-admin-alert .message-dots>span:first-child{background:#FFC400}#agent-app #nav-messages.message-admin-alert .message-dots>span:last-child{background:#EF473F}}

/* Agent sidebar only: due today/overdue aggregate controls the existing shimmer; reduced-motion baseline stays intact. */
#agent-app #nav-mytasks.mytasks-nav:not(.task-due-attention)::after{display:none}