/* Floating left-hand nav dock.
   ONE fixed container; the buttons are laid out by flex, so a caption can never
   land on the circle below and adding a button needs no magic numbers. The
   previous version fixed each button individually at bottom 20/98/176/254 and
   repeated those offsets in two media queries — the captions were then added
   without growing the 78px pitch, and they collided.

   Its own file, not tokens.css: the cold-call queue pages are standalone
   documents that do not extend base.html. They need the dock but must NOT
   inherit the rest of tokens.css, which would fight their dark theme and their
   own :root variables. Hence the var(--color-navy, #0D2241) fallbacks below —
   on those pages the variable is simply not defined. */

.float-dock {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;   /* room to breathe between captioned buttons */
}
.float-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    /* the circle animates on hover, not the whole item, so the caption stays put */
}
/* Chat is a <div role=button>, not an <a> — match the link affordances. */
.float-dock-item-btn { cursor: pointer; }
.float-dock-item:focus-visible .float-dock-circle { outline: 2px solid #fff; outline-offset: 2px; }
.float-dock-circle {
    position: relative;   /* #chatBellBadge anchors to this */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-navy, #0D2241);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 6px 20px rgba(13, 34, 65, 0.35);
    transition: transform 150ms ease, background 150ms ease;
}
.float-dock-item:hover .float-dock-circle { background: #1a3358; transform: translateY(-2px) scale(1.05); }
/* Caption under each circle. An icon-only dock is only obvious to whoever built
   it — these say what each does without needing a hover. pointer-events:none so
   a caption can never swallow the click meant for a neighbouring circle. */
.float-dock-label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.2;
    color: var(--color-navy, #0D2241);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    padding: 3px 9px;
    /* "Candidate Pipeline" wraps to two lines via <br>; nowrap would push a
       ~110px pill out past the dock and look broken next to the 52px circles. */
    text-align: center;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(13, 34, 65, 0.12);
}

/* The dock is position:fixed, so it sits ON the page rather than in the layout.
   Nothing reserved room for it: at 1440px every page's content started at x=36-60
   while the dock runs to x=108, so the buttons were drawn over the sidebar. It
   only looked fine on wide screens because the 1320px document cap happened to
   centre content clear of it — which is why removing that cap on the sourcing
   dashboard made it obvious.

   `has-dock` is set by base.html whenever the dock renders (logged in), so a
   logged-out page keeps its full width. Not applied below 641px: the dock
   shrinks there and mobile layouts are their own thing. */
@media (min-width: 641px) {
    body.has-dock .main-content { padding-left: 124px; }
}

/* Pages sitting on the Certus navy background (body.dock-on-dark). The white
   caption pill is right on a light page, but on navy it reads as a row of stray
   badges — so drop the pill and go white-on-navy, matching the icons. */
.dock-on-dark .float-dock-label {
    background: transparent;
    color: #fff;
    box-shadow: none;
}

/* Seven captioned buttons is ~680px tall (six on the cold-call queue pages,
   which have no Chat). Shrink the stack on short viewports so it can never run
   off the top. MUST stay after the base .float-dock-* rules — same specificity,
   so source order decides. */
@media (max-height: 820px) {
    .float-dock { gap: 12px; bottom: 14px; }
    .float-dock-circle { width: 46px; height: 46px; font-size: 18px; }
    .float-dock-label { font-size: 10.5px; padding: 2px 7px; }
}
@media (max-height: 700px) {
    .float-dock { gap: 9px; }
    .float-dock-circle { width: 42px; height: 42px; font-size: 16px; }
    .float-dock-label { font-size: 9.5px; }
}



/* The cold-call queue pages are a dialer: the Call button, the notes box and
   the disposition buttons run down the bottom-left — exactly where the dock
   sits. Nothing reserves room for the dock below 641px (mobile layouts are
   their own thing, same as base.html), so at phone width it covered five
   controls the caller needs mid-call. Desktop keeps the nav; phones keep a
   working dialer. Set by the two cold_caller_queue templates only. */
@media (max-width: 640px) {
    body.dock-hide-mobile .float-dock { display: none; }
}

/* Reserving room on the cold-call queue pages.

   base.html does this with `body.has-dock .main-content { padding-left: 124px }`,
   but these pages are standalone documents with no .main-content — their content
   is a centred column (680px card view / 760px list view). Centring alone clears
   the dock only once the viewport is wide enough: at 928px the 680px column
   starts at exactly x=124, which is the dock's right edge. Below that it runs
   underneath, and the dialer's Call button and dispositions are the things it
   lands on. So between the mobile cut-off and that width, left-align the column
   past the dock instead of centring it.

   The 872px upper bound for the list view is the same arithmetic on its 760px
   column. Kept as literal numbers because the column widths are literals too —
   a var() here would only hide the relationship. */
@media (min-width: 641px) and (max-width: 927px) {
    body.dock-hide-mobile .hrow,
    body.dock-hide-mobile .pbar,
    body.dock-hide-mobile .lookup,
    body.dock-hide-mobile .wrap { margin-left: 124px; margin-right: auto; }
}
@media (min-width: 641px) and (max-width: 871px) {
    body.dock-hide-mobile.dock-list .wrap { margin-left: 124px; margin-right: auto; }
}