/* TRELLAN: THE SHELL. Report 258.

   The boards Queue, CE, People (desktop) and m-queue, m-home-menu-broker,
   m-home-menu-staff (phone), and Main.dc.html §9:
     * a WHITE TOP BAR across the whole window: the mark, TRELLAN, a
       hairline, the firm's name; search; Feedback, the bell, the person;
     * a WHITE RAIL under it, 220 px, caps words and no icons; the current
       item has a 2 px green rule and Mist; a count is a plain number;
     * under 760 px no rail: the menu button opens it as a DRAWER (its head,
       the person, the pages, then My profile, What reaches me, Feedback,
       Sign out); under 720 px the bottom TAB BAR (components.css §11),
       restyled here.

   Loaded after trellan.css. Screen agents do not edit this file. */

html:root { --tr-top-h: 66px; --tr-rail-w: 220px; --rail-w: 220px; --top-h: 66px; }

/* ── The top bar ──────────────────────────────────────────────────────── */
.shell-top {
  height: var(--tr-top-h); background: #FFFFFF;
  border-bottom: 1px solid var(--hairline); padding: 0 24px; gap: 24px;
}
.shell-top__brand { gap: 16px; margin-right: 8px; color: var(--charcoal); font-weight: 400; }
.shell-top__brand:hover { color: var(--charcoal); }
.shell-top__brand .tr-lockup .tr-wordmark { font-size: 13px; }
.shell-top__sep { width: 1px; height: 22px; background: var(--hairline); flex: none; }
.shell-top__name { font-size: 13px; color: var(--gray); font-weight: 400; }
.shell-top .topsearch { max-width: 446px; }
.shell-top .topsearch__form {
  height: 42px; border: 1px solid var(--edge); background: #FFFFFF; box-shadow: none;
}
.shell-top .topsearch__form:focus-within { border-color: var(--leaf); box-shadow: var(--focus-ring); }
.shell-top .topsearch__input { font-family: var(--font-sans); color: var(--ink); }
.shell-top .topsearch__input::placeholder, .shell-top .topsearch__ico { color: var(--gray); }
.shell-top .topsearch__key { border-radius: 0; }
.shell-top__search { display: none; }

.shell-top__feedback {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.shell-top__feedback .ms { display: none; }
.shell-top__feedback:hover { color: var(--leaf); }
.shell-top .bell { color: var(--ink); }
.shell-top .bell:hover, .shell-top .user-menu-btn:hover { background: var(--mist); }
/* An unread count is the one pink touch in the bar: a square Bloom dot. */
.shell-top .bell-count {
  top: 6px; right: 6px; min-width: 0; width: 8px; height: 8px; padding: 0;
  background: var(--bloom); box-shadow: none; font-size: 0; color: transparent; overflow: hidden;
}
.shell-top .user-menu .avatar, .tr-drawer__who .avatar {
  width: 36px; height: 36px; background: var(--charcoal); color: #FFFFFF;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
}
.shell-top .user-name { color: var(--ink); font-weight: 700; font-size: 14px; }
.shell-top .user-role { color: var(--gray); font-size: 12px; }
.user-menu-dropdown { border: 1px solid var(--hairline); background: #FFFFFF; }
.user-menu-item { color: var(--ink); }
.user-menu-item:hover { background: var(--mist); color: var(--ink); }

/* ── The rail ─────────────────────────────────────────────────────────── */
.shell-rail {
  background: #FFFFFF; color: var(--gray);
  border-right: 1px solid var(--hairline); width: var(--tr-rail-w);
}
.shell-rail__scroll { padding: 20px 0 12px; }
.shell-rail .nav-group { gap: 0; }
/* The divider between the tools and the pages: a hairline inset 24 px. */
.shell-rail .nav-group + .nav-group {
  position: relative; margin: 12px 0 0; padding-top: 12px; border-top: 0;
}
.shell-rail .nav-group + .nav-group::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px;
  border-top: 1px solid var(--hairline);
}
.shell-rail .shell-nav, .shell-rail .nav-group, .shell-rail .nav-item { width: 100%; box-sizing: border-box; }
.shell-rail .nav-item.nav-item--dot::after { display: none; }
.shell-rail .nav-item {
  height: auto; min-height: 38px; padding: 10px 24px; gap: 8px;
  color: var(--gray); background: transparent;
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; line-height: 1.6;
}
.shell-rail .nav-item .ms { display: none; }
.shell-rail .nav-item__label { white-space: normal; overflow: visible; }
.shell-rail .nav-item:hover { background: var(--mist); color: var(--ink); }
.shell-rail .nav-item.active, .shell-rail .nav-item.active:hover {
  background: var(--mist); color: var(--ink); font-weight: 500;
  box-shadow: inset 2px 0 0 var(--green);
}
.shell-rail .nav-item:focus-visible { outline: 2px solid var(--leaf); outline-offset: -2px; }
/* A count is a plain figure at the right, not a red badge. */
.shell-rail .nav-item__count, .shell-rail .nav-item.active .nav-item__count {
  position: static; margin-left: auto; min-width: 0; height: auto; padding: 0;
  background: transparent; color: var(--ink); box-shadow: none;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0;
  line-height: inherit;
}
/* Connect's unread dot: the one pink touch in the rail. */
.shell-rail .nav-item--dot .nav-item__label::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px;
  background: var(--bloom); vertical-align: middle;
}
.shell-rail .side-group-label, .shell-rail .hist-label {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--gray);
}
.shell-rail .side-link, .shell-rail .product-link, .shell-rail .kb-item,
.shell-rail .conv-item, .shell-rail .conv-empty, .shell-rail .prod-name { color: var(--charcoal); }
.shell-rail .side-link:hover, .shell-rail .product-link:hover, .shell-rail .conv-item:hover,
.shell-rail .conv-item.active { background: var(--mist); color: var(--ink); }
.shell-rail .product-link.current .prod-name { color: var(--ink); }
.shell-rail__extra { padding: 0 16px; }
.shell-rail__foot { border-top: 1px solid var(--hairline); padding: 12px 24px; }
.shell-rail__powered, .shell-rail__adealia { color: var(--gray); }

/* The drawer's own parts: hidden on a desktop. */
.tr-drawer__head, .tr-drawer__who, .tr-drawer__link { display: none; }

/* ── 760 px and wider: top bar across, rail under it, always open ────── */
@media (min-width: 760px) {
  .shell-top { position: fixed; top: 0; left: 0; right: 0; z-index: 160; }
  /* No width transition (design-system.css animates it): the rail never
     changes width now, and a resize caught mid-animation drew it 103 px
     wide with every label broken. */
  .shell-rail {
    position: fixed; top: var(--tr-top-h); left: 0; bottom: 0;
    height: auto; width: var(--tr-rail-w); min-width: var(--tr-rail-w);
    z-index: 150; box-shadow: none; transition: none;
  }
  .shell-rail .nav-item__label { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
  .shell-rail .nav-item__count { flex: none; padding-left: 12px; }
  .shell-rail .nav-item__label {
    position: static; width: auto; height: auto; clip: auto; overflow: visible;
  }
  .shell-rail__extra, .shell-rail__powered { display: block; }
  .shell-rail__powered { display: flex; }
  .shell-col { margin-left: var(--tr-rail-w); padding-top: var(--tr-top-h); box-sizing: border-box; }
  .shell-rail__feedback { display: none; }
  /* Report 263: with no "Powered by" foot, every part of the rail's foot
     is the drawer's, so on a desktop it draws nothing. */
  .shell-rail__foot { display: none; }
}

/* ── Under 760 px: the drawer ──────────────────────────────────────── */
@media (max-width: 759.98px) {
  .shell-top { padding: 0 12px; gap: 8px; height: 60px; }
  .shell-top__menu { border: 0; background: transparent; color: var(--ink); }
  .shell-top__brand { display: inline-flex; margin-right: auto; }
  .shell-top__brand .tr-wordmark, .shell-top__sep, .shell-top__name { display: none; }
  .shell-top .topsearch { display: none; }
  .shell-top__search {
    display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
    color: var(--ink); text-decoration: none;
  }
  .shell-top__feedback { display: none; }

  .shell-rail { width: min(320px, 86vw); padding: 0; }
  body.rail-open .shell-rail { box-shadow: var(--menu-shadow); }
  .shell-rail__scroll { padding: 8px 0; }
  .tr-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    height: 60px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--hairline); flex: none;
  }
  .tr-drawer__close {
    width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .tr-drawer__who {
    display: flex; align-items: center; gap: 12px; padding: 20px;
    border-bottom: 1px solid var(--hairline); flex: none;
  }
  .tr-drawer__who .avatar { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
  .tr-drawer__who-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
  .tr-drawer__name { font-weight: 700; color: var(--ink); }
  .tr-drawer__firm { font-size: 12px; color: var(--gray); }
  .shell-rail .nav-item { min-height: 48px; padding: 0 20px; align-items: center; }
  .shell-rail .nav-group + .nav-group { margin-top: 8px; padding-top: 8px; }
  .shell-rail .nav-group + .nav-group::before { left: 20px; right: 20px; }
  .shell-rail__foot { padding: 8px 0; }
  .tr-drawer__link, .shell-rail__feedback {
    display: flex; align-items: center; gap: 16px; min-height: 48px; padding: 0 20px;
    color: var(--ink); text-decoration: none; font-size: 15px;
  }
  .tr-drawer__link .ms, .shell-rail__feedback .ms { font-size: 20px; color: var(--charcoal); }
  .tr-drawer__link:hover, .shell-rail__feedback:hover { background: var(--mist); }
  .shell-rail__powered { display: none; }
}

/* ── Under 720 px: the bottom tab bar ─────────────────────────────── */
.tabbar { background: #FFFFFF; border-top: 1px solid var(--hairline); box-shadow: none; }
.tabbar__tab {
  color: var(--gray);
  font-family: var(--font-display); font-weight: 500; font-size: 9px;
  letter-spacing: 1px; text-transform: uppercase;
}
.tabbar__tab .ico, .tabbar__tab .ms { color: var(--charcoal); }
.tabbar__tab.is-on { color: var(--ink); box-shadow: inset 0 2px 0 var(--green); background: transparent; }
.tabbar__tab.is-on::before { display: none; }

/* The page foot ("R1 Companies · NM … Trellan"). */
.ui-page-foot { color: var(--gray); border-top: 1px solid var(--hairline); }
/* 24 Oct 2026 (Danny): the foot was 141 px under every page, outside the
   scroll, so lists were cut short above it. One slim line now. */
@media (min-width: 721px) {   /* the phone keeps its room for the tab bar */
  .ui-page.ui-page--foot { padding-top: 0 !important; padding-bottom: 0 !important;
    min-height: 0; flex: none; }
}
.ui-page .ui-page-foot { margin: 0; padding: 6px 0 8px; font-size: 11px;
  font-weight: 500; line-height: 1.4; }