@import '/client/css/espo/light.css';

:root {
    --btn-primary-bg: #2A3349;
    --btn-primary-border: #2A3349;
    --btn-primary-hover-bg: #1f2536;
    --btn-primary-hover-border: #1f2536;
  --link-color: #0074be;
  --link-hover-color: #005fa3;
  --link-record-color: #0074be;
  --link-record-hover-color: #005fa3;
  --text-link-color: #0074be;
  --text-link-hover-color: #005fa3;

  /* ── CatAwesome rail redesign: core tokens re-pointed ────────────── */
  --navbar-width: var(--220px);               /* core 232 */
  --top-bar-height: 0px;                      /* core 32: utility strip removed */
  --container-max-width: 100%;                /* core 1300 */
  --container-max-width-wide: 100%;
  --record-grid-max-width: 100%;

  /* refresh tokens (rem-based, so they scale with browser zoom like core) */
  --sh-page-x: var(--24px);                   /* content left/right gutter */
  --sh-page-y: var(--20px);                   /* gap under header band */
  --sh-control-h: var(--32px);                /* every control in the header band */
  --sh-rail-header-h: calc(var(--50px) + var(--6px));   /* 56 */
  --sh-rail-row: var(--32px);
  --sh-rail-divider-row: var(--30px);
  --sh-rail-inset: var(--8px);
  --sh-side-col: calc(var(--340px) + var(--20px));      /* 360 */
  --sh-list-sticky-bar-h: var(--46px);         /* core's .list-sticky-bar floating actions/pagination bar, unstyled by us */

  /* rail colours: the rail is dark in BOTH modes, so it cannot use core's
     --navbar-inverse-* tokens (those are light-mode greys in light.css) */
  --sh-rail-bg: #2a3349;
  --sh-rail-hover: #1f2536;
  --sh-rail-active: #e8494f;
  --sh-rail-rule: rgba(0, 0, 0, .25);
  --sh-rail-field: rgba(255, 255, 255, .08);
  --sh-rail-field-strong: rgba(255, 255, 255, .12);
  --sh-rail-text: rgba(255, 255, 255, .72);
  --sh-rail-text-strong: #fff;

  --sh-band-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

a,
a:hover {
    color: #0074be;
}

.main-header-manu-action[data-name="star"],
.main-header-manu-action[data-name="unstar"] {
  background-color: var(--btn-default-bg);
  border: 1px solid var(--btn-default-border);
  color: var(--btn-default-color);
  padding: var(--btn-padding-vertical) var(--btn-padding-horizontal);
}

.main-header-manu-action[data-name="star"]:hover,
.main-header-manu-action[data-name="unstar"]:hover {
  background-color: var(--btn-default-hover-bg);
  border-color: var(--btn-default-hover-border);
}

.main-header-manu-action[data-name="follow"],
.main-header-manu-action[data-name="unfollow"] {
  border: 1px solid var(--btn-default-border);
  padding: var(--btn-padding-vertical) var(--btn-padding-horizontal);
}

.main-header-manu-action[data-name="follow"] {
  background-color: var(--btn-default-bg);
  color: var(--btn-default-color);
}

.main-header-manu-action[data-name="follow"]:hover {
  background-color: var(--btn-default-hover-bg);
  border-color: var(--btn-default-hover-border);
}

.main-header-manu-action[data-name="follow"]:focus,
.main-header-manu-action[data-name="follow"]:active,
.main-header-manu-action[data-name="follow"]:hover:active,
.main-header-manu-action[data-name="follow"]:focus:active {
  background-color: var(--btn-default-active-bg);
  border-color: var(--btn-default-active-border);
  color: var(--btn-default-color);
}

.main-header-manu-action[data-name="unfollow"],
.main-header-manu-action[data-name="unfollow"]:hover {
  background-color: var(--btn-success-bg);
  border-color: var(--btn-success-border);
  color: var(--btn-success-color);
}

.main-header-manu-action[data-name="unfollow"]:focus,
.main-header-manu-action[data-name="unfollow"]:active,
.main-header-manu-action[data-name="unfollow"]:hover:active,
.main-header-manu-action[data-name="unfollow"]:focus:active {
  background-color: var(--btn-success-active-bg);
  border-color: var(--btn-success-active-border);
  color: var(--btn-success-color);
}

.main-header-manu-action[data-name="unfollow"] > .fa-rss {
  display: none;
}

/*
 * Corner-rounding for the star/unstar/follow/unfollow header buttons is based on structural
 * position within .header-buttons (first/last/middle child) rather than hardcoded neighbor
 * data-names. This covers adjacency with any sibling (setCompleted, the "..." menu dropdown,
 * the "Actions" dropdown, etc.) instead of only the specific cases previous fixes enumerated.
 */
.header-buttons > .main-header-manu-action[data-name="star"],
.header-buttons > .main-header-manu-action[data-name="unstar"],
.header-buttons > .main-header-manu-action[data-name="follow"],
.header-buttons > .main-header-manu-action[data-name="unfollow"] {
  border-radius: var(--border-radius) !important;
}

.header-buttons > .main-header-manu-action[data-name="star"]:first-child:not(:last-child),
.header-buttons > .main-header-manu-action[data-name="unstar"]:first-child:not(:last-child),
.header-buttons > .main-header-manu-action[data-name="follow"]:first-child:not(:last-child),
.header-buttons > .main-header-manu-action[data-name="unfollow"]:first-child:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.header-buttons > .main-header-manu-action[data-name="star"]:last-child:not(:first-child),
.header-buttons > .main-header-manu-action[data-name="unstar"]:last-child:not(:first-child),
.header-buttons > .main-header-manu-action[data-name="follow"]:last-child:not(:first-child),
.header-buttons > .main-header-manu-action[data-name="unfollow"]:last-child:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.header-buttons > .main-header-manu-action[data-name="star"]:not(:first-child):not(:last-child),
.header-buttons > .main-header-manu-action[data-name="unstar"]:not(:first-child):not(:last-child),
.header-buttons > .main-header-manu-action[data-name="follow"]:not(:first-child):not(:last-child),
.header-buttons > .main-header-manu-action[data-name="unfollow"]:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}

/* Cancels the app's "radius-left" class on the "..."/Actions dropdown-toggle — that class is
   meant for a genuinely borderless .btn-text neighbor, but follow/unfollow are styled solid here. */
.header-buttons > .main-header-manu-action[data-name="follow"] + .btn-group > .dropdown-toggle.radius-left,
.header-buttons > .main-header-manu-action[data-name="unfollow"] + .btn-group > .dropdown-toggle.radius-left {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Normalizes size across search, last-viewed, quick-create, notifications and the theme toggle. */
#navbar .navbar-right .icon {
  font-size: var(--15px);
}

body,
body[data-navbar="side"] #navbar .navbar-right,
body[data-navbar="side"].minimized.side-menu-opened #navbar .navbar-right,
.list-sticky-bar {
    background-color: #f0f0f0;
}

.stick-sub.button-container,
.sticky-head {
  background-color: #f0f0f0;
}

#navbar .navbar-brand img {
    height: initial !important;
    margin-top: 5px;
}

/* Keep the legacy desktop border; the phone bar is borderless (P1). */
@media screen and (min-width: 768px) {
  #navbar .navbar {
    border-right: 1px solid #2A3349 !important;
    background-color: #2A3349;
  }
}

/* mobile fallback (<768px) tab colors — superseded at ≥768px by the CatAwesome rail section's ul.tabs rules */
.navbar-inverse .navbar-nav .tab a span {
  color: #ffffff;
  opacity: 0.7;
}

#navbar .navbar-inverse .navbar-nav .tab.active a.nav-link,
#navbar .navbar-inverse .navbar-nav .tab.active a.nav-link:hover {
  background-color: #e8494f;
}

#navbar .navbar-inverse .navbar-nav .tab.active a.nav-link .short-label,
#navbar .navbar-inverse .navbar-nav .tab.active a.nav-link .full-label {
  opacity: 1;
}

#navbar .navbar-inverse .navbar-nav li.tab a:focus,
#navbar .navbar-inverse .navbar-nav li.tab a:hover,
#navbar .navbar-inverse .navbar-nav li.tab.open a,
#navbar .navbar-inverse .navbar-left-container .navbar-nav .dropdown-menu {
  background-color: #1f2536;
}

#navbar .navbar-inverse .navbar-left-container .navbar-nav li.tab-group ul.dropdown-menu {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}
#navbar .navbar-inverse .navbar-left-container .navbar-nav .dropdown-menu .divider {
  background-color: #242b3f;
  margin: 3px 0;
}

#navbar .navbar-inverse .navbar-nav li.tab a:focus span,
#navbar .navbar-inverse .navbar-nav li.tab a:hover span {
  opacity: 1;
}


/* Login */

#catalyst-login::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url('/client/modules/catalyst/img/loginbg.jpg');
  background-size: cover;
}

#login .logo-container {
  width: 100%;
  height: initial;
  text-align: center;
  padding: 0 50px;
}

#login .logo-container img.logo {
  max-width: 350px;
  width:100%;
}

#login {
  border: none;
  border-radius: 16px;
  padding:35px 35px 25px 35px;
}

#login.panel .panel-heading {
  background: none;
  padding-bottom: 35px;
}
#login.panel .panel-body {
  padding: 0;
}

#login-form .catalyst-system-links {
  padding-top:15px;
  font-size: 0.75rem;
  font-style: italic;
}

#login-form .catalyst-system-links .application-name {
  float: right;
}

#login-form .cell[data-name="sign-in"] {
  text-align: center;
}

#login-form .manual-login {
  margin-top: 20px;
}
#sign-in {
  padding-left: 12px;
  padding-right: 12px;
}
#sign-in span {
  margin-left: 8px
}

/* Case - Fixed work items panel */

.panel .caseitems {
  /* padding-top: 0; */
  margin-top: -35px;
}

/* =============================================================================
   DARK MODE
   Activated by adding the class "dark" to the <html> element.
   ============================================================================= */

html.dark {
  /* ── Core backgrounds ───────────────────────────────────────────── */
  --body-bg:                    #12141c;
  --panel-bg:                   #1a1d28;
  --panel-default-bg:           #1a1d28;
  --table-bg:                   #1a1d28;
  --table-bg-accent:            #1f2331;

  /* ── Text ───────────────────────────────────────────────────────── */
  --text-color:                 #bfc3cc;
  --text-white-color:           #ebedf2;
  --text-muted-color:           #707683;
  --text-gray-color:            #8a90a0;
  --gray-soft:                  #707683;
  --gray:                       #8a90a0;
  --gray-dark:                  #bfc3cc;
  --gray-light:                 #5a6070;
  --gray-lighter:               #292e3d;

  /* ── Links ──────────────────────────────────────────────────────── */
  --link-color:                 #4e92d7;
  --link-hover-color:           #6aa6e3;

  /* ── Borders & dividers ─────────────────────────────────────────── */
  --default-border-color:       #292e3d;
  --panel-default-border:       #292e3d;
  --panel-primary-border:       #1e3a5f;
  --panel-success-border:       #1a3d2a;
  --panel-danger-border:        #3d1f28;
  --panel-warning-border:       #3d2f0f;
  --panel-info-border:          #2a2040;
  --code-border-color:          #292e3d;
  --input-border:               #292e3d;
  --default-heading-bg-color:   #1a1d28;
  --warning-bg:                 #1f1d12;
  --calendar-border:            #292e3d;
  --dropdown-divider-bg:        #292e3d;

  /* ── Inputs ─────────────────────────────────────────────────────── */
  --input-bg:                   #202533;
  --input-color:                #ebedf2;
  --input-bg-disabled:          #1a1d28;
  --input-color-disabled:       #707683;

  /* ── Buttons (default) ──────────────────────────────────────────── */
  --btn-default-bg:             #252b3b;
  --btn-default-border:         #292e3d;
  --btn-default-color:          #bfc3cc;
  --btn-default-hover-bg:       #2e3548;
  --btn-default-hover-border:   #3a435c;
  --btn-default-active-bg:      #363e54;
  --btn-default-active-border:  #47526e;
  --btn-text-color:             #bfc3cc;

  /* ── Buttons (success) ──────────────────────────────────────────── */
  --btn-success-bg:             #1e4a2a;
  --btn-success-border:         #255933;
  --btn-success-color:          #a0d9aa;
  --btn-success-hover-bg:       #255933;
  --btn-success-hover-border:   #2e6e3f;
  --btn-success-active-bg:      #2e6e3f;
  --btn-success-active-border:  #388049;

  /* ── Dropdowns & popovers ───────────────────────────────────────── */
  --dropdown-bg:                #1a1d28;
  --popover-bg:                 #1a1d28;
  --dropdown-border:            #292e3d;
  --dropdown-link-color:        #bfc3cc;
  --dropdown-link-hover-color:  #ebedf2;
  --dropdown-link-hover-bg:     #252b3b;
  --dropdown-link-active-bg:    #2e3548;
  --dropdown-box-shadow:        0 4px 10px rgba(0, 0, 0, 0.5);

  /* ── Navbar ─────────────────────────────────────────────────────── */
  --navbar-bg:                  #161921;
  --navbar-inverse-bg:          #161921;
  --navbar-inverse-border:      #1a1d28;
  --navbar-inverse-link-color:  #bfc3cc;
  --navbar-inverse-link-hover-color: #ebedf2;
  --navbar-inverse-link-hover-bg:    #252b3b;
  --navbar-inverse-link-active-bg:   #2e3548;
  --navbar-inverse-link-icon-color:  #8a90a0;
  --navbar-inverse-link-icon-hover-color: #bfc3cc;
  --navbar-link-color:          #8a90a0;
  --navbar-link-hover-color:    #bfc3cc;
  --navbar-link-hover-bg:       #12141c;
  --navbar-link-active-bg:      #252b3b;

  /* ── Modals ─────────────────────────────────────────────────────── */
  --modal-content-bg:           #12141c;
  --modal-header-bg:            #161921;
  --modal-footer-bg:            #161921;
  --modal-header-border-color:  #292e3d;
  --modal-border-color:         #292e3d;
  --modal-backdrop-bg:          rgba(0, 0, 0, 0.75);

  /* ── Panels (coloured headings) ─────────────────────────────────── */
  --panel-primary-bg:           #1a2d47;
  --panel-success-bg:           #162a1f;
  --panel-danger-bg:            #2e1620;
  --panel-warning-bg:           #2b2210;
  --panel-info-bg:              #1e1830;
  --panel-primary-text:         #4e92d7;
  --panel-success-text:         #66c482;
  --panel-danger-text:          #e0828f;
  --panel-warning-text:         #d4aa60;
  --panel-info-text:            #a895c8;

  /* ── State colours ──────────────────────────────────────────────── */
  --state-default-bg:           #252b3b;
  --state-default-text:         #8a90a0;
  --state-primary-bg:           #1a2d47;
  --state-primary-text:         #4e92d7;
  --state-primary-border:       #1e3a5f;
  --state-danger-bg:            #2e1620;
  --state-danger-text:          #e0828f;
  --state-danger-border:        #4a1f2e;
  --state-info-bg:              #1e1830;
  --state-info-text:            #a895c8;
  --state-info-border:          #2d2345;
  --state-success-bg:           #162a1f;
  --state-success-text:         #66c482;
  --state-success-border:       #1d3828;
  --state-warning-bg:           #2b2210;
  --state-warning-text:         #d4aa60;
  --state-warning-border:       #3d3115;

  /* ── Selects / tags ─────────────────────────────────────────────── */
  --select-item-bg:             #252b3b;
  --select-item-text-color:     #bfc3cc;
  --select-item-active-bg:      #4e92d7;
  --select-item-active-text-color: #fff;
  --select-item-border:         #707683;

  /* ── Labels & badges ────────────────────────────────────────────── */
  --label-default-bg:           #707683;

  /* ── Code blocks ────────────────────────────────────────────────── */
  --code-bg:                    #161921;
  --code-color:                 #bfc3cc;

  /* ── Scrollbars ─────────────────────────────────────────────────── */
  --scroll-bg:                  #161921;
  --scroll-thumb-bg:            #292e3d;

  /* ── Tooltips ───────────────────────────────────────────────────── */
  --tooltip-bg:                 #ebedf2;
  --tooltip-color:              #12141c;

  /* ── Wells ──────────────────────────────────────────────────────── */
  --well-bg:                    #1a1d28;
  --well-border:                #292e3d;

  /* ── Shadows ────────────────────────────────────────────────────── */
  --default-box-shadow:         1px 1px 4px rgba(0, 0, 0, 0.4);
  --top-bar-box-shadow:         2px 2px 4px rgba(0, 0, 0, 0.4);

  /* ── Misc ───────────────────────────────────────────────────────── */
  --collapsed-modal-bg:         #202533;
  --blockquote-border-color:    #202533;
  --calendar-today-bg:          #2b2210;
  --calendar-busy-bg:           #3d2d55;
  --site-footer-color:          #707683;

  /* ── CatAwesome rail (dark overrides) ─────────────────────────────── */
  --sh-rail-bg:                 #161921;
  --sh-rail-hover:               #12141c;
  --sh-rail-active:             #942a33;
  --sh-band-shadow:             0 1px 3px rgba(0, 0, 0, .4);
}

/* ─── Body & sticky bars ────────────────────────────────────────── */

html.dark body {
  background-color: #12141c !important;
}

html.dark body,
html.dark body[data-navbar="side"] #navbar .navbar-right,
html.dark body[data-navbar="side"].minimized.side-menu-opened #navbar .navbar-right,
html.dark .list-sticky-bar {
  background-color: #12141c;
}

html.dark .list-sticky-bar,
html.dark .stick-sub.button-container {
  background-color: #161921;
}

/* ─── Links ─────────────────────────────────────────────────────── */

html.dark a,
html.dark a:hover {
  color: #4e92d7;
}

/* ─── Navbar (catawesome hard-coded values) ─────────────────────── */

html.dark #navbar .navbar {
  border-right-color: #161921 !important;
  background-color: #161921;
}

html.dark #navbar .navbar-inverse .navbar-nav .tab.active a.nav-link,
html.dark #navbar .navbar-inverse .navbar-nav .tab.active a.nav-link:hover {
  background-color: #942a33; /* Darker red from mockup */
}

html.dark #navbar .navbar-inverse .navbar-nav li.tab a:focus,
html.dark #navbar .navbar-inverse .navbar-nav li.tab a:hover,
html.dark #navbar .navbar-inverse .navbar-nav li.tab.open a,
html.dark #navbar .navbar-inverse .navbar-left-container .navbar-nav .dropdown-menu {
  background-color: #12141c;
}

html.dark #navbar .navbar-inverse .navbar-left-container .navbar-nav .dropdown-menu .divider {
  background-color: #1a1d28;
}

/* ─── Panel headings ────────────────────────────────────────────── */

html.dark body .panel-default > .panel-heading {
  background-color: transparent; /* Makes it blend into the panel like the mockup */
  border-bottom: 1px solid var(--default-border-color); /* Adds the subtle divider */
  color: #ebedf2;
}

/* ─── Inputs ────────────────────────────────────────────────────── */

html.dark .form-control,
html.dark .selectize-input {
  background-color: #202533;
  color: #ebedf2;
  border-color: #292e3d;
}

html.dark .form-control::placeholder {
  color: #707683;
}

html.dark .form-control[disabled],
html.dark .form-control[readonly],
html.dark fieldset[disabled] .form-control {
  background-color: #1a1d28;
  color: #707683;
}

/* ─── Tables ────────────────────────────────────────────────────── */

html.dark .table > tbody > tr > td,
html.dark .table > tbody > tr > th,
html.dark .table > thead > tr > td,
html.dark .table > thead > tr > th {
  border-top-color: #292e3d;
}

html.dark .table > thead > tr > th {
  border-bottom-color: #292e3d;
}

html.dark .table-hover > tbody > tr:hover {
  background-color: #1f2331;
}

/* ==========================================================================
   THEME TOGGLE
   ========================================================================== */

.dropdown-menu a.active {
    font-weight: 600;
}

/* =============================================================================
   Section 9 below (the one-row detail header) only renders correctly where
   core's sticky button-bar JS has been disabled, which the Catalyst shared
   record/detail view does by setting a `data-sh-detail` attribute on `.detail`.
   Section 9's selectors below require that attribute so unwired entities keep
   core's original (working) detail header/sticky-bar behaviour. Every other
   section is unscoped.

   Selectors marked [JS] need client/modules/catalyst/src/catalyst-layout.js.
   Everything else is CSS only and works on unmodified core markup.

   Specificity rule used throughout: rail rules start with
   `body[data-navbar="side"] #navbar > .navbar` so they beat both core
   (body[data-navbar=side] #navbar .navbar …) and the existing CatAwesome rules
   (#navbar .navbar-inverse .navbar-nav …) without !important.
   ============================================================================= */


/* ── 0. Tokens ──────────────────────────────────────────────────────────────── */

/* Rail tokens (--navbar-width, --sh-*, and their dark overrides) now live in the
   shared :root/html.dark blocks near the top of this file. */


/* ── 1. Page frame ─────────────────────────────────────────────────────────── */

@media screen and (min-width: 768px) {
  body[data-navbar="side"] { padding-top: 0; }
  body[data-navbar="side"].has-navbar > #content.content {
    padding-left: calc(var(--navbar-width) + var(--sh-page-x));
    padding-right: var(--sh-page-x);
    padding-top: 0;
    max-width: none;
  }
  body[data-navbar="side"].has-navbar.minimized > #content.content {
    padding-left: calc(var(--navbar-minimized-width) + var(--sh-page-x));
  }
  body[data-navbar="side"].minimized > footer { margin-left: var(--navbar-minimized-width); }
}


/* ── 2. Rail shell ─────────────────────────────────────────────────────────────
   .navbar (fixed, full height)
   ├ .navbar-header          56px: logo + minimizer [JS moves a.minimizer here]
   └ .navbar-body            flex column, fills the rest
     ├ ul.sh-rail-top        [JS] search + quick create
     ├ .navbar-left-container  scrolls: ul.tabs
     ├ .navbar-right-container emptied by JS, hidden
     └ ul.sh-rail-bottom     [JS] last viewed, notifications, user, theme
   ─────────────────────────────────────────────────────────────────────────── */

@media screen and (min-width: 768px) {
  body[data-navbar="side"] #navbar > .navbar {
    display: flex;
    flex-direction: column;
    width: var(--navbar-width);
    background-color: var(--sh-rail-bg);
    border-right: 0 !important;               /* theme sets 1px navy !important */
  }

  /* header row */
  body[data-navbar="side"] #navbar > .navbar > .navbar-header {
    float: none;
    flex: 0 0 var(--sh-rail-header-h);
    width: 100%;
    height: var(--sh-rail-header-h);
    padding: 0 var(--12px);
    display: flex;
    align-items: center;
    gap: var(--8px);
  }
  body[data-navbar="side"] #navbar > .navbar > .navbar-header::before,
  body[data-navbar="side"] #navbar > .navbar > .navbar-header::after { content: none; }
  body[data-navbar="side"] #navbar > .navbar .navbar-logo-container { flex: 1 1 auto; min-width: 0; width: auto; }
  body[data-navbar="side"] #navbar > .navbar .navbar-logo-container a.navbar-brand {
    display: flex;
    align-items: center;
    height: var(--40px);
    max-width: 100%;
    margin: 0;
    padding: 0 var(--6px);
    border-radius: var(--border-radius);
    float: none;
    transition: background-color .15s ease-in-out;
  }
  body[data-navbar="side"] #navbar > .navbar .navbar-logo-container a.navbar-brand:hover,
  body[data-navbar="side"] #navbar > .navbar .navbar-logo-container a.navbar-brand.active { background-color: var(--sh-rail-hover); }
  body[data-navbar="side"] #navbar > .navbar .navbar-logo-container a.navbar-brand img.logo {
    max-height: var(--28px);                  /* theme forces height:initial !important */
    max-width: 100%;
    width: auto;
    margin: 0;
  }
  body[data-navbar="side"] #navbar > .navbar > .navbar-header > a.side-menu-button { display: none; }

  /* minimizer (moved into .navbar-header by JS; until then it sits under the tabs) */
  body[data-navbar="side"] #navbar > .navbar a.minimizer {
    flex: 0 0 var(--28px);
    width: var(--28px);
    height: var(--28px);
    margin: 0;
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    color: var(--sh-rail-text) !important;    /* core sets !important */
    font-size: var(--12px);
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
  }
  body[data-navbar="side"] #navbar > .navbar a.minimizer span { margin: 0; }
  body[data-navbar="side"] #navbar > .navbar a.minimizer:hover { background-color: var(--sh-rail-hover); color: var(--sh-rail-text-strong) !important; }

  /* body column */
  body[data-navbar="side"] #navbar > .navbar > .navbar-body {
    float: none;
    clear: none;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex !important;                 /* bootstrap .navbar-collapse */
    flex-direction: column;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  body[data-navbar="side"] #navbar > .navbar > .navbar-body::before,
  body[data-navbar="side"] #navbar > .navbar > .navbar-body::after { content: none; }

  body[data-navbar="side"] #navbar > .navbar .navbar-left-container {
    flex: 1 1 auto;
    min-height: 0;
    position: static;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--6px) 0 var(--8px);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
  }
  body[data-navbar="side"] #navbar > .navbar .navbar-left-container::after { content: none; }
  body[data-navbar="side"] #navbar > .navbar .navbar-right-container { display: none; }
}


/* ── 3. Rail links ─────────────────────────────────────────────────────────── */

@media screen and (min-width: 768px) {
  body[data-navbar="side"] #navbar > .navbar ul.tabs {
    float: none;
    width: 100%;
    height: auto !important;                  /* core JS writes an inline height */
    margin: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs::before,
  body[data-navbar="side"] #navbar > .navbar ul.tabs::after { content: none; }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li { float: none; }

  /* entity link: 32 tall, inset 8, text starts 20 + 16 icon + 12 gap */
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab > a.nav-link,
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab > a.nav-link-group {
    margin: 0 var(--sh-rail-inset);
    height: var(--sh-rail-row);
    padding: 0 var(--12px) 0 var(--20px);
    display: flex;
    align-items: center;
    gap: var(--12px);
    border: 0;
    border-radius: var(--border-radius);
    background-color: transparent;
    color: var(--sh-rail-text);
    font-size: var(--14px);
    line-height: var(--20px);
    white-space: nowrap;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab > a > span.short-label {
    position: static;
    flex: 0 0 var(--16px);
    width: var(--16px);
    display: flex;
    justify-content: center;
    color: inherit;              /* core sets a fixed muted-grey icon colour here, unscoped for the rail */
    opacity: 1;
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab > a > span.short-label > span {
    width: var(--16px);
    font-size: var(--14px);
    color: inherit;
    opacity: 1;
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab > a > span.short-label > .short-label-text { display: none; }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab > a > span.full-label {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    opacity: 1;
  }

  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab > a.nav-link:hover,
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab > a.nav-link:focus,
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab > a.nav-link-group:hover,
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab.open > a.nav-link-group {
    background-color: var(--sh-rail-hover);
    color: var(--sh-rail-text-strong);
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab.active > a.nav-link,
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab.active > a.nav-link:hover,
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab.tab-group:has(li.tab.active) > a.nav-link-group {
    background-color: var(--sh-rail-active);
    color: var(--sh-rail-text-strong);
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab.active > a > span.short-label { opacity: 1; }

  /* Home: the logo is the Home link */
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab[data-name="Home"] { display: none; }

  /* divider row: 30 tall, 6 above, label 14/500 white, chevron at right */
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-divider {
    margin: var(--6px) var(--sh-rail-inset) 0;
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-divider > div.nav-divider-text {
    height: var(--sh-rail-divider-row);
    padding: 0 var(--12px);
    display: flex;
    align-items: center;
    gap: var(--8px);
    border-radius: var(--border-radius);
    color: var(--sh-rail-text);
    transition: background-color .15s ease-in-out;
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-divider > div.nav-divider-text > .label-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sh-rail-text-strong) !important;   /* theme sets #fff !important */
    font-size: var(--14px);
    font-weight: 500;
    line-height: var(--20px);
    opacity: 1;
  }

  /* [JS] collapsible dividers: .sh-divider-toggle / .sh-closed / .sh-has-active */
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-divider.sh-divider-toggle > div.nav-divider-text { cursor: pointer; user-select: none; }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-divider.sh-divider-toggle > div.nav-divider-text:hover { background-color: var(--sh-rail-hover); }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-divider.sh-divider-toggle > div.nav-divider-text::after {
    content: "\f078";                         /* chevron-down */
    order: 3;
    flex: 0 0 var(--10px);
    font: var(--fa-font-solid);
    font-size: var(--10px);
    text-align: center;
    opacity: .7;
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-divider.sh-closed > div.nav-divider-text::after { content: "\f054"; } /* chevron-right */
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-divider.sh-closed.sh-has-active > div.nav-divider-text::before {
    content: "";
    order: 2;
    flex: 0 0 var(--6px);
    height: var(--6px);
    border-radius: 50%;
    background-color: var(--sh-rail-active);
  }
  body[data-navbar="side"]:not(.minimized) #navbar > .navbar ul.tabs > li.tab.sh-hidden { display: none; }

  /* group tabs (li.tab.tab-group > a.nav-link-group + ul.dropdown-menu).
     Core already positions the menu: fixed, left: var(--navbar-width). */
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-group > a > .group-caret {
    position: static;
    margin-left: auto;
    font-size: var(--12px);
    opacity: .7;
    transform: none;
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-group > .dropdown-menu { min-width: var(--220px); }
}


/* ── 4. Rail tools: top (search + create) ─────────────────────────── [JS] ── */

@media screen and (min-width: 768px) {
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top {
    float: none;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 var(--12px) var(--10px);
    display: flex;
    align-items: center;
    gap: var(--6px);
    border-bottom: 1px solid var(--sh-rail-rule);
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top::before,
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top::after { content: none; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top > li { float: none; position: static; }

  /* search pill: icon left, input fills */
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top > li.global-search-container {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top > li.global-search-container > .input-group {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--sh-rail-row);
    border-radius: var(--border-radius);
    background-color: var(--sh-rail-field);
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top > li.global-search-container > .input-group > .input-group-btn {
    order: -1;
    display: flex;
    width: auto;
    font-size: inherit;
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top a.global-search-button {
    width: var(--30px);
    height: var(--sh-rail-row);
    padding: 0 0 0 var(--4px);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-rail-text);
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top a.global-search-button .icon { font-size: var(--12px); line-height: 1; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top input.global-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    height: var(--sh-rail-row);
    min-height: 0;
    max-height: none;
    padding: 0 var(--10px) 0 var(--2px);
    border: 0;
    border-radius: 0 !important;              /* core sets !important */
    background: transparent;
    box-shadow: none;
    color: var(--sh-rail-text-strong);
    font-size: var(--14px);
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top input.global-search-input::placeholder { color: var(--sh-rail-text); opacity: 1; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top > li.global-search-container > .input-group:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top a.sh-search-trigger { display: none; }  /* collapsed rail only */

  /* quick create: 32 square */
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top > li.quick-create-container { flex: 0 0 var(--32px); width: var(--32px); }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top > li.quick-create-container > a {
    width: var(--32px);
    height: var(--32px);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    background-color: var(--sh-rail-field-strong);
    color: var(--sh-rail-text-strong);
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top > li.quick-create-container > a:hover,
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top > li.quick-create-container.open > a { background-color: var(--sh-rail-hover); }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top > li.quick-create-container > a .icon { font-size: var(--14px); }
}


/* ── 5. Rail tools: bottom (last viewed, notifications, user, theme) ─ [JS] ──
   2-column grid: the two list rows span both columns; the user row takes
   column 1 and the theme button sits beside it in column 2.              */

@media screen and (min-width: 768px) {
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom {
    float: none;
    flex: 0 0 auto;
    margin: 0;
    padding: var(--8px) var(--8px) var(--10px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--32px) var(--1px);
    align-items: center;
    gap: var(--4px);
    border-top: 1px solid var(--sh-rail-rule);
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom::before,
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom::after { content: none; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li { float: none; position: static; width: auto; display: block; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li[data-item="lastViewed"],
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li[data-item="notificationBadge"] { grid-column: 1 / -1; }

  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li > a {
    width: auto;
    height: var(--sh-rail-row);
    padding: 0 var(--12px);
    display: flex;
    align-items: center;
    gap: var(--12px);
    border-radius: var(--border-radius);
    background-color: transparent;
    color: var(--sh-rail-text);
    font-size: var(--14px);
    line-height: var(--20px);
    white-space: nowrap;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li > a:hover,
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.open > a {
    background-color: var(--sh-rail-hover);
    color: var(--sh-rail-text-strong);
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li > a > .icon {
    flex: 0 0 var(--16px);
    width: var(--16px);
    text-align: center;
    font-size: var(--14px);
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom .sh-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* notification count: pill at the row end */
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom .notifications-button > .number-badge {
    position: static;
    order: 3;
    min-width: var(--18px);
    height: var(--18px);
    padding: 0 var(--5px);
    border-radius: var(--9px);
    background-color: var(--sh-rail-active);
    color: #fff;
    font-size: var(--11px);
    font-weight: 600;
    line-height: var(--18px);
    text-align: center;
  }

  /* user row: 40 tall, 24 avatar, name in white */
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.menu-container > a {
    height: var(--40px);
    padding: 0 var(--8px);
    gap: var(--10px);
    color: var(--sh-rail-text-strong);
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.menu-container > a > .fa-ellipsis-v { display: none; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom .sh-user-avatar {
    flex: 0 0 var(--24px);
    width: var(--24px);
    height: var(--24px);
    border-radius: 50%;
    object-fit: cover;
  }

  /* theme: 32 square beside the user row */
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.theme-options-container > a {
    width: var(--32px);
    padding: 0;
    justify-content: center;
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.theme-options-container > a > .icon { flex: 0 0 auto; }
}


/* ── 6. Rail menus and panels open beside the rail ────────────────── [JS] ──
   Top-row menus hang from y = 56 (under the logo row); bottom-row menus grow
   upward from 8px above the viewport bottom. All sit 8px right of the rail. */

@media screen and (min-width: 768px) {
  body[data-navbar="side"] {
    --sh-flyout-left: calc(var(--navbar-width) + var(--8px));
  }
  body[data-navbar="side"].minimized {
    --sh-flyout-left: calc(var(--navbar-minimized-width) + var(--8px));
  }

  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top .dropdown-menu,
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top .global-search-panel-container {
    position: fixed;
    left: var(--sh-flyout-left);
    right: auto;
    top: var(--sh-rail-header-h);
    bottom: auto;
    margin: 0;
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom .dropdown-menu,
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom .last-viewed-panel-container,
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom .notifications-panel-container {
    position: fixed;
    left: var(--sh-flyout-left);
    right: auto;
    top: auto;
    bottom: var(--8px);
    margin: 0;
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-top .dropdown-menu,
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom .dropdown-menu { min-width: var(--220px); }

  /* the panel containers are 0×0 anchors; the panels hang from them */
  body[data-navbar="side"] #navbar > .navbar .global-search-panel-container,
  body[data-navbar="side"] #navbar > .navbar .last-viewed-panel-container,
  body[data-navbar="side"] #navbar > .navbar .notifications-panel-container { width: 0; height: 0; z-index: 1001; }
  body[data-navbar="side"] #navbar > .navbar #global-search-panel { top: 0; bottom: auto; left: 0; right: auto; margin-top: 0; }
  body[data-navbar="side"] #navbar > .navbar #last-viewed-panel,
  body[data-navbar="side"] #navbar > .navbar #notifications-panel { top: auto; bottom: 0; left: 0; right: auto; margin-top: 0; }
  body[data-navbar="side"] #navbar > .navbar #global-search-panel > .panel,
  body[data-navbar="side"] #navbar > .navbar #last-viewed-panel > .panel,
  body[data-navbar="side"] #navbar > .navbar #notifications-panel > .panel {
    margin: 0;
    border-radius: var(--panel-border-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  }
  body[data-navbar="side"] #navbar > .navbar #global-search-panel > .panel > .panel-body,
  body[data-navbar="side"] #navbar > .navbar #last-viewed-panel > .panel > .panel-body,
  body[data-navbar="side"] #navbar > .navbar #notifications-panel > .panel > .panel-body {
    max-height: min(var(--600px), calc(100vh - var(--120px)));
  }

  /* The search box's live-typing suggestions use the generic autocomplete widget shared
     by every other autocomplete field in the app (link fields, etc.) — it positions
     itself via inline styles computed from the input's on-screen location, so beating
     those requires !important. Scoped to :has(...:focus) so only the dropdown belonging
     to the rail's OWN search input is repositioned; every other field's autocomplete
     is untouched, since then the rail input isn't the one focused. */
  body[data-navbar="side"]:has(#navbar ul.sh-rail-top .global-search-input:focus) .autocomplete-suggestions {
    position: fixed !important;
    left: var(--sh-flyout-left) !important;
    top: var(--sh-rail-header-h) !important;
    width: var(--300px) !important;
  }
  body[data-navbar="side"].minimized:has(#navbar ul.sh-rail-top .global-search-input:focus) .autocomplete-suggestions {
    top: calc(var(--sh-rail-header-h) + var(--sh-rail-row) + var(--6px)) !important;
  }
}


/* ── 7. Collapsed rail (body.minimized, 50px) ─────────────────────────────── */

@media screen and (min-width: 768px) {
  body[data-navbar="side"].minimized #navbar > .navbar { width: var(--navbar-minimized-width); }
  body[data-navbar="side"].minimized #navbar > .navbar > .navbar-header { padding: 0; justify-content: center; }
  body[data-navbar="side"].minimized #navbar > .navbar .navbar-logo-container { display: none; }
  body[data-navbar="side"].minimized #navbar > .navbar a.minimizer { width: var(--36px); flex-basis: var(--36px); height: var(--32px); }

  /* icon column: every square is 36 wide, centred (7px each side) */
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-top {
    padding: 0 0 var(--10px);
    flex-direction: column;
    gap: var(--4px);
  }
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-top > li.global-search-container { flex: 0 0 auto; }
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-top a.sh-search-trigger,
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-top > li.quick-create-container > a {
    width: var(--36px);
    height: var(--32px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    background-color: transparent;
    color: var(--sh-rail-text);
  }
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-top a.sh-search-trigger:hover,
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-top > li.global-search-container.sh-search-open a.sh-search-trigger,
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-top > li.quick-create-container > a:hover {
    background-color: var(--sh-rail-hover);
    color: var(--sh-rail-text-strong);
  }
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-top > li.quick-create-container { flex: 0 0 auto; width: auto; }
  /* the real search input pops out beside the rail when the icon is clicked */
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-top > li.global-search-container > .input-group { display: none; }
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-top > li.global-search-container.sh-search-open > .input-group {
    display: flex;
    position: fixed;
    left: var(--sh-flyout-left);
    top: var(--sh-rail-header-h);
    width: var(--300px);
    z-index: 1002;
    background-color: var(--sh-rail-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  }
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-top .global-search-panel-container { top: calc(var(--sh-rail-header-h) + var(--sh-rail-row) + var(--6px)); }

  /* links: 36×32 icon squares */
  body[data-navbar="side"].minimized #navbar > .navbar ul.tabs > li.tab > a.nav-link,
  body[data-navbar="side"].minimized #navbar > .navbar ul.tabs > li.tab > a.nav-link-group {
    width: var(--36px);
    margin: 0 var(--7px);
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  body[data-navbar="side"].minimized #navbar > .navbar ul.tabs > li.tab > a > span.full-label,
  body[data-navbar="side"].minimized #navbar > .navbar ul.tabs > li.tab-group > a > .group-caret { display: none; }
  body[data-navbar="side"].minimized #navbar > .navbar ul.tabs > li.tab.sh-hidden { display: block; }

  /* dividers: a 1px rule, 6 above and below, 14 in from each side */
  body[data-navbar="side"].minimized #navbar > .navbar ul.tabs > li.tab-divider {
    height: 1px;
    margin: var(--6px) var(--14px);
    background-color: var(--sh-rail-rule);
  }
  body[data-navbar="side"].minimized #navbar > .navbar ul.tabs > li.tab-divider > div.nav-divider-text { display: none; }

  /* bottom tools: single centred column; order Last Viewed, Notifications, Theme, User */
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-bottom {
    padding: var(--8px) 0 var(--10px);
    grid-template-columns: var(--36px);
    justify-content: center;
  }
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-bottom > li { grid-column: 1; position: relative; }
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-bottom > li.theme-options-container { order: 3; }
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-bottom > li.menu-container { order: 4; }
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-bottom > li > a {
    width: var(--36px);
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-bottom > li.menu-container > a { height: var(--36px); }
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-bottom .sh-label { display: none; }
  body[data-navbar="side"].minimized #navbar > .navbar ul.sh-rail-bottom .notifications-button > .number-badge {
    position: absolute;
    top: var(--1px);
    right: 0;
    min-width: var(--16px);
    height: var(--16px);
    padding: 0 var(--4px);
    border-radius: var(--8px);
    font-size: var(--10px);
    line-height: var(--16px);
  }
}


/* ── 8. Page header band (all pages) ────────────────────────────────────────
   Full-bleed white band. Detail: eyebrow crumbs 13px over a 20/500 title.   */

body[data-navbar="side"] #main > .page-header {
  margin: 0 calc(-1 * var(--sh-page-x));
  padding: var(--12px) var(--sh-page-x);
  min-height: calc(var(--40px) + var(--24px));        /* 64 */
  display: flex;
  align-items: center;
  background-color: var(--panel-bg);
  border-bottom: 1px solid var(--panel-default-border);
  box-shadow: var(--sh-band-shadow);
  position: relative;
  z-index: 2;
}
body[data-navbar="side"] #main > .page-header > .page-header-row {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--12px) var(--24px);
}
body[data-navbar="side"] #main > .page-header .page-header-column-1 { flex: 1 1 26rem; min-width: 0; overflow: visible; }
body[data-navbar="side"] #main > .page-header .page-header-column-2 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--8px);
}
body[data-navbar="side"] #main > .page-header h3.header-title {
  margin: 0;
  font-size: var(--20px);
  font-weight: 500;
  line-height: 1.35;
}
body[data-navbar="side"] #main > .page-header .header-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--6px);
  min-height: 0;
  margin: 0;
  white-space: normal;
  overflow: visible;
}
body[data-navbar="side"] #main > .page-header .header-breadcrumbs.overlapped::after { content: none; }
body[data-navbar="side"] #main > .page-header .header-breadcrumbs > .breadcrumb-item,
body[data-navbar="side"] #main > .page-header .header-breadcrumbs > .breadcrumb-separator {
  display: block;
  font-size: var(--13px);
  font-weight: 400;
  line-height: var(--18px);
}
body[data-navbar="side"] #main > .page-header .header-breadcrumbs > .breadcrumb-separator > span { padding: 0; }
body[data-navbar="side"] #main > .page-header .header-breadcrumbs > .breadcrumb-separator > span::before {
  content: "\f054";                                   /* chevron-right */
  font: var(--fa-font-solid);
  font-size: var(--9px);
  color: var(--text-muted-color);
}
/* the record title: last crumb drops to its own line */
body[data-navbar="side"] #main > .page-header .header-breadcrumbs > .breadcrumb-item:last-child:not(:only-child) {
  flex: 0 0 100%;
  margin-top: var(--2px);
  font-size: var(--20px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-color);
  text-wrap: pretty;
}
body[data-navbar="side"] #main > .page-header .header-breadcrumbs > .breadcrumb-item:only-child {
  font-size: var(--20px);
  font-weight: 500;
  line-height: 1.35;
}
body[data-navbar="side"] #main > .page-header .header-breadcrumbs .font-size-flexible { font-size: inherit !important; }  /* core JS shrinks long titles */

/* header buttons: 32 tall, 13px */
body[data-navbar="side"] #main > .page-header .header-buttons { display: flex; align-items: center; float: none; }
body[data-navbar="side"] #main > .page-header .header-buttons .btn {
  height: var(--sh-control-h);
  padding: 0 var(--12px);
  display: inline-flex;
  align-items: center;
  gap: var(--6px);
  font-size: var(--13px);
  line-height: 1;
}
body[data-navbar="side"] #main > .page-header .header-buttons .btn.dropdown-toggle { width: var(--sh-control-h); padding: 0; justify-content: center; }


/* ── 9. Record header row (detail pages) ────────────────────────────────────
   One white band, one row, as in Staff Hub 3b:
     [crumbs / title ............] [Detail|Plan|Board|Gantt] [Edit][…] [Star][Follow] [‹][›]
   CSS only. No element leaves its view: #main becomes a grid and the wrappers
   between #main and the buttons get display: contents, so the button groups
   become grid items and can be placed on row 1. Click handlers are delegated
   on the view elements, which are still ancestors in the DOM, so they keep
   working. #main::before draws the band behind row 1.

   DEVIATION FROM HANDOFF: every selector below is scoped to .detail[data-sh-detail]
   (or, for standalone create/edit pages such as Email > Create, .edit[data-sh-edit])
   rather than plain .detail/.edit — the markers are set globally (Global.json
   viewSetupHandlers, staff-hub-detail.js / staff-hub-edit.js) so they always match, but
   keep the selectors self-documenting about which markup they depend on. A standalone
   edit page has no .modes tabs and typically an empty page-header-column-2 (no
   Star/Follow) — those grid cells just collapse to zero width when nothing is placed
   in them, so the same 5-column grid works for both without a separate ruleset.

   Core's sticky button-bar JS (initStickableButtonsContainer) is left enabled and still
   runs: when it adds .stick-sub to .detail-button-container on scroll, that container is
   deliberately EXCLUDED from the display:contents unwrapping below, so core's own
   `.stick-sub{position:fixed; left:var(--navbar-width); ...}` CSS (already pointed at our
   rail-width/top-bar tokens) renders it as a real floating bar again instead of a no-op
   contents box. Only the non-stuck (in-grid) state gets unwrapped.                       */

@media screen and (min-width: 768px) {
  body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]),
  body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    column-gap: var(--8px);
    align-items: center;
  }
  body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail])::before,
  body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit])::before {
    content: "";
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: stretch;
    margin: 0 calc(-1 * var(--sh-page-x));
    background-color: var(--panel-bg);
  }
  /* no key-fields strip: the band closes itself */
  body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]):not(:has(.sh-key-fields))::before,
  body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit])::before {
    border-bottom: 1px solid var(--panel-default-border);
    box-shadow: var(--sh-band-shadow);
  }

  /* wrappers that step aside */
  body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]) > .page-header,
  body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]) > .page-header > .page-header-row,
  body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]) > .record,
  body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]) > .record > .detail,
  body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) > .page-header,
  body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) > .page-header > .page-header-row,
  body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) > .record,
  body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) > .record > .edit,
  /* !important: core's edit-buttons container gets a `style="display: block"` inline
     attribute from jQuery .show() when switching into edit mode, which otherwise beats
     this class-based rule regardless of selector specificity. */
  body[data-navbar="side"] #main > .record > .detail[data-sh-detail] > .detail-button-container:not(.hidden):not(.stick-sub),
  body[data-navbar="side"] #main > .record > .detail[data-sh-detail] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container,
  body[data-navbar="side"] #main > .record > .edit[data-sh-edit] > .detail-button-container:not(.hidden):not(.stick-sub),
  body[data-navbar="side"] #main > .record > .edit[data-sh-edit] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container { display: contents !important; }

  /* everything else spans the grid, below the band */
  body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]) > *,
  body[data-navbar="side"] #main > .record > .detail[data-sh-detail] > *,
  body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) > *,
  body[data-navbar="side"] #main > .record > .edit[data-sh-edit] > * { grid-column: 1 / -1; min-width: 0; }

  /* row 1 cells */
  body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]) .page-header-column-1,
  body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) .page-header-column-1 {
    grid-row: 1; grid-column: 1;
    z-index: 1;
    min-height: calc(var(--40px) + var(--24px)) !important;   /* core sets min-height: unset !important */
    padding: var(--8px) var(--16px) var(--8px) 0 !important;  /* core sets padding: unset !important */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
  }
  body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]) > .modes,
  body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) > .modes {
    grid-row: 1; grid-column: 2;
    z-index: 1;
    margin: 0 var(--8px) 0 0;                 /* 16 to the button cluster */
    padding: 0;
    float: none;
  }
  body[data-navbar="side"] #main > .record > .detail[data-sh-detail] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container > .actions-btn-group,
  body[data-navbar="side"] #main > .record > .edit[data-sh-edit] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container > .actions-btn-group {
    grid-row: 1; grid-column: 3;
    z-index: 1;
    float: none;
    display: flex;
  }
  body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]) .page-header-column-2,
  body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) .page-header-column-2 {
    grid-row: 1; grid-column: 4;
    z-index: 1;
    display: flex;
    align-items: center;
  }
  body[data-navbar="side"] #main > .record > .detail[data-sh-detail] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container > .pull-right,
  body[data-navbar="side"] #main > .record > .edit[data-sh-edit] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container > .pull-right {
    grid-row: 1; grid-column: 5;
    z-index: 1;
    float: none;
    margin: 0;
    display: flex;
    gap: 2px;
  }
  body[data-navbar="side"] #main > .record > .detail[data-sh-detail] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container > .pull-right:empty,
  body[data-navbar="side"] #main > .record > .edit[data-sh-edit] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container > .pull-right:empty { display: none; }
  body[data-navbar="side"] #main > .record > .detail[data-sh-detail] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container > .pull-right > .btn-group,
  body[data-navbar="side"] #main > .record > .edit[data-sh-edit] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container > .pull-right > .btn-group { display: flex; gap: 2px; float: none; }

  /* ≤1100: title on its own line, controls on a second line, left-aligned */
  @media (max-width: 1100px) {
    body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]),
    body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) { grid-template-columns: auto auto auto auto minmax(0, 1fr); }
    body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail])::before,
    body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit])::before { grid-row: 1 / 3; }
    body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]) .page-header-column-1,
    body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) .page-header-column-1 { grid-column: 1 / -1; padding-right: 0 !important; }
    body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]) > .modes,
    body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) > .modes { grid-row: 2; grid-column: 1; }
    body[data-navbar="side"] #main > .record > .detail[data-sh-detail] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container > .actions-btn-group,
    body[data-navbar="side"] #main > .record > .edit[data-sh-edit] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container > .actions-btn-group { grid-row: 2; grid-column: 2; }
    body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]) .page-header-column-2,
    body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) .page-header-column-2 { grid-row: 2; grid-column: 3; }
    body[data-navbar="side"] #main > .record > .detail[data-sh-detail] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container > .pull-right,
    body[data-navbar="side"] #main > .record > .edit[data-sh-edit] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container > .pull-right { grid-row: 2; grid-column: 4; }
    body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]) > .modes,
    body[data-navbar="side"] #main:has(> .record > .detail[data-sh-detail]) .page-header-column-2,
    body[data-navbar="side"] #main > .record > .detail[data-sh-detail] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container > *,
    body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) > .modes,
    body[data-navbar="side"] #main:has(> .record > .edit[data-sh-edit]) .page-header-column-2,
    body[data-navbar="side"] #main > .record > .edit[data-sh-edit] > .detail-button-container:not(.hidden):not(.stick-sub) > .sub-container > * { padding-bottom: var(--12px); }
  }
}

/* ── 9b. Record header row (Plan/Board/Gantt list-based modes) ──────────────
   Same one-row header as section 9: title | tabs | Create-Task actions (where
   Edit sits in Detail mode) | Star/Follow, with a second row below for the
   "Group by" selector (left, under Create Task's own column) and total count
   / column settings / the "..." view-list menu (right, under Star/Follow's
   own column — where Detail's prev-next chevrons sit).

   .button-container.list-buttons-container IS display:contents here (each
   child becomes its own outer-grid item), same as section 9's
   detail-button-container. Earlier attempts to make it (or a wrapper spanning
   Create Task's and Star/Follow's columns together) into ONE real grid item
   kept fighting the browser's own column/row track-sizing in ways that
   either leaked width into row 1 as a gap, or mis-sized the columns enough
   for Create Task to visually overlap Star/Follow. Splitting Create
   Task/Group into their own outer column (3) and putting the trailing icons
   into Star/Follow's OWN column (4, on row 2, using fixed cumulative
   margin-right offsets since these are small, fixed-content icon buttons —
   not resizable text — so hardcoded widths are safe) sidesteps all of that:
   nothing spans multiple columns, so there's nothing for the browser to
   mis-distribute. Column 4 ends up sized by whichever of Star/Follow (row 1)
   or the icon trio (row 2) is wider — Star/Follow's ~162px comfortably fits
   every mode's icon trio (measured 77px for Plan/Board, 134px for Gantt's
   wider "Week" selector), so today that's always Star/Follow, and row 1
   keeps its normal width with no reserved-but-unused trailing space. */
@media screen and (min-width: 768px) {
  body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    column-gap: var(--8px);
    align-items: center;
  }
  body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container)::before {
    content: "";
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: stretch;
    margin: 0 calc(-1 * var(--sh-page-x));
    background-color: var(--panel-bg);
    border-bottom: 1px solid var(--panel-default-border);
    box-shadow: var(--sh-band-shadow);
  }
  body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container) > .page-header,
  body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container) > .page-header > .page-header-row,
  body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container) > .record,
  body[data-navbar="side"] #main > .record:has(> .button-container.list-buttons-container) > .button-container.list-buttons-container { display: contents; }
  body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container) > *,
  body[data-navbar="side"] #main > .record:has(> .button-container.list-buttons-container) > *,
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > * { grid-column: 1 / -1; min-width: 0; }

  body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container) .page-header-column-1 {
    grid-row: 1; grid-column: 1;
    z-index: 1;
    min-height: calc(var(--40px) + var(--24px)) !important;
    padding: var(--8px) var(--16px) var(--8px) 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
  }
  body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container) > .modes {
    grid-row: 1; grid-column: 2;
    z-index: 1;
    margin: 0 var(--8px) 0 0;
    padding: 0;
    float: none;
  }
  /* Create Task: .total-count + .btn-group in Plan/Board, .btn-group.pull-left in Gantt (which
     has no .total-count at all). Board's copy also carries an extra core .margin-right utility
     class (spacing meant for the "Group by" selector that used to sit right after it) — no
     longer needed now that selector is on the row below instead. */
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .total-count + .btn-group,
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .btn-group.pull-left {
    grid-row: 1; grid-column: 3;
    z-index: 1;
    float: none;
    margin-right: 0 !important;
  }
  /* Board's extra "Group by" selector — a separate sibling after Create Task, not present in
     Plan/Gantt — own row, aligned to the true left edge of the page (column 1, matching the
     title above and the board content below), not tucked under Create Task's own column. Its
     label text is capped so its rendered width is predictable — needed so the Label filter
     button below (only present when the project has task labels) can reliably sit right next
     to it via a fixed margin-left, without a wrapping element to lay them out as a real row. */
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .total-count + .btn-group + .btn-group {
    grid-row: 2; grid-column: 1;
    z-index: 1;
    justify-self: start;
    float: none;
  }
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .total-count + .btn-group + .btn-group > button > span:nth-child(2) {
    display: inline-block;
    max-width: var(--150px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
  /* Task-label filter (Catalyst\Modules\Project's Board extension) — only present when the
     project has labels defined. Sits right after the "Group by" selector above, same row. */
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .btn-group.catalyst-label-filter {
    grid-row: 2; grid-column: 1;
    z-index: 1;
    justify-self: start;
    margin-left: calc(var(--150px) + var(--32px) + var(--8px)) !important;   /* clears the Group selector's capped text + its icon/caret + a gap — !important: buttons.js sets an inline margin-left:8px on this element itself, which otherwise always wins */
    float: none;
  }
  body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container) .page-header-column-2 {
    grid-row: 1; grid-column: 4;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  /* count / column settings / the trailing "..." (or Gantt's Show-Span + scale-selector) menu:
     share Star/Follow's own column (row 2, same column 4) instead of reserving separate columns
     of their own — right-aligned via justify-self, differentiated with fixed cumulative
     margin-right offsets since pull-right/settings-container are small, consistently-sized icon
     buttons (unlike text buttons, safe to hardcode). */
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .pull-right:not(.total-count):not(.settings-container) {
    grid-row: 2; grid-column: 4;
    z-index: 1;
    justify-self: end;
    float: none;
  }
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .settings-container {
    grid-row: 2; grid-column: 4;
    z-index: 1;
    justify-self: end;
    margin-right: calc(var(--34px) + var(--2px)) !important;   /* clears the pull-right icon (~34px) + its gap */
    float: none;
  }
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .total-count {
    grid-row: 2; grid-column: 4;
    z-index: 1;
    justify-self: end;
    margin-right: calc(var(--34px) + var(--2px) + var(--30px) + var(--2px)) !important;   /* clears settings-container (~30px) too */
    float: none;
  }

  /* ≤1100: title on its own line, controls on a second line, left-aligned */
  @media (max-width: 1100px) {
    body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container) { grid-template-columns: auto auto auto minmax(0, 1fr); }
    body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container)::before { grid-row: 1 / 3; }
    body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container) .page-header-column-1 { grid-column: 1 / -1; padding-right: 0 !important; }
    body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container) > .modes { grid-row: 2; grid-column: 1; }
    body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .total-count + .btn-group,
    body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .btn-group.pull-left { grid-row: 2; grid-column: 2; }
    body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .total-count + .btn-group + .btn-group { grid-row: 3; grid-column: 1 / 3; justify-self: start; }
    body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container) .page-header-column-2 { grid-row: 2; grid-column: 3; }
    body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .pull-right:not(.total-count):not(.settings-container),
    body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .settings-container,
    body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .total-count { grid-row: 3; grid-column: 3 / -1; }
    body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container) > .modes,
    body[data-navbar="side"] #main:has(> .record > .button-container.list-buttons-container) .page-header-column-2 { padding-bottom: var(--12px); }
  }
}

/* Create Task/Group/trailing icons: same 32-tall, 13px sizing as Detail mode's Edit/"..." buttons
   — core's own default button sizing otherwise leaves this row noticeably taller. */
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container .btn {
  min-width: 0;
  height: var(--sh-control-h);
  padding: 0 var(--12px);
  display: inline-flex;
  align-items: center;
  font-size: var(--13px);
  line-height: 1;
}
/* Icon-only toggles get squared to sh-control-h; text-bearing dropdowns (Group, task-label
   filter, Gantt's "Week" scale selector) are addressed individually instead of blacklisted here —
   every new text-bearing dropdown that showed up (Group, then Labels) had to be added to a
   growing :not() list, so a whitelist of the known icon-only ones is the safer, forward-looking
   approach. */
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .total-count + .btn-group > .dropdown-toggle,
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .btn-group.pull-left > .dropdown-toggle,
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .settings-container .dropdown-toggle,
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .pull-right:not(.total-count):not(.settings-container) > .dropdown-toggle:not(.btn-wide),
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container .btn.btn-icon {
  width: var(--sh-control-h);
  padding: 0;
  justify-content: center;
}

/* Create Task: same navy accent as the header "Create X" buttons (Opportunity, Agreement, etc). */
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container [data-action="createTask"] {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: #fff;
}
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container [data-action="createTask"]:hover {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-border);
  color: #fff;
}
/* its attached "..." dropdown-toggle: same navy family instead of core's plain white btn-default. */
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container [data-action="createTask"] + .dropdown-toggle {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-border);
  color: #fff;
}
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container [data-action="createTask"] + .dropdown-toggle:hover,
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container [data-action="createTask"] + .dropdown-toggle:focus,
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container [data-action="createTask"] + .dropdown-toggle:active {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: #fff;
}


/* view-mode switch: segmented control, 32 tall */
body[data-navbar="side"] #main > .modes > .button-container { padding: 0; margin: 0; }
body[data-navbar="side"] #main > .modes .btn-group {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  height: var(--sh-control-h);
  border-radius: var(--border-radius);
  background-color: var(--select-item-bg);   /* --body-bg resolves near-white in this theme, invisible against the white record-header band */
}
body[data-navbar="side"] #main > .modes .btn-group > .btn[data-action="switchMode"] {
  min-width: 0;
  height: calc(var(--sh-control-h) - 4px);
  padding: 0 var(--12px);
  display: inline-flex;
  align-items: center;
  float: none;
  margin: 0;
  border: 0;
  border-radius: calc(var(--border-radius) - 1px);
  background: transparent;
  box-shadow: none;
  color: var(--text-gray-color);
  font-size: var(--13px);
  line-height: 1;
}
body[data-navbar="side"] #main > .modes .btn-group > .btn[data-action="switchMode"]:hover { color: var(--text-color); }
body[data-navbar="side"] #main > .modes .btn-group > .btn[data-action="switchMode"].active {
  background-color: var(--panel-bg);
  color: var(--text-color);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
/* core's own .btn-group > .btn-text.active::after underline (grey, offset via transform) still
   draws under the pill above. */
body[data-navbar="side"] #main > .modes .btn-group > .btn[data-action="switchMode"].active::after { content: none !important; }

/* record buttons in the band: 32 tall, 13px; icon buttons 32 square */
body[data-navbar="side"] #main > .record > .detail[data-sh-detail] > .detail-button-container .btn,
body[data-navbar="side"] #main > .record > .edit[data-sh-edit] > .detail-button-container .btn {
  min-width: 0;
  height: var(--sh-control-h);
  padding: 0 var(--12px);
  display: inline-flex;
  align-items: center;
  font-size: var(--13px);
  line-height: 1;
}
body[data-navbar="side"] #main > .record > .detail[data-sh-detail] > .detail-button-container .btn.dropdown-toggle,
body[data-navbar="side"] #main > .record > .detail[data-sh-detail] > .detail-button-container .btn.btn-icon,
body[data-navbar="side"] #main > .record > .edit[data-sh-edit] > .detail-button-container .btn.dropdown-toggle,
body[data-navbar="side"] #main > .record > .edit[data-sh-edit] > .detail-button-container .btn.btn-icon {
  width: var(--sh-control-h);
  padding: 0;
  justify-content: center;
}


/* ── 10. Key-fields strip (detail pages) ─────────────────────────── [JS] ──
   .sh-key-fields > .sh-key-group > .cell.sh-key-field (label + .field)     */

body[data-navbar="side"] #main .record > .detail > .sh-key-fields {
  clear: both;
  margin: 0 calc(-1 * var(--sh-page-x));
  padding: var(--10px) var(--sh-page-x) var(--12px);
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--10px);
  background-color: var(--panel-bg);
  border-top: 1px solid var(--default-border-color);
  border-bottom: 1px solid var(--panel-default-border);
  box-shadow: var(--sh-band-shadow);
  /* lets .sh-key-group below size its padding/gap off THIS element's own
     measured width (cqw), not the viewport - correct when a side panel or
     the minimized rail changes the strip's width without resizing the window. */
  container-type: inline-size;
}
.sh-key-fields > .sh-key-group {
  display: flex;
  flex-wrap: wrap;
  /* was a fixed var(--20px)/var(--40px) - clamp() lets these actually
     narrow under width pressure instead of only the field text shrinking,
     and roomier than the old fixed values once there's width to spare. */
  --sh-key-group-pad: clamp(var(--8px), 2.2cqw, var(--24px));
  gap: var(--10px) clamp(var(--12px), 3.6cqw, var(--48px));
  padding: 0 var(--sh-key-group-pad);
  border-left: 1px solid var(--default-border-color);
}
/* .sh-row-start: the group starting each flex-wrap row, kept in sync by [JS] updateRowStarts().
   Shifted via transform rather than zeroing padding/border: changing this group's own box width
   fed back into whether IT wraps, so right at the exact viewport width a row breaks at, the
   browser oscillated between wrapped (gets the class, shrinks, fits back onto the row above,
   loses the class, widens, wraps again...) forever - a ResizeObserver loop. transform repositions
   the paint only, leaving the layout box (and offsetTop, which updateRowStarts() reads) untouched. */
.sh-key-fields > .sh-key-group.sh-row-start {
  border-left-color: transparent;
  transform: translateX(calc(-1 * (var(--sh-key-group-pad) + 1px)));
}
.sh-key-fields .sh-key-field {
  flex: 0 1 auto;
  width: auto;
  /* flex items default to a content-based min-width, which pins a long
     value to its full natural width forever - 0 lets it shrink/ellipsize
     on narrow viewports instead, same as main-content-area fields. */
  min-width: 0;
  margin: 0;
  padding: 0;
  float: none;
  white-space: nowrap;
}
.sh-key-fields .sh-key-field > .control-label {
  display: block;
  margin: 0 0 var(--2px);
  padding: 0;
  font-size: var(--13px);
  font-weight: 400;
  line-height: var(--18px);
  color: var(--text-muted-color);
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh-key-fields .sh-key-field > .field { font-size: var(--14px); line-height: var(--22px); min-height: var(--22px); overflow: hidden; text-overflow: ellipsis; }


/* ── 11. Record body ─────────────────────────────────────────────────────── */

body[data-navbar="side"] #main .record > .detail > .record-grid,
body[data-navbar="side"] #main .record > .edit > .record-grid {
  clear: both;
  margin-top: var(--sh-page-y);
  grid-template-columns: minmax(0, 1fr) var(--sh-side-col);
  column-gap: var(--16px);
}
@media screen and (max-width: 1100px) {
  body[data-navbar="side"] #main .record > .detail > .record-grid,
  body[data-navbar="side"] #main .record > .edit > .record-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-navbar="side"] #main .record > .detail > .record-grid > .side,
  body[data-navbar="side"] #main .record > .edit > .record-grid > .side {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--300px), 1fr));
    gap: 0 var(--16px);
  }
}

/* middle tabs (multi-section forms, e.g. Preferences/Settings): core sets no gap
   before the first panel at all, tabs and content sit flush against each other */
.record .middle-tabs { margin-bottom: var(--vertical-gap); }

/* detail-mode panels: each row keeps the layout metadata's own column count —
   core's col-sm-* / col-md-* cell classes (already sized per-row by record.tpl,
   e.g. col-sm-4 for a 3-cell row) become 12-unit grid spans instead of
   Bootstrap's float grid, so a 3-cell row renders as 3 columns, a 2-cell row
   as 2, etc. Stacked to 1 column below 768px, sm/md breakpoints above that. */
.record .detail .middle > .panel > .panel-body-form {
  display: flex;
  flex-direction: column;
  gap: var(--12px);
  padding: var(--panel-padding);
}
.record .detail .middle > .panel > .panel-body-form > .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--12px) var(--24px);
  /* .row is a real box now (no longer display:contents), so Bootstrap's own
     -8px left/right margin (half --grid-gutter-width) needs cancelling or it
     eats into panel-body-form's own left/right padding. */
  margin: 0;
}
.record .detail .middle > .panel > .panel-body-form::before,
.record .detail .middle > .panel > .panel-body-form::after,
.record .detail .middle > .panel > .panel-body-form > .row::before,
.record .detail .middle > .panel > .panel-body-form > .row::after { content: none; }
.record .detail .middle > .panel > .panel-body-form > .row > * { width: auto; float: none; margin: 0; padding: 0; min-width: 0; }
.record .detail .middle > .panel > .panel-body-form > .row > .cell.hidden-cell,
.record .detail .middle > .panel > .panel-body-form > .row > .cell.hidden { display: none; }
@media screen and (min-width: 768px) {
  .record .detail .middle > .panel > .panel-body-form > .row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .record .detail .middle > .panel > .panel-body-form > .row > .col-sm-12 { grid-column: span 12; }
  .record .detail .middle > .panel > .panel-body-form > .row > .col-sm-9  { grid-column: span 9; }
  .record .detail .middle > .panel > .panel-body-form > .row > .col-sm-8  { grid-column: span 8; }
  .record .detail .middle > .panel > .panel-body-form > .row > .col-sm-6  { grid-column: span 6; }
  .record .detail .middle > .panel > .panel-body-form > .row > .col-sm-4  { grid-column: span 4; }
}
@media screen and (min-width: 992px) {
  /* columnCount===4 rows: col-md-3 col-sm-6 -> 2/row until 992px, 4/row (span 3) at md+ */
  .record .detail .middle > .panel > .panel-body-form > .row > .col-md-3 { grid-column: span 3; }
}


/* bottom tabs (Updates / Support / Projects…) as underline tabs */
.record .bottom > .tabs.btn-group {
  display: flex;
  gap: var(--24px);
  float: none;
  margin-bottom: var(--16px);
  padding: 0 var(--4px);
  border-bottom: 1px solid var(--default-border-color);
}
.record .bottom > .tabs.btn-group > .btn[data-tab] {
  float: none;
  margin: 0 0 -1px;
  padding: var(--8px) 2px;
  border: 0 !important;
  border-radius: 0 !important;
  background: none;
  /* box-shadow, not border-bottom: some core .btn rule (e.g. .btn:has(+ .btn-text))
     keeps winning the border-bottom-width cascade despite !important; box-shadow is a
     single property core doesn't touch here, so it can't lose the same way. */
  box-shadow: none !important;
  color: var(--text-gray-color);
}
.record .bottom > .tabs.btn-group > .btn[data-tab].active {
  box-shadow: inset 0 -2px 0 0 var(--sh-rail-bg) !important;
  color: var(--text-color);
  font-weight: 500;
}
/* core's own .btn-group > .btn-text.active::after underline (grey, offset via transform)
   otherwise draws a second indicator under the box-shadow one above. */
.record .bottom > .tabs.btn-group > .btn[data-tab].active::after { content: none !important; }


/* ── 12. List pages ─────────────────────────────────────────────────────────
   Title | search | view-mode toggle | pagination | Create all on one row,
   CSS only: #main becomes a 5-column grid, the header's two columns, the
   search row's two form-groups (search fields, list/kanban toggle) and
   .list-buttons-container (actions + pagination) are placed on row 1, a
   ::before draws the white band behind them, advanced filters get their own
   row 2, and the list/kanban board content sits in row 3.                 */

body[data-navbar="side"] #main:has(> .page-header + .search-container) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  column-gap: var(--24px);
  align-items: center;
}
body[data-navbar="side"] #main:has(> .page-header + .search-container)::before {
  content: "";
  grid-row: 1;
  grid-column: 1 / -1;
  align-self: stretch;
  margin: 0 calc(-1 * var(--sh-page-x));
  background-color: var(--panel-bg);
  border-bottom: 1px solid var(--panel-default-border);
  box-shadow: var(--sh-band-shadow);
}
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .page-header,
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .page-header > .page-header-row,
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .search-container,
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .search-container > .search-row,
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .list-container { display: contents; }
body[data-navbar="side"] #main:has(> .page-header + .search-container) > * { grid-column: 1 / -1; min-width: 0; }
body[data-navbar="side"] #main:has(> .page-header + .search-container) .page-header-column-1 {
  grid-row: 1; grid-column: 1;
  z-index: 2;   /* above the table's sticky thead (z-index: 1), so its dropdowns aren't covered by it */
  flex: none;   /* the generic page-header rule's flex-basis:26rem/flex-grow:1 otherwise inflates this "auto" grid track */
  min-height: calc(var(--40px) + var(--24px)) !important;   /* core sets min-height: unset !important */
  display: flex;
  align-items: center;
}
body[data-navbar="side"] #main:has(> .page-header + .search-container) .page-header-column-2 {
  grid-row: 1; grid-column: 5;
  z-index: 2;
}
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .search-container > .search-row > .form-group:first-child {
  grid-row: 1; grid-column: 2;
  z-index: 2;
  width: 100%;
  max-width: var(--400px);
  padding: var(--16px) 0;
}
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .search-container > .search-row > .form-group:has(.view-mode-switcher-buttons-group) {
  grid-row: 1; grid-column: 3;   /* list/kanban toggle: same row as the rest of the header, its own column so it lands at the right, not right after the search box */
  z-index: 2;
}
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .search-container > .advanced-filters {
  grid-row: 2; grid-column: 1 / -1;   /* explicit: unplaced, its own width otherwise inflates column 1's "auto" track */
}
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .search-container > .advanced-filters-apply-container {
  /* its own row: sharing row 2 with .advanced-filters put it directly under the filter widgets —
     a positioned descendant of .advanced-filters (e.g. an open enum dropdown) always paints above
     a static sibling regardless of DOM order, so the button was there but never visible/clickable */
  grid-row: 3; grid-column: 1 / -1;
  margin-top: var(--10px);
}
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .list-container > .list-buttons-container {
  grid-row: 1; grid-column: 4;
  z-index: 2;
  margin: 0;
}
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .list-container > .list,
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .list-container > .list-kanban-container {
  grid-row: 4; grid-column: 1 / -1;   /* explicit: unplaced, its own width otherwise inflates column 1's "auto" track. list-kanban-container replaces .list in kanban view mode */
  margin-top: var(--16px);
}

/* Categories-enabled lists (views/list-with-categories, e.g. Reports/Projects) nest .list-container
   two levels deeper (.row > .list-main-column > .list-container, alongside a .list-categories-column
   sibling the category dropdown already hides) instead of as a direct #main child — same unwrap/
   placement as above, just for that deeper path, so pagination still lands in the header row. */
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .row,
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .row > .list-main-column,
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .row > .list-main-column > .list-container { display: contents; }
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .row > .list-main-column > .list-container > .list-buttons-container {
  grid-row: 1; grid-column: 4;
  z-index: 2;
  margin: 0;
}
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .row > .list-main-column > .list-container > .list,
body[data-navbar="side"] #main:has(> .page-header + .search-container) > .row > .list-main-column > .list-container > .list-kanban-container {
  grid-row: 4; grid-column: 1 / -1;
  margin-top: var(--16px);
}

body[data-navbar="side"] #main > .search-container .search-row {
  margin: 0;
}
body[data-navbar="side"] #main > .search-container .search-row::before,
body[data-navbar="side"] #main > .search-container .search-row::after { content: none; }
body[data-navbar="side"] #main > .search-container .search-row > .form-group {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}
body[data-navbar="side"] #main > .search-container .search-row > .form-group:first-child { min-width: 0; }
body[data-navbar="side"] #main > .search-container .search-row > .form-group:not(:first-child):not(:has(*)) { display: none; }
body[data-navbar="side"] #main > .search-container .search-row .input-group { display: flex; width: 100%; }
body[data-navbar="side"] #main > .search-container .search-row .input-group > .input-group-btn { display: flex; width: auto; font-size: inherit; }
body[data-navbar="side"] #main > .search-container .search-row .input-group > .form-control { flex: 1 1 auto; min-width: 0; width: auto; }
body[data-navbar="side"] #main > .search-container .search-row .input-group .btn,
body[data-navbar="side"] #main > .search-container .search-row .input-group .form-control {
  height: var(--sh-control-h);
  min-height: var(--sh-control-h);          /* core input.form-control min-height is 36 */
  font-size: var(--13px);
}
body[data-navbar="side"] #main > .search-container .search-row .input-group .btn { display: inline-flex; align-items: center; justify-content: center; }
body[data-navbar="side"] #main > .search-container .search-row .input-group .form-control { font-size: var(--14px); }
body[data-navbar="side"] #main > .search-container .advanced-filters:has(*) { margin-top: var(--10px); }
body[data-navbar="side"] #main > .search-container .view-mode-switcher-buttons-group { display: flex; height: var(--sh-control-h); }
body[data-navbar="side"] #main > .search-container .view-mode-switcher-buttons-group .btn { height: var(--sh-control-h); display: inline-flex; align-items: center; justify-content: center; }

/* ── 12b. List search box: one joined pill ──────────────────────────────────
   [ All ▾ | text …………………………… | 🔍 ]  ⋮  ×
   Preset, text input and search button form one bordered pill filled with the body grey; the
   add-filter/reset icons sit detached to the right with no fill or border. */
body[data-navbar="side"] #main > .search-container .search-row .input-group {
  --sh-search-bg: var(--select-item-bg);   /* --body-bg resolves near-white in this theme; --select-item-bg is core's own token for grouped-input fills */
  --sh-search-border: var(--btn-default-border);
  --sh-search-hover-bg: var(--btn-default-active-bg);
  border-radius: var(--border-radius);
  transition: box-shadow 150ms ease-in-out;
}
body[data-navbar="side"] #main > .search-container .search-row .input-group > .left-dropdown > .filters-button,
body[data-navbar="side"] #main > .search-container .search-row .input-group > .form-control.text-filter,
body[data-navbar="side"] #main > .search-container .search-row .input-group > .input-group-btn > .btn.search {
  background-color: var(--sh-search-bg);
  border: 1px solid var(--sh-search-border);
  box-shadow: none;
  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
}
body[data-navbar="side"] #main > .search-container .search-row .input-group > .left-dropdown > .filters-button {
  gap: var(--5px);
  padding: 0 var(--10px);
  border-right: 0;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  color: var(--text-color);
  white-space: nowrap;
}
body[data-navbar="side"] #main > .search-container .search-row .input-group > .left-dropdown > .filters-button .caret { margin-left: 0; }
body[data-navbar="side"] #main > .search-container .search-row .input-group > .form-control.text-filter {
  padding: 0 var(--10px);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  color: var(--input-color);
}
body[data-navbar="side"] #main > .search-container .search-row .input-group > .form-control.text-filter::placeholder { color: var(--text-muted-color); opacity: 1; }
body[data-navbar="side"] #main > .search-container .search-row .input-group > .form-control.text-filter:focus { box-shadow: none; outline: 0; }
body[data-navbar="side"] #main > .search-container .search-row .input-group > .input-group-btn > .btn.search {
  width: var(--40px);
  padding: 0;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  color: var(--text-gray-color);
  font-size: var(--14px);
}
body[data-navbar="side"] #main > .search-container .search-row .input-group > .left-dropdown > .filters-button:hover,
body[data-navbar="side"] #main > .search-container .search-row .input-group > .left-dropdown.open > .filters-button,
body[data-navbar="side"] #main > .search-container .search-row .input-group > .input-group-btn > .btn.search:hover {
  background-color: var(--sh-search-hover-bg);
  color: var(--text-color);
}
body[data-navbar="side"] #main > .search-container .search-row .input-group > .left-dropdown > .filters-button:active,
body[data-navbar="side"] #main > .search-container .search-row .input-group > .input-group-btn > .btn.search:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
body[data-navbar="side"] #main > .search-container .search-row .input-group:has(> .form-control.text-filter:focus) > .left-dropdown > .filters-button,
body[data-navbar="side"] #main > .search-container .search-row .input-group:has(> .form-control.text-filter:focus) > .form-control.text-filter,
body[data-navbar="side"] #main > .search-container .search-row .input-group:has(> .form-control.text-filter:focus) > .input-group-btn > .btn.search {
  border-color: #66afe9;
  box-shadow: 0 0 8px rgba(102, 175, 233, .6);   /* on the pill segments, not the whole .input-group — that also wraps the detached ⋮/× icons */
}
body[data-navbar="side"] #main > .search-container .search-row .input-group .btn:focus-visible {
  outline: 0;
  position: relative;
  z-index: 2;
  border-color: #66afe9;
  box-shadow: 0 0 8px rgba(102, 175, 233, .6);
}
body[data-navbar="side"] #main > .search-container .search-row .input-group > .input-group-btn:has(> .add-filter-button) {
  margin-left: var(--8px);
  gap: var(--2px);
}
body[data-navbar="side"] #main > .search-container .search-row .input-group > .input-group-btn > .btn.btn-text {
  width: var(--30px);
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  box-shadow: none;
  color: var(--text-gray-color);
  font-size: var(--14px);
}
body[data-navbar="side"] #main > .search-container .search-row .input-group > .input-group-btn > .btn.btn-text:hover,
body[data-navbar="side"] #main > .search-container .search-row .input-group > .input-group-btn.open > .btn.add-filter-button {
  background-color: var(--body-bg);
  color: var(--text-color);
}

/* Create button: dark-blue accent, matching the rail (--btn-primary-* tokens
   already defined at the top of this file for the same navy palette). */
body[data-navbar="side"] #main > .page-header .header-buttons .btn[data-action="create"] {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: #fff;
}
body[data-navbar="side"] #main > .page-header .header-buttons .btn[data-action="create"]:hover {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-border);
  color: #fff;
}
/* The "..." dropdown-toggle sitting right against Create defaults to core's plain white
   btn-default, which reads as a jarring cutout against the navy Create button — bring it into
   the same navy family instead. */
body[data-navbar="side"] #main > .page-header .header-buttons > .btn[data-action="create"] + .btn-group > .dropdown-toggle {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-border);
  color: #fff;
}
body[data-navbar="side"] #main > .page-header .header-buttons > .btn[data-action="create"] + .btn-group > .dropdown-toggle:hover,
body[data-navbar="side"] #main > .page-header .header-buttons > .btn[data-action="create"] + .btn-group > .dropdown-toggle:focus,
body[data-navbar="side"] #main > .page-header .header-buttons > .btn[data-action="create"] + .btn-group > .dropdown-toggle:active {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: #fff;
}

/* actions + pagination: moved into the header row (see section 12 above). :is() covers both the
   plain list.tpl shape (.list-container a direct #main child) and the deeper categories-enabled
   list-with-categories.tpl shape (.row > .list-main-column > .list-container). */
:is(body[data-navbar="side"] #main > .list-container, body[data-navbar="side"] #main > .row > .list-main-column > .list-container) > .list-buttons-container {
  min-height: var(--sh-control-h);
  display: flex;
  align-items: center;
  gap: var(--2px);
}
:is(body[data-navbar="side"] #main > .list-container, body[data-navbar="side"] #main > .row > .list-main-column > .list-container) > .list-buttons-container::before,
:is(body[data-navbar="side"] #main > .list-container, body[data-navbar="side"] #main > .row > .list-main-column > .list-container) > .list-buttons-container::after { content: none; }
:is(body[data-navbar="side"] #main > .list-container, body[data-navbar="side"] #main > .row > .list-main-column > .list-container) > .list-buttons-container > .btn-group { float: none; }
:is(body[data-navbar="side"] #main > .list-container, body[data-navbar="side"] #main > .row > .list-main-column > .list-container) > .list-buttons-container > .actions { min-height: 0; }
:is(body[data-navbar="side"] #main > .list-container, body[data-navbar="side"] #main > .row > .list-main-column > .list-container) > .list-buttons-container > .actions:has(> .actions-button.hidden) { display: none; }   /* no rows selected: still counted a flex gap either side, pushing the caret away from the page range */
:is(body[data-navbar="side"] #main > .list-container, body[data-navbar="side"] #main > .row > .list-main-column > .list-container) > .list-buttons-container > .pagination { display: flex; align-items: center; }
:is(body[data-navbar="side"] #main > .list-container, body[data-navbar="side"] #main > .row > .list-main-column > .list-container) > .list-buttons-container > .settings-container { order: -1; }   /* column-settings caret sits before the page range, not after the chevrons */
:is(body[data-navbar="side"] #main > .list-container, body[data-navbar="side"] #main > .row > .list-main-column > .list-container) > .list-buttons-container .btn { height: var(--sh-control-h); display: inline-flex; align-items: center; font-size: var(--13px); }
:is(body[data-navbar="side"] #main > .list-container, body[data-navbar="side"] #main > .row > .list-main-column > .list-container) > .list-buttons-container .pagination-btn-middle { font-size: var(--14px); }
:is(body[data-navbar="side"] #main > .list-container, body[data-navbar="side"] #main > .row > .list-main-column > .list-container) > .list-buttons-container .pagination-btn.btn-icon { width: var(--24px); min-width: var(--24px); }   /* core's default icon-button min-width leaves the chevrons looking far apart */
:is(body[data-navbar="side"] #main > .list-container, body[data-navbar="side"] #main > .row > .list-main-column > .list-container) > .list-buttons-container .settings-container .caret { border-width: 5px 5px 0; }

/* Core only gives .list its boxed/bordered/rounded look once the WINDOW itself is wide
   enough (1672px unminimized / 1490px minimized in light.css) — thresholds sized for
   core's own, much wider default rail. CatAwesome's narrower --navbar-width leaves plenty
   of room for this look well below that, so it's applied unconditionally instead. */
@media screen and (min-width: 768px) {
  :is(body[data-navbar="side"] #content #main > .list-container, body[data-navbar="side"] #content #main .nested-categories-container + .list-container, body[data-navbar="side"] #content #main > .row > .list-main-column > .list-container) > .list {
    margin-left: 0;
    margin-right: 0;
    border-left-width: var(--panel-border-width);
    border-right-width: var(--panel-border-width);
    border-radius: var(--panel-border-radius);
    /* border-collapse on the table defeats the th:first/last-child border-radius below core
       relies on, so the sticky header's own opaque background squares off the corner it
       sits over unless .list itself clips it to the rounded shape. `clip` (not `hidden`):
       `overflow: hidden` makes .list itself the sticky header's scrolling ancestor (it never
       actually scrolls), which freezes the header at its start position instead of pinning it
       to the viewport — `clip` clips the same way without establishing a scroll container. */
    overflow: clip;
  }
}

/* table */
.list > table.table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--panel-bg);
  font-size: var(--13px);
}
/* Core's own .list-sticky-bar (the floating actions/pagination bar, z-index 1000) fixes
   itself to top:0 once you scroll past it, sitting directly on top of this table's own
   sticky column-header row (also top:0, z-index 1) and almost entirely covering it. Push
   the column header down to sit below the floating bar whenever it's actually showing. */
.list-container:has(> .sticked-bar.list-sticky-bar:not(.hidden)) > .list > table.table > thead > tr > th {
  top: var(--sh-list-sticky-bar-h);
}
/* core rounds these via td/th:first/last-child, but only when the table is a .panel's direct
   child (not the case for a plain list page) — the sticky header's opaque background above
   otherwise squares off what would already be a rounded .list/table corner underneath. */
.list > table.table > thead > tr > th:first-child { border-top-left-radius: var(--panel-border-radius); }
.list > table.table > thead > tr > th:last-child { border-top-right-radius: var(--panel-border-radius); }
.list > table.table > thead > tr > th,
.list > table.table > tbody > tr > td { padding: var(--6px) var(--8px); }
.list > table td.cell[data-name="hours"],
.list > table td.cell[data-name="totalTimesheetHours"],
.list > table td.cell[data-name="remainingHours"],
.list > table td.cell[data-name="quotedNetAmountConverted"] { font-variant-numeric: tabular-nums; }

/* [JS] column dropping from clientDefs listColumnPriority (README Scope 6) */
.list[data-sh-hide="2"] [data-sh-priority="2"],
.list[data-sh-hide="3"] [data-sh-priority="2"],
.list[data-sh-hide="3"] [data-sh-priority="3"] { display: none; }
/* [JS] ellipsis on fields named in clientDefs listTruncateFields */
.list td.cell[data-sh-truncate] > * {
  display: inline-block;
  max-width: var(--300px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* ===========================================================================
   CATAWESOME — Section 13: category dropdown

   Ported from handoff-categories/sh-categories.css as-is. Replaces core's
   collapsed folder-grid / expanded tree-column list-category UI (any entity
   with categories enabled) with a dropdown on the list title — see
   Catalyst:handlers/list/category-dropdown for the JS side.
   =========================================================================== */

/* Core's two category modes are replaced by the title dropdown */
#main .list-categories-column,
#main .nested-categories-container { display: none; }
#main .list-categories-column + .list-main-column { width: 100%; }

/* The title cell */
#main .page-header h3.header-title.sh-cat-on > .header-breadcrumbs { display: none; }

.sh-cat {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--4px);
  min-width: 0;
}

/* C1 trigger */
.sh-cat-trigger {
  display: flex;
  align-items: center;
  gap: var(--8px);
  min-width: 0;
  height: var(--36px);
  margin-left: calc(var(--8px) * -1);
  padding: 0 var(--8px);
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--text-color);
  font: inherit;               /* keeps the existing list title size and weight */
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease-in-out;
}
.sh-cat-trigger:hover,
.sh-cat.sh-open > .sh-cat-trigger { background-color: var(--body-bg); }
.sh-cat-trigger:focus-visible,
.sh-cat-more:focus-visible {
  outline: 0;
  border-color: #66afe9;
  box-shadow: 0 0 8px rgba(102, 175, 233, .6);
}
.sh-cat-root { flex: 0 0 auto; }
.sh-cat-current { min-width: 0; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.sh-cat-sep { font-size: var(--10px); color: var(--text-muted-color); }
.sh-cat-caret { font-size: var(--13px); color: var(--text-gray-color); }

/* C2 ... button */
.sh-cat-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--30px);
  height: var(--30px);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--text-gray-color);
  font-size: var(--14px);
  cursor: pointer;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
}
.sh-cat-more:hover,
.sh-cat-actions.open > .sh-cat-more { background-color: var(--body-bg); color: var(--text-color); }
.sh-cat-actions > .sh-cat-actions-menu { top: calc(100% + var(--4px)); left: 0; right: auto; min-width: 210px; }

/* C3 popover */
.sh-cat-pop {
  position: absolute;
  z-index: 1050;
  top: calc(var(--36px) + var(--6px));
  left: calc(var(--8px) * -1);
  width: 300px;
  max-height: min(440px, calc(100vh - 140px));
  overflow-y: auto;
  padding: var(--6px) 0;
  box-sizing: border-box;
  background-color: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
  font-size: var(--14px);
  font-weight: 400;
  line-height: var(--20px);
}
.sh-cat-pop[hidden] { display: none; }
.sh-cat-pop-head { padding: var(--4px) var(--16px) var(--6px); font-size: var(--13px); color: var(--text-muted-color); }
.sh-cat-tree { list-style: none; margin: 0; padding: 0; }

/* C4 rows */
.sh-cat-row {
  display: flex;
  align-items: center;
  gap: var(--6px);
  height: var(--30px);
  margin: 0 var(--6px);
  padding: 0 var(--10px) 0 calc(var(--4px) + var(--sh-cat-depth, 0) * var(--18px));
  border-radius: var(--border-radius);
  color: var(--text-color);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 150ms ease-in-out;
}
.sh-cat-row:hover { background-color: var(--table-bg-accent); }
.sh-cat-row.sh-selected { background-color: var(--body-bg); font-weight: 500; }
.sh-cat-row:focus { outline: 0; }
.sh-cat-row:focus-visible { box-shadow: inset 0 0 0 1px #66afe9, 0 0 8px rgba(102, 175, 233, .6); }
.sh-cat-twisty {
  flex: 0 0 var(--16px);
  width: var(--16px);
  height: var(--22px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--4px);
  color: var(--text-muted-color);
  font-size: var(--9px);
}
.sh-cat-twisty:hover { color: var(--text-color); }
.sh-cat-icon { flex: 0 0 var(--16px); width: var(--16px); text-align: center; font-size: var(--13px); color: var(--text-gray-color); }
.sh-cat-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* =============================================================================
   STAFF HUB REFRESH: PHONE WIDTHS (< 768px)
   Ported from handoff-mobile/sh-mobile.css after the refresh and categories.
  P1-P10 follow SPEC.md; [JS] rules use Catalyst:catalyst-mobile.
   Desktop only hides newly injected phone controls. All other changes are phone-only.
   ============================================================================= */

@media screen and (min-width: 768px) {
  #main .sh-m-actions,
  #navbar > .navbar .sh-m-tools,
  #navbar > .navbar .sh-m-searchbar { display: none; }
}

@media screen and (max-width: 767px) {
  :root {
    --sh-page-x: var(--12px);
    --sh-m-bar-h: calc(var(--50px) + var(--2px));
    --sh-m-hit: 44px;                           /* core has no --44px token */
    --sh-m-foot-h: calc(44px + var(--20px) + 1px);
    --sh-control-h: 44px;
  }

  /* Use P6's 12px gutter, not core's mobile Bootstrap container padding. */
  body[data-navbar="side"] > #content { padding-left: var(--sh-page-x); padding-right: var(--sh-page-x); }

  /* P1: keep the 52px bar visible; core's side navbar is not fixed on phones. */
  body[data-navbar="side"] > #header { position: sticky; top: 0; z-index: 1030; }
  body[data-navbar="side"] #navbar > .navbar {
    min-height: var(--sh-m-bar-h);
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--sh-rail-bg);
  }
  body[data-navbar="side"] #navbar > .navbar > .navbar-header {
    float: none;
    margin: 0;
    height: var(--sh-m-bar-h);
    padding: 0 var(--4px) 0 var(--10px);
    display: flex;
    align-items: center;
    gap: var(--2px);
  }
  body[data-navbar="side"] #navbar > .navbar > .navbar-header::before,
  body[data-navbar="side"] #navbar > .navbar > .navbar-header::after { content: none; }
  body[data-navbar="side"] #navbar > .navbar .navbar-logo-container { order: 0; display: block; }
  body[data-navbar="side"] #navbar > .navbar .navbar-logo-container > a.navbar-brand {
    float: none;
    height: var(--40px) !important;            /* core: var(--navbar-height) !important below 768 */
    margin: 0;
    padding: 0 var(--4px);
    display: flex;
    align-items: center;
    border-radius: var(--border-radius);
  }
  body[data-navbar="side"] #navbar > .navbar .navbar-logo-container img.logo {
    height: var(--24px) !important;            /* core: var(--navbar-height) !important below 768 */
    width: auto;
    margin-top: 0;
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-m-tools {
    order: 1;
    float: none;
    margin: 0 0 0 auto;
    padding: 0;
    display: flex;
    gap: var(--2px);
    list-style: none;
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-m-tools::before,
  body[data-navbar="side"] #navbar > .navbar ul.sh-m-tools::after { content: none; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-m-tools > li {
    float: none;
    position: relative;
    top: auto;
    right: auto;
    display: block;
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-m-tools > li > a {
    width: var(--sh-m-hit);
    height: var(--sh-m-hit);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    background-color: transparent;
    color: var(--sh-rail-text);
    font-size: var(--16px);
    cursor: pointer;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-m-tools > li > a:hover,
  body[data-navbar="side"] #navbar > .navbar ul.sh-m-tools > li.open > a,
  body[data-navbar="side"] #navbar > .navbar.sh-m-search-open ul.sh-m-tools a.sh-m-search-btn {
    background-color: var(--sh-rail-hover);
    color: var(--sh-rail-text-strong);
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-m-tools .sh-label { display: none; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-m-tools > li > a > .fas,
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li > a > .fas { color: inherit; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-m-tools .notifications-button > .number-badge {
    position: absolute;
    top: var(--6px);
    right: var(--4px);
    left: auto;
    min-width: var(--16px);
    height: var(--16px);
    padding: 0 var(--4px);
    border-radius: var(--8px);
    background-color: var(--sh-rail-active);
    color: #fff;
    font-size: var(--10px);
    font-weight: 600;
    line-height: var(--16px);
    text-align: center;
  }
  body[data-navbar="side"] #navbar > .navbar .navbar-toggle {
    order: 2;
    float: none;
    margin: 0;
    width: var(--sh-m-hit);
    height: var(--sh-m-hit);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--border-radius);
    background-color: transparent;
    color: #fff;
    font-size: var(--18px);
  }
  body[data-navbar="side"] #navbar > .navbar .navbar-toggle:hover,
  body[data-navbar="side"] #navbar > .navbar.sh-m-menu-open .navbar-toggle { background-color: var(--sh-rail-hover); }
  body[data-navbar="side"] #navbar > .navbar.sh-m-menu-open .navbar-toggle .fa-bars::before { content: "\f00d"; }

  /* P2: search occupies a fixed full-width bar, using core's existing search view. */
  body[data-navbar="side"] #navbar > .navbar .sh-m-searchbar { display: none; }
  body[data-navbar="side"] #navbar > .navbar.sh-m-search-open .sh-m-searchbar {
    display: block;
    position: fixed;
    z-index: 1031;
    top: var(--sh-m-bar-h);
    left: 0;
    right: 0;
    padding: var(--8px) var(--12px);
    background-color: var(--sh-rail-bg);
    border-top: 1px solid var(--sh-rail-rule);
  }
  body[data-navbar="side"] #navbar > .navbar .sh-m-searchbar > ul { float: none; margin: 0; padding: 0; list-style: none; }
  body[data-navbar="side"] #navbar > .navbar .sh-m-searchbar li.global-search-container {
    float: none;
    display: block;
    margin: 0;
    padding: 0;
  }
  body[data-navbar="side"] #navbar > .navbar .sh-m-searchbar a.sh-search-trigger { display: none; }
  body[data-navbar="side"] #navbar > .navbar .sh-m-searchbar .input-group {
    display: flex;
    width: 100%;
    margin: 0;
    height: var(--sh-m-hit);
    border-radius: var(--border-radius);
    background-color: var(--sh-rail-field);
  }
  body[data-navbar="side"] #navbar > .navbar .sh-m-searchbar .input-group:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
  body[data-navbar="side"] #navbar > .navbar .sh-m-searchbar input.global-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;                  /* core: width: 100% !important below 768 */
    height: var(--sh-m-hit);
    padding: 0 var(--14px);
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: var(--16px);
  }
  body[data-navbar="side"] #navbar > .navbar .sh-m-searchbar input.global-search-input::placeholder { color: var(--sh-rail-text); }
  body[data-navbar="side"] #navbar > .navbar .sh-m-searchbar .input-group-btn { display: flex; width: auto; }
  body[data-navbar="side"] #navbar > .navbar .sh-m-searchbar .global-search-button {
    width: var(--sh-m-hit);
    height: var(--sh-m-hit);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-rail-text);
  }
  body[data-navbar="side"] #navbar > .navbar .sh-m-searchbar #global-search-panel {
    position: fixed;
    top: calc(var(--sh-m-bar-h) + 60px + var(--8px)); /* core has no --60px token */
    left: var(--8px);
    right: var(--8px);
    width: auto;
    margin: 0;
    max-height: calc(100vh - var(--sh-m-bar-h) - var(--80px));
  }
  /* Core's inline viewport-height body must shrink below the results heading. */
  body[data-navbar="side"] #navbar > .navbar .sh-m-searchbar #global-search-panel > .panel { margin: 0; border-radius: var(--panel-border-radius); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); display: flex; flex-direction: column; max-height: calc(100vh - var(--sh-m-bar-h) - var(--80px)); }
  body[data-navbar="side"] #navbar > .navbar .sh-m-searchbar #global-search-panel > .panel > .panel-heading { flex-shrink: 0; }
  body[data-navbar="side"] #navbar > .navbar .sh-m-searchbar #global-search-panel > .panel > .panel-body { min-height: 0; max-height: calc(100vh - var(--sh-m-bar-h) - var(--80px)); overflow-y: auto; }

  /* P3: the tile area scrolls inside the sheet; its foot row never scrolls away. */
  body.sh-m-lock { overflow: hidden; }
  body[data-navbar="side"] #navbar > .navbar > .navbar-body.in {
    position: fixed;
    z-index: 1029;
    top: var(--sh-m-bar-h);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto !important;                 /* supplied override for a collapse inline height */
    max-height: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;             /* core: overflow-x: hidden !important below 768 */
    border-top: 1px solid var(--sh-rail-rule);
    box-shadow: none;
    background-color: var(--sh-rail-bg);
  }
  body[data-navbar="side"] #navbar > .navbar > .navbar-body > ul.sh-rail-top,
  body[data-navbar="side"] #navbar > .navbar > .navbar-body > .navbar-right-container { display: none; }
  body[data-navbar="side"] #navbar > .navbar .navbar-left-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--4px) var(--12px) var(--12px);
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs {
    float: none;
    height: auto !important;                 /* core writes an inline height */
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--4px);
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs::before,
  body[data-navbar="side"] #navbar > .navbar ul.tabs::after { content: none; display: none; }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab { float: none; display: block; margin: 0; }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab.sh-hidden { display: block; }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab[data-name="Home"] { display: none; }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-divider {
    display: block;
    grid-column: 1 / -1;
    padding: var(--8px) var(--2px) var(--2px);
    pointer-events: none;
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-divider > .nav-divider-text {
    padding: 0;
    font-size: var(--13px);
    line-height: var(--18px);
    font-weight: 400;
    color: rgba(255, 255, 255, .55);
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-divider > .nav-divider-text::before,
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-divider > .nav-divider-text::after { content: none; display: none; }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-divider > .nav-divider-text > .label-text { color: inherit; font-size: inherit; font-weight: inherit; }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab:not(.tab-divider) > a {
    height: calc(var(--50px) + var(--8px));
    padding: 0 var(--6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--5px);
    border: 0;
    border-radius: var(--border-radius);
    background-color: rgba(255, 255, 255, .06);
    color: var(--sh-rail-text);
    font-size: var(--12px);
    line-height: var(--16px);
    text-align: center;
    white-space: nowrap;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab > a > span.short-label {
    position: static;
    display: block;
    width: auto;
    font-size: var(--15px);
    line-height: 1;
    color: inherit;
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab > a > span.short-label > span { color: inherit; }
  /* Match P3's rail text directly, not the old fallback's compounded 70% span opacity. */
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab > a span { color: inherit; opacity: 1; }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab > a > span.full-label {
    position: static;
    display: block;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab > a:hover { background-color: var(--sh-rail-hover); color: var(--sh-rail-text-strong); }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab.active > a,
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab.active > a:hover {
    background-color: var(--sh-rail-active);
    color: #fff;
    font-weight: 500;
  }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-group.open { grid-column: 1 / -1; }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-group.open > .dropdown-menu { padding: var(--4px) 0 0; }
  body[data-navbar="side"] #navbar > .navbar ul.tabs > li.tab-group.open > .dropdown-menu > li > a {
    height: var(--sh-m-hit);
    padding: 0 var(--12px);
    display: flex;
    align-items: center;
    gap: var(--12px);
    border-radius: var(--border-radius);
    font-size: var(--15px);
  }

  /* P4: user, Quick Create, Last Viewed and Theme share a fixed-height foot row. */
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom {
    float: none;
    flex: 0 0 auto;
    margin: 0;
    padding: var(--8px) var(--12px) var(--12px);
    display: flex;
    align-items: center;
    gap: var(--4px);
    border-top: 1px solid var(--sh-rail-rule);
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom::before,
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom::after { content: none; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li { float: none; position: static; display: block; width: auto; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.menu-container { order: 0; flex: 1 1 auto; min-width: 0; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li[data-item="quickCreate"] { order: 1; display: block !important; } /* core li.hidden-xs */
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li[data-item="lastViewed"] { order: 2; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li[data-item="themeModeOptions"] { order: 3; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li > a {
    width: var(--sh-m-hit);
    height: var(--sh-m-hit);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-radius: var(--border-radius);
    background-color: transparent;
    color: var(--sh-rail-text);
    font-size: var(--15px);
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li > a .sh-label { display: none; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li[data-item="quickCreate"] > a { background-color: var(--sh-rail-field-strong); color: #fff; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.menu-container > a {
    width: auto;
    margin-left: calc(-1 * var(--8px));
    padding: 0 var(--8px);
    justify-content: flex-start;
    gap: var(--12px);
    color: #fff;
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.menu-container > a .sh-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.menu-container > a > .fa-ellipsis-v { display: none; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom .sh-user-avatar { width: var(--28px); height: var(--28px); border-radius: 50%; }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li > a:hover,
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.open > a { background-color: var(--sh-rail-hover); color: var(--sh-rail-text-strong); }

  /* P5: menus float on screen rather than expanding core's inline phone dropdowns. */
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.open > .dropdown-menu {
    position: fixed;
    left: var(--8px);
    right: var(--8px);
    top: auto;
    bottom: calc(var(--sh-m-foot-h) + var(--8px));
    width: auto;
    min-width: 0;
    max-height: calc(100vh - var(--sh-m-bar-h) - var(--sh-m-foot-h) - var(--16px));
    overflow-y: auto;
    margin: 0;
    padding: var(--6px) 0;
    float: none;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.open > .dropdown-menu > li > a {
    min-height: var(--sh-m-hit);
    padding: 0 var(--14px);
    display: flex;
    align-items: center;
    gap: var(--10px);
    color: var(--text-color);
    font-size: var(--15px);
    line-height: var(--20px);
  }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.open > .dropdown-menu > li > a:hover { background-color: var(--dropdown-link-hover-bg); color: var(--text-color); }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.open > .dropdown-menu > .divider { background-color: var(--default-border-color); }
  body[data-navbar="side"] #navbar > .navbar ul.sh-rail-bottom > li.open > .dropdown-menu > .dropdown-header { color: var(--text-muted-color); }
  body[data-navbar="side"] #navbar > .navbar #notifications-panel,
  body[data-navbar="side"] #navbar > .navbar #last-viewed-panel {
    position: fixed;
    left: var(--8px);
    right: var(--8px);
    width: auto;
    margin: 0;
    /* Core writes a viewport-height inline size on this wrapper, outside its capped body. */
    max-height: calc(100vh - var(--sh-m-bar-h) - var(--sh-m-foot-h) - var(--16px));
  }
  body[data-navbar="side"] #navbar > .navbar #notifications-panel { top: calc(var(--sh-m-bar-h) + var(--8px)); bottom: auto; }
  body[data-navbar="side"] #navbar > .navbar #last-viewed-panel { top: auto; bottom: calc(var(--sh-m-foot-h) + var(--8px)); }
  body[data-navbar="side"] #navbar > .navbar #notifications-panel > .panel,
  body[data-navbar="side"] #navbar > .navbar #last-viewed-panel > .panel { margin: 0; border-radius: var(--panel-border-radius); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
  body[data-navbar="side"] #navbar > .navbar #notifications-panel > .panel > .panel-body,
  body[data-navbar="side"] #navbar > .navbar #last-viewed-panel > .panel > .panel-body {
    max-height: calc(100vh - var(--sh-m-bar-h) - var(--sh-m-foot-h) - 60px);
    overflow-y: auto;
  }

  /* P6: hide detail originals, not inline edit's Save/Cancel; JS still clicks originals. */
  body[data-navbar="side"] #main:has(> .record > .detail > .record-buttons:not(.hidden)) > .page-header .header-buttons,
  body[data-navbar="side"] #main > .record > .detail > .detail-button-container.record-buttons { display: none; }
  body[data-navbar="side"] #main:has(> .record > .detail) > .page-header { border-bottom: 0; box-shadow: none; }
  body[data-navbar="side"] #main:has(> .record > .detail) > .page-header > .page-header-row { flex-wrap: nowrap; gap: var(--12px); }
  body[data-navbar="side"] #main:has(> .record > .detail) > .page-header .page-header-column-1 { flex: 1 1 0; }
  #main .sh-m-actions { position: relative; flex: 0 0 auto; }
  #main .sh-m-actions > .sh-m-actions-btn {
    width: var(--sh-m-hit);
    height: var(--sh-m-hit);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--15px);
  }
  #main .sh-m-actions > .sh-m-actions-menu {
    top: calc(100% + var(--4px));
    right: 0;
    left: auto;
    min-width: calc(var(--220px) + var(--10px));
    max-height: calc(100vh - var(--sh-m-bar-h) - var(--120px));
    overflow-y: auto;
    padding: var(--6px) 0;
  }
  #main .sh-m-actions > .sh-m-actions-menu > li > a {
    min-height: var(--sh-m-hit);
    padding: 0 var(--14px);
    display: flex;
    align-items: center;
    gap: var(--12px);
    font-size: var(--15px);
    line-height: var(--20px);
    white-space: nowrap;
    cursor: pointer;
    color: var(--text-color);
  }
  #main .sh-m-actions > .sh-m-actions-menu > li > a:hover { background-color: var(--dropdown-link-hover-bg); color: var(--text-color); }
  #main .sh-m-actions > .sh-m-actions-menu > li.disabled > a { opacity: .4; cursor: default; }
  #main .sh-m-actions .sh-m-action-icon { flex: 0 0 var(--16px); width: var(--16px); text-align: center; color: var(--text-gray-color); }
  #main .sh-m-actions .sh-m-action-icon.fa-rss.sh-on { color: var(--brand-success); }
  body[data-navbar="side"] #main:has(> .record > .detail) > .modes {
    margin: 0 calc(-1 * var(--sh-page-x));
    padding: 0 var(--sh-page-x) var(--12px);
    background-color: var(--panel-bg);
  }
  body[data-navbar="side"] #main:has(> .record > .detail) > .modes .btn-group { display: flex; width: 100%; }
  body[data-navbar="side"] #main:has(> .record > .detail) > .modes .btn-group > .btn[data-action="switchMode"] { flex: 1 1 0; height: var(--36px); font-size: var(--14px); }
  body[data-navbar="side"] #main .record > .detail > .sh-key-fields { padding: var(--10px) var(--sh-page-x) var(--12px); row-gap: var(--10px); }
  .sh-key-fields > .sh-key-group { padding-left: 0; border-left: 0; }
  /* Desktop row-start transforms compensate for padding we just removed on phones. */
  .sh-key-fields > .sh-key-group.sh-row-start { transform: none; }

  /* P7: existing <=1100 record-grid and <768 field-row stacking already apply. */
  /* At 767px the existing auto-fill side grid still fits two panels; phones require one. */
  body[data-navbar="side"] #main .record > .detail > .record-grid > .side { grid-template-columns: minmax(0, 1fr); }
  /* Related-panel tabs can otherwise overflow a phone with four 100px minimum buttons. */
  body[data-navbar="side"] #main .record > .detail .bottom > .tabs { display: flex; width: 100%; }
  body[data-navbar="side"] #main .record > .detail .bottom > .tabs > .btn { flex: 1 1 0; min-width: 0; padding-left: var(--4px); padding-right: var(--4px); }

  /* P8: restore real search/list boxes; desktop's display:contents cannot form row 2. */
  body[data-navbar="side"] #main:has(> .page-header + .search-container) { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--12px); }
  body[data-navbar="side"] #main:has(> .page-header + .search-container)::before { grid-row: 1 / 3; }
  body[data-navbar="side"] #main:has(> .page-header + .search-container) .page-header-column-1 {
    grid-row: 1;
    grid-column: 1;
    min-height: calc(var(--40px) + var(--16px)) !important; /* 56; core sets min-height: unset !important */
  }
  body[data-navbar="side"] #main:has(> .page-header + .search-container) .page-header-column-2 { grid-row: 1; grid-column: 2; }
  body[data-navbar="side"] #main:has(> .page-header + .search-container) > .search-container {
    display: block;
    grid-row: 2;
    grid-column: 1 / -1;
    max-width: none;
    padding: 0 0 var(--12px);
    z-index: 2;
  }
  body[data-navbar="side"] #main:has(> .page-header + .search-container) > .search-container > .search-row { display: flex; flex-wrap: wrap; gap: var(--8px); }
  body[data-navbar="side"] #main:has(> .page-header + .search-container) > .search-container > .search-row > .form-group:first-child { flex: 1 1 100%; max-width: none; padding: 0; }
  body[data-navbar="side"] #main > .search-container .search-row .input-group .form-control { font-size: var(--16px); }
  body[data-navbar="side"] #main:has(> .page-header + .search-container) > .list-container,
  body[data-navbar="side"] #main:has(> .page-header + .search-container) > .row > .list-main-column > .list-container { display: block; grid-row: 3; grid-column: 1 / -1; min-width: 0; }
  body[data-navbar="side"] #main:has(> .page-header + .search-container) > .row { grid-row: 3; }
  body[data-navbar="side"] #main .list-container > .list-buttons-container { flex-wrap: wrap; }

  /* P9: priority columns return; only the table panel, never the page, scrolls sideways. */
  body[data-navbar="side"] #main .list-container > .list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Core removes mobile list edges with negative margins; keep the table inside its panel. */
  body[data-navbar="side"] #content #main .list-container > .list {
    margin-left: 0;
    margin-right: 0;
    border-left-width: var(--panel-border-width);
    border-right-width: var(--panel-border-width);
    border-radius: var(--panel-border-radius);
  }
  body[data-navbar="side"] #main .list-container > .list > table > thead > tr > th,
  body[data-navbar="side"] #main .list-container > .list > table > tbody > tr > td { white-space: nowrap; }
  /* Fixed layout gives restored auto-width columns zero space; size them before scrolling. */
  body[data-navbar="side"] #main .list-container > .list > table { table-layout: auto; }
  body[data-navbar="side"] #main .list-container > .list[data-sh-hide] th[data-sh-priority],
  body[data-navbar="side"] #main .list-container > .list[data-sh-hide] td[data-sh-priority] { display: table-cell; }

  /* P10: the category panel follows the real list-band bottom measured by JS. */
  #main .page-header h3.header-title.sh-cat-on .sh-cat-pop {
    position: fixed;
    top: var(--sh-m-cat-top, calc(var(--sh-m-bar-h) + var(--120px)));
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    max-height: 65vh;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .11);
  }
  #main .page-header h3.header-title.sh-cat-on .sh-cat-row { height: var(--sh-m-hit); font-size: var(--15px); }
  #main .page-header h3.header-title.sh-cat-on .sh-cat-twisty { flex-basis: var(--32px); width: var(--32px); height: var(--40px); }
  #main .page-header h3.header-title.sh-cat-on .sh-cat-current { max-width: 40vw; }
}