@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); }
  }
}

@media screen and (min-width: 768px) {
  body[data-navbar="side"] #main:has(> .modes):has(> .record:empty) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    column-gap: var(--8px);
    align-items: center;
  }
  body[data-navbar="side"] #main:has(> .modes):has(> .record:empty)::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(> .modes):has(> .record:empty) > .page-header,
  body[data-navbar="side"] #main:has(> .modes):has(> .record:empty) > .page-header > .page-header-row { display: contents; }
  body[data-navbar="side"] #main:has(> .modes):has(> .record:empty) > * { grid-column: 1 / -1; min-width: 0; }
  body[data-navbar="side"] #main:has(> .modes):has(> .record:empty) .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(> .modes):has(> .record:empty) > .modes {
    grid-row: 1; grid-column: 2;
    z-index: 1;
    margin: 0 var(--8px) 0 0;
    padding: 0;
    float: none;
  }
  body[data-navbar="side"] #main:has(> .modes):has(> .record:empty) .page-header-column-2 {
    grid-row: 1; grid-column: 4;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  @media (max-width: 1100px) {
    body[data-navbar="side"] #main:has(> .modes):has(> .record:empty) { grid-template-columns: auto auto auto auto minmax(0, 1fr); }
    body[data-navbar="side"] #main:has(> .modes):has(> .record:empty)::before { grid-row: 1 / 3; }
    body[data-navbar="side"] #main:has(> .modes):has(> .record:empty) .page-header-column-1 { grid-column: 1 / -1; padding-right: 0 !important; }
    body[data-navbar="side"] #main:has(> .modes):has(> .record:empty) > .modes { grid-row: 2; grid-column: 1; padding-bottom: var(--12px); }
    body[data-navbar="side"] #main:has(> .modes):has(> .record:empty) .page-header-column-2 { grid-row: 2; grid-column: 3; 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;
}


/* ── 9c. Project Board and Gantt refresh ────────────────────────────────────
   Adds the panel look, lanes, cards, With Client marker and Currently With filter on top of
   §9b, which stays as it is. Must stay directly after §9b: the toolbar rules reuse its
   selector prefix and win over its .btn sizing by order. Every !important overrides an
   inline style, a core !important or a §9b !important. */

/* 9c.1 Toolbar row becomes the panel's top bar (SPEC T1-T5) ----------------------------
   #main::after draws the bar behind §9b's toolbar row, the way §9b's #main::before draws the
   header band behind row 1. Tracks §9b's row: 2 above 1100px, 3 at 1100px and below. */
@media screen and (min-width: 768px) {
  body[data-navbar="side"] #main:has(> .record > .board-record, > .record > .gantt-panel)::after {
    content: "";
    grid-row: 2; grid-column: 1 / -1;
    align-self: stretch;
    min-height: 48px; box-sizing: border-box;
    margin-top: var(--16px); /* gap between the header band and the panel, as in the mockup */
    background: var(--panel-bg);
    border: 1px solid var(--panel-default-border); border-bottom-color: var(--default-border-color);
    border-radius: var(--panel-border-radius) var(--panel-border-radius) 0 0;
  }
  /* Toolbar controls take the same 16px top margin as the bar: grid centring then keeps them centred in it. */
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > :is(
    .total-count + .btn-group + .btn-group, .catalyst-label-filter, .catalyst-with-filter,
    .total-count, .settings-container, .pull-right:not(.total-count):not(.settings-container), .input-text-block
  ) { margin-top: var(--16px); }
  /* Gantt "Hold CTRL to select multiple tasks" hint: core leaves it unplaced, so it fell into its own grid row.
     It goes in the toolbar row after Currently With (--sh-with-filter-w is that button's width, measured by the view). */
  body[data-navbar="side"] #main > .record:has(> .gantt-panel) > .button-container.list-buttons-container > .input-text-block {
    grid-row: 2; grid-column: 1; z-index: 1; justify-self: start; float: none;
    margin-left: calc(var(--10px) + var(--sh-with-filter-w, 150px) + var(--12px));
    white-space: nowrap; max-width: none !important; /* inline max-width: 40% wrapped the hint onto two lines and grew the bar */
  }
  /* The outermost controls sit 10px inside the bar, so §9b's fixed offsets grow by 10px. */
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .total-count + .btn-group + .btn-group,
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .catalyst-with-filter { margin-left: var(--10px); }
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .pull-right:not(.total-count):not(.settings-container) { margin-right: var(--10px); }
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .settings-container { margin-right: calc(var(--10px) + var(--34px) + var(--2px)) !important; /* §9b offset + the 10px inset; §9b's rule is !important */ }
  /* Keep the task total separate from the Fields button: clear More, settings, and an extra 8px gap. */
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .total-count { margin-right: calc(var(--10px) + var(--34px) + var(--2px) + var(--30px) + var(--2px) + var(--8px)) !important; /* Overrides section 9b's fixed count offset. */ }
  /* Labels and Currently With follow the Group button at its real width (--sh-group-w, measured by the board's buttons
     view) instead of §9b's worst-case 150px text cap, which left a wide gap after short group names. */
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .btn-group.catalyst-label-filter { margin-left: calc(var(--10px) + var(--sh-group-w, 182px) + var(--2px)) !important; /* §9b's rule is !important */ }

  /* Currently With sits in the toolbar row, column 1, after Labels (or after Group when the
     project has no labels) and first on the Gantt, using the same fixed-offset method as Labels.
     --sh-label-filter-w is the Labels button's width, measured by the board's buttons view. */
  body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .catalyst-with-filter {
    grid-row: 2; grid-column: 1;
    z-index: 20; justify-self: start; float: none; /* above vis's Name corner and Today tag, which would otherwise cut the open menu off */
  }
  body[data-navbar="side"] #main > .record:has(> .board-record) > .button-container.list-buttons-container > .catalyst-with-filter {
    margin-left: calc(var(--10px) + var(--sh-group-w, 182px) + var(--2px)) !important; /* clears Group, as Labels does */
  }
  body[data-navbar="side"] #main > .record:has(> .board-record):has(> .button-container > .catalyst-label-filter) > .button-container.list-buttons-container > .catalyst-with-filter {
    margin-left: calc(var(--10px) + var(--sh-group-w, 182px) + var(--2px) + var(--sh-label-filter-w, 80px) + var(--2px)) !important; /* clears Group and Labels */
  }

  /* At 1100px and below §9b moves the toolbar to row 3 but leaves Labels in row 2, over the
     mode switch. Move the bar, Labels and Currently With down with the rest of the toolbar. */
  @media (max-width: 1100px) {
    body[data-navbar="side"] #main:has(> .record > .board-record, > .record > .gantt-panel)::after { grid-row: 3; }
    body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .btn-group.catalyst-label-filter,
    body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .catalyst-with-filter,
    body[data-navbar="side"] #main > .record:has(> .gantt-panel) > .button-container.list-buttons-container > .input-text-block { grid-row: 3; }
  }
}
/* Toolbar controls become quiet ghost buttons; height stays §9b's --sh-control-h and Create Task keeps §9b's navy. */
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container .btn.btn-text {
  border: 0; border-radius: 6px; background: transparent;
  color: var(--text-color); gap: 6px; /* one gap between label and caret on Group, Labels and Currently With */
  transition: background-color .15s ease-in-out;
}
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container .btn.btn-text:hover,
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container .btn-group.open > .btn.btn-text { background: var(--btn-default-hover-bg); }
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container .btn.btn-text .caret { margin: 0 !important; /* the Labels button sets an inline margin-left: 4px on its caret */ border-top-color: var(--text-muted-color); }
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container .btn.btn-text > .fa-ellipsis-h { color: var(--text-secondary-color, var(--text-gray-color)); }
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .total-count { color: var(--text-secondary-color, var(--text-gray-color)); }
/* Group button: the stage-colour square is painted as an 8px box (its colour arrives inline as `color`), not drawn with
   the Font Awesome glyph, whose baseline metrics left it off-centre. 6px gap to the name. */
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .total-count + .btn-group + .btn-group > .btn.btn-text { gap: 6px; }
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .total-count + .btn-group + .btn-group .btn .color-icon {
  flex: 0 0 8px; width: 8px; height: 8px; margin: 0; padding: 0;
  font-size: 0; line-height: 0; background-color: currentColor;
  transform: translateY(2px); /* centres on the x-height of the name, which sits lower than the line box centre */
}
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container > .total-count + .btn-group + .btn-group .btn .color-icon::before { content: none; }
/* Currently With dropdown: muted name, then value; menu rows carry an icon and a right-aligned count (SPEC F1, F2). */
.catalyst-with-filter .sh-filter-name { color: var(--text-muted-color); }
/* Gantt info icon: a square ghost button beside the scale menu; the popover it opens is core's, so it keeps core's width. */
body[data-navbar="side"] #main > .record > .button-container.list-buttons-container .btn.sh-gantt-info { width: var(--sh-control-h); padding: 0; justify-content: center; color: var(--text-muted-color); }
.popover .popover-content p:last-child { margin-bottom: 0; }
.catalyst-with-filter .dropdown-menu { min-width: 200px; }
.catalyst-with-filter .dropdown-menu > li > a { display: flex; align-items: center; gap: 8px; }
.catalyst-with-filter .dropdown-menu > li > a > .fas { width: 14px; font-size: 12px; color: var(--text-gray-color); }
.catalyst-with-filter .dropdown-menu > li > a > .sh-count { margin-left: auto; font-size: 12px; color: var(--text-muted-color); }
.catalyst-with-filter .dropdown-menu > li.selected > a { font-weight: 600; }

/* 9c.2 Board: one panel with grey lanes (SPEC B1-B4) ----------------------------------- */
/* The board panel continues the toolbar bar: no top border, square top corners. */
body[data-navbar="side"] #main > .record > .board-record {
  background: var(--panel-bg);
  border: 1px solid var(--panel-default-border); border-top: 0;
  border-radius: 0 0 var(--panel-border-radius) var(--panel-border-radius);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .04);
  padding: 14px;
}
/* Lane grey is the mockup's #f0f0f0; --body-bg resolves near-white in this theme, so light mode can't use it. */
.board-record { --sh-lane-bg: #f0f0f0; }
html.dark .board-record { --sh-lane-bg: var(--body-bg); }
/* Lane heading is the grey top of its lane, in plain ink with a square stage marker. */
.board-record div.list-kanban > div.kanban-head-container > table > thead tr.kanban-row > th.group-header {
  max-height: none; padding: 8px 8px 0; background: var(--sh-lane-bg);
  border-radius: 6px 6px 0 0;
}
.board-record div.list-kanban > div > table th.group-header > div,
.board-record div.list-kanban > div > table th.group-header[class*="group-header-"] > div {
  height: 32px; line-height: 32px; padding: 0 4px; display: flex; align-items: center; gap: 8px;
  background: transparent; border-radius: 0;
  color: var(--text-color); font-size: var(--14px); font-weight: 500;
}
/* The marker takes the stage colour that used to fill the whole heading. */
.board-record div.list-kanban > div > table th.group-header > div::before {
  content: ""; flex: 0 0 8px; height: 8px; background: var(--text-muted-color);
}
.board-record div.list-kanban > div > table th.group-header-primary > div::before { background: var(--brand-primary); }
.board-record div.list-kanban > div > table th.group-header-success > div::before { background: var(--brand-success); }
.board-record div.list-kanban > div > table th.group-header-warning > div::before { background: var(--brand-warning); }
.board-record div.list-kanban > div > table th.group-header-danger > div::before { background: var(--brand-danger); }
.board-record div.list-kanban > div > table th.group-header-info > div::before { background: var(--brand-info); }
.board-record div.list-kanban > div > table th.group-header > div .kanban-group-label { flex: 1; min-width: 0; }
.board-record div.list-kanban > div > table th.group-header > div .create-button { float: none; right: 0; color: var(--text-muted-color); }
.board-record div.list-kanban > div > table th.group-header > div .create-button:hover { color: var(--text-color); }
.board-record .list-kanban .kanban-head-placeholder { height: 40px; }
/* Stuck heading row keeps a panel fill so cards scroll under it cleanly (SPEC B4). */
.board-record .list-kanban .kanban-head-container.sticked {
  background-color: var(--panel-bg);
  top: 0; margin-top: 0; box-sizing: content-box;
  border-top: 8px solid var(--panel-bg); /* the always-white gap above the pinned row; the view pins it 8px from the page top (kanban-sticky-header.js) */
}
/* Pinned, the grey box has no 8px top padding, so the label's 40px line box fills it and the text sits at its centre; unpinned, that padding pushes the label into the lower 32px on purpose. */
.board-record div.list-kanban > div.kanban-head-container.sticked > table > thead tr.kanban-row > th.group-header { padding: 0 8px; border-radius: 6px 6px 0 0; }
.board-record div.list-kanban > div.kanban-head-container.sticked > table th.group-header > div { height: 40px; line-height: 40px; }
/* Lane body is the grey bottom of its lane. */
.board-record div.list-kanban > div > table td.group-column {
  padding: 8px 8px 0; background: var(--sh-lane-bg);
  border-radius: 0 0 6px 6px;
}
.board-record div.list-kanban > div > table td.group-column .group-column-list { margin-bottom: 8px; }
.board-record div.list-kanban > div > table td.group-column .show-more a > span { top: 0; }

/* 9c.3 Board cards (SPEC C1-C6) --------------------------------------------------------- */
.board-record div.list-kanban > div > table .item { margin-bottom: 8px; }
.board-record div.list-kanban > div > table .item .panel {
  border: 1px solid var(--panel-default-border); border-radius: 6px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .04);
  transition: border-color .15s ease-in-out;
}
.board-record div.list-kanban > div > table .item .panel:hover { border-color: var(--btn-default-hover-border); }
/* Fixed card layout on a grid: name, then priority + labels, then avatars + dates. */
.board-record div.list-kanban > div > table .item .panel > .panel-body {
  padding: 10px 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 4px; align-items: center;
}
.board-record .list-kanban .item .panel > .panel-body > div { grid-column: 1 / -1; margin-top: 8px; }
.board-record .list-kanban .item .panel > .panel-body > div:has(> .form-group > .field[data-name="name"]) { grid-row: 1; margin-top: 0; }
.board-record .list-kanban .item .panel > .panel-body > div:has(> .form-group > .field[data-name="priority"]) { grid-row: 2; grid-column: 1; }
.board-record .list-kanban .item .panel > .panel-body > div:has(> .form-group > .field[data-name="labels"]) { grid-row: 2; grid-column: 2; }
.board-record .list-kanban .item .panel > .panel-body > div:has(> .form-group > .field[data-name="assignedUsers"]) { grid-row: 3; grid-column: 1; }
.board-record .list-kanban .item .panel > .panel-body > div:has(> .form-group > .field[data-name="timeline"]) { grid-row: 3; grid-column: 2; justify-self: end; }
/* A row whose field is empty takes no space (SPEC C2). */
.board-record .list-kanban .item .panel > .panel-body > div:has(> .form-group > .field:empty) { display: none; }
.board-record div.list-kanban > div > table .item .panel .form-group { margin-bottom: 0; }
.board-record div.list-kanban > div > table .item .panel .item-menu-container { margin-top: -6px; margin-right: -8px; }
.board-record .list-kanban .item .field[data-name="name"] { line-height: 1.45; text-wrap: pretty; }
.board-record .list-kanban .item .field[data-name="name"] > a.link { font-weight: 500; }
/* Priority and With Client are solid 12px/600 labels, 20px tall. */
.board-record .list-kanban .item .field[data-name="priority"] { display: flex; align-items: center; gap: 4px; }
.board-record .list-kanban .item .label.label-md {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 6px; line-height: 20px; border-radius: var(--label-border-radius, 4px);
  font-size: var(--12px); font-weight: 600;
}
.board-record .list-kanban .item .label.sh-with-client { background: rgba(228, 161, 51, .14); color: #a8670f; }
.board-record .list-kanban .item .label.sh-with-client > .fas { font-size: 9px; }
html.dark .board-record .list-kanban .item .label.sh-with-client { background: rgba(228, 161, 51, .18); color: #e4a133; }
/* Project labels wrap with 4px gaps; .sh-tag is the markup the labels field now renders. */
.sh-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sh-tag { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; /* long names end in an ellipsis instead of being cut mid-letter by the card edge */ padding: 0 6px; line-height: 18px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.board-record .list-kanban .item .field[data-name="assignedUsers"] { display: flex; gap: 4px; }
.board-record .list-kanban .item .field[data-name="assignedUsers"] > img.avatar { width: 20px; height: 20px; }
.board-record .list-kanban .item .field[data-name="timeline"] { font-size: var(--12px); white-space: nowrap; }
/* On a card too narrow for avatars and dates side by side, the dates drop to their own row, left-aligned, instead of
   overlapping the avatars or wrapping at every space. */
.board-record div.list-kanban > div > table .item .panel > .panel-body { container-type: inline-size; }
@container (max-width: 185px) {
  .board-record .list-kanban .item .panel > .panel-body > div:has(> .form-group > .field[data-name="timeline"]) { grid-row: 4; grid-column: 1 / -1; justify-self: start; }
}

/* 9c.4 Gantt panel and grid (SPEC G1-G5) ------------------------------------------------ */
/* The Gantt panel continues the toolbar bar: no top border, square top corners. */
body[data-navbar="side"] #main > .record > .panel.gantt-panel {
  margin: 0; border-top: 0;
  border-radius: 0 0 var(--panel-border-radius) var(--panel-border-radius);
  overflow: hidden;
}
.gantt-panel .vis-timeline { border: 0; font-family: inherit; }
.gantt-panel .vis-panel.vis-center,
.gantt-panel .vis-panel.vis-left,
.gantt-panel .vis-panel.vis-right,
.gantt-panel .vis-panel.vis-top,
.gantt-panel .vis-panel.vis-bottom { border-color: var(--panel-default-border) !important; /* core: var(--calendar-border) !important, darker than the mockup */ }
.gantt-panel .vis-labelset .vis-label,
.gantt-panel .vis-foreground .vis-group { border-bottom: 1px solid var(--default-border-color) !important; /* module: var(--calendar-border) */ }
.gantt-panel .vis-time-axis .vis-grid.vis-minor,
.gantt-panel .vis-time-axis .vis-grid.vis-major { border-color: var(--panel-default-border) !important; /* core and module: darker greys, both !important */ }
/* One-row axis: month names with the year beside the first month and each January. */
.gantt-panel .vis-time-axis .vis-text { padding: 12px 8px; font-size: var(--13px); font-weight: 500; color: var(--text-color); }
.gantt-panel .vis-time-axis .vis-text .sh-year { margin-left: 6px; font-size: var(--12px); font-weight: 400; color: var(--text-muted-color); }
/* Name header fills the corner above the label column; the Gantt view inserts and sizes it. */
.gantt-panel .sh-gantt-corner {
  position: absolute; left: 0; top: 0; z-index: 2; box-sizing: border-box;
  display: flex; align-items: center; padding: 0 14px;
  background: var(--panel-bg); font-size: var(--12px); color: var(--text-muted-color); /* no borders: the vis panels' own edges already draw them, and a second pair doubled the lines */
}
.gantt-panel .vis-labelset .vis-label { color: var(--text-color); font-size: var(--14px); }
.gantt-panel .vis-labelset .vis-label .vis-inner { display: flex; align-items: center; gap: 8px; }
.gantt-panel .vis-labelset .vis-label.vis-nesting-group .vis-inner > .text-bold { font-weight: 500; color: var(--text-color); } /* the reference design shows the group name in full ink, not the secondary grey */
/* Group row: same painted 8px square as the board's Group button, a 6px gap to the name, and the module's
   &nbsp; spacer span hidden, which with the flex gaps had left about 27px between square and name. */
.gantt-panel > .panel-body .vis-content .vis-labelset .vis-label.vis-nesting-group .vis-inner { padding-left: 26px; gap: 8px; } /* module sets padding-left: 26px at the same specificity */
.gantt-panel .vis-labelset .vis-label.vis-nesting-group .vis-inner > span:not(.color-icon):not(.text-bold) { display: none; }
.gantt-panel .vis-labelset .vis-label.vis-nesting-group .color-icon {
  flex: 0 0 8px; width: 8px; height: 8px; margin: 0; padding: 0;
  font-size: 0; line-height: 0; background-color: currentColor;
  transform: translateY(2px); /* same optical centring as the board's Group button */
}
.gantt-panel .vis-labelset .vis-label.vis-nesting-group .color-icon::before { content: none; }
.gantt-panel .vis-labelset .vis-label .vis-inner > .icon[data-action="viewTask"] { display: none; } /* the name link opens the same task */
.gantt-panel .vis-labelset .vis-label .vis-inner > .overflow { float: none; max-width: 100% !important; /* inline max-width: calc(100% - 25px) reserved space for the icon */ }
.gantt-panel .vis-labelset .vis-label a.text-default { color: var(--text-color); font-weight: 400; }
.gantt-panel .vis-labelset .vis-label a.text-default:hover { color: var(--link-color); }
.gantt-panel .vis-labelset .sh-with-client-icon { flex: 0 0 auto; font-size: 10px; color: #a8670f; }
html.dark .gantt-panel .vis-labelset .sh-with-client-icon { color: #e4a133; }

/* 9c.5 Gantt items (SPEC G6-G10) -------------------------------------------------------- */
/* The Gantt view stops writing inline colours and sets these classes instead. The core theme still forces
   white label text, 2px padding, .85em text and a radius with !important, so those four need !important here. */
.gantt-panel .vis-item.vis-range.sh-bar {
  height: 22px; box-sizing: border-box;
  background-color: var(--state-primary-bg); border: 1px solid var(--state-primary-border);
  border-radius: 4px !important; /* core: .vis-item.vis-range { border-radius: var(--border-radius) !important } */
  color: var(--text-color); font-size: var(--12px);
  transition: border-color .15s ease-in-out;
}
.gantt-panel .vis-item.vis-range.sh-bar:hover { border-color: var(--brand-primary); }
.gantt-panel .vis-item.vis-range.sh-bar .vis-item-overflow { overflow: hidden; }
/* 20px line box inside the 22px bar (1px borders) centres the label vertically. */
.gantt-panel .vis-item.vis-range.sh-bar .vis-item-content {
  display: block; line-height: 20px; box-sizing: border-box;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-color) !important; /* core: white label text */
  padding: 0 7px !important; /* core: 2px on every side */
  font-size: var(--12px) !important; /* core: .85em */
}
.gantt-panel .vis-item.vis-range.sh-bar .vis-item-content > .fas { margin-right: 5px; font-size: 9px; color: #a8670f; }
.gantt-panel .vis-item.vis-range.sh-bar.sh-with-client { background-color: rgba(228, 161, 51, .14); border-color: #e4a133; }
.gantt-panel .vis-item.vis-range.sh-bar.sh-with-client:hover { border-color: #c98a1f; }
html.dark .gantt-panel .vis-item.vis-range.sh-bar.sh-with-client { background-color: rgba(228, 161, 51, .18); }
html.dark .gantt-panel .vis-item.vis-range.sh-bar .vis-item-content > .fas { color: #e4a133; }
.gantt-panel .vis-item.vis-range.sh-bar.vis-selected { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary); }
.gantt-panel .vis-item.vis-range.sh-bar.sh-with-client.vis-selected { border-color: #e4a133; box-shadow: 0 0 0 1px #e4a133; }
/* Group span is a 6px rounded bar. */
.gantt-panel .vis-item.vis-range.sh-span { height: 6px; border: 0; border-radius: 3px; background-color: var(--state-info-border); }
/* Milestone is an 11px navy diamond centred on its day. The project module draws milestones as vis
   points (not ranges), so the diamond is the point's own dot; the range rules below are kept for
   any milestone that arrives as a range. */
.gantt-panel .vis-item.vis-point.sh-milestone { background: transparent; border: 0; }
.gantt-panel .vis-item.vis-point.sh-milestone .vis-item-content { display: none; }
.gantt-panel .vis-item.vis-point.sh-milestone .vis-dot {
  width: 11px; height: 11px; box-sizing: border-box;
  border: 0; border-radius: 2px; background: var(--navbar-bg); transform: rotate(45deg);
}
.gantt-panel .vis-item.vis-range.sh-milestone { background: transparent; border: 0; overflow: visible; }
html.dark .gantt-panel .vis-item.vis-point.sh-milestone .vis-dot { background: #6aa6e3; } /* navy vanishes on the dark panel, same as the Today line */
.gantt-panel .vis-item.vis-range.sh-milestone .vis-item-overflow { visibility: hidden; }
.gantt-panel .vis-item.vis-range.sh-milestone::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px;
  background: var(--navbar-bg); border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg);
}
/* The project module draws dependencies with inline SVG styles, so overriding them needs !important. */
.gantt-panel .vis-center svg path[data-pair] { stroke: var(--btn-default-border) !important; stroke-width: 1px !important; /* inline stroke and width */ }
.gantt-panel .vis-center svg marker#arrow-head path { fill: var(--btn-default-border) !important; /* inline fill */ }
/* Today: a 1px #2a3349 line that starts under the axis, with a tag at its top (the view sets data-label to the
   translated text). Core paints the bar red at 90% opacity with !important, and vis sets top/height inline. */
.gantt-panel .vis-current-time {
  width: 1px; z-index: 1;
  background-color: #2a3349 !important; /* core: var(--brand-danger) !important */
  opacity: 1 !important; /* core: .9, which washed the tag out to grey */
  top: var(--sh-gantt-axis-h, 44px) !important; /* vis: inline top:0, which ran the line up through the month header */
  height: calc(100% - var(--sh-gantt-axis-h, 44px)) !important; /* vis: inline height:100% */
}
.gantt-panel .vis-current-time[data-label]::after {
  content: attr(data-label); position: absolute; left: 0; top: 0; transform: translateX(-50%);
  padding: 0 6px; border-radius: 0 0 4px 4px; background: #2a3349;
  color: #fff; font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap;
}
html.dark .gantt-panel .vis-current-time { background-color: #6aa6e3 !important; /* same override as above */ }
html.dark .gantt-panel .vis-current-time[data-label]::after { background: #6aa6e3; color: #12141c; }

/* 9c.6 Phone: only the board panel padding changes; §9b and handoff-mobile own the rest (SPEC T7). */
@media (max-width: 767px) {
  body[data-navbar="side"] #main > .record > .board-record { padding: 8px; }
}

/* 9d. Give Plan a standalone toolbar and consistent group headers, without changing phone layouts.
   Section 9b makes the record and toolbar display:contents, so toolbar controls remain outer-grid
   items and #main::after paints their panel behind them. Unlike Board/Gantt, no group joins it. */
@media screen and (min-width: 768px) {
  /* Draw a fully rounded 48px panel, leaving 16px between it and both the record band and first group. */
  body[data-navbar="side"] #main:has(> .record > [data-role="group"])::after {
    content: "";
    grid-row: 2; grid-column: 1 / -1;
    align-self: stretch;
    height: 48px; box-sizing: border-box;
    margin: 16px 0;
    background: var(--panel-bg);
    border: 1px solid var(--panel-default-border);
    border-radius: 10px;
    box-shadow: var(--sh-band-shadow);
  }
  /* Center controls on the painted panel and raise their stacking contexts above sticky column headers. */
  body[data-navbar="side"] #main > .record:has(> [data-role="group"]) > .button-container.list-buttons-container > :is(.total-count, .settings-container, .pull-right, .catalyst-with-filter) {
    margin-top: 16px; margin-bottom: 16px;
    z-index: 20;
  }
  /* Override section 9b's more-specific filter/More selectors; raising only a menu cannot escape its parent. */
  body[data-navbar="side"] #main > .record:has(> [data-role="group"]) > .button-container.list-buttons-container > .btn-group.catalyst-with-filter,
  body[data-navbar="side"] #main > .record:has(> [data-role="group"]) > .button-container.list-buttons-container > .pull-right:not(.total-count):not(.settings-container) {
    z-index: 20;
  }
  /* Reserve the Fields button's entire hit area plus an 8px gap, rather than treating its caret as part of the count. */
  body[data-navbar="side"] #main > .record:has(> [data-role="group"]) > .button-container.list-buttons-container > .total-count {
    margin-right: calc(54px + var(--sh-control-h) + 8px) !important;
    font-size: 12px; color: var(--text-muted-color);
  }
  /* Place Fields before the divider and More; its offset also anchors the count's calculation above. */
  body[data-navbar="side"] #main > .record:has(> [data-role="group"]) > .button-container.list-buttons-container > .settings-container {
    margin-right: 54px !important;
  }
  /* Inset More by 10px and make it the positioning anchor for the separator. */
  body[data-navbar="side"] #main > .record:has(> [data-role="group"]) > .button-container.list-buttons-container > .pull-right:not(.total-count):not(.settings-container) {
    position: relative; margin-right: 10px;
  }
  /* Separate More from count/Fields with a centered, noninteractive 1px divider. */
  body[data-navbar="side"] #main > .record:has(> [data-role="group"]) > .button-container.list-buttons-container > .pull-right:not(.total-count):not(.settings-container)::before {
    content: ""; position: absolute; left: -8px; top: 6px;
    width: 1px; height: 20px; background: var(--default-border-color);
  }
  /* Keep toolbar actions quiet ghost controls while preserving section 9b's shared control height. */
  body[data-navbar="side"] #main > .record:has(> [data-role="group"]) > .button-container.list-buttons-container .btn.btn-text {
    height: var(--sh-control-h); border: 0; border-radius: 6px;
    background: transparent; box-shadow: none;
  }
  /* Give hovered and open controls the same theme-aware feedback, without changing their geometry. */
  body[data-navbar="side"] #main > .record:has(> [data-role="group"]) > .button-container.list-buttons-container .btn.btn-text:hover,
  body[data-navbar="side"] #main > .record:has(> [data-role="group"]) > .button-container.list-buttons-container .open > .btn.btn-text {
    background: var(--btn-default-hover-bg);
  }
  /* Keep every group a separate panel with the same spacing, including the first group. */
  body[data-navbar="side"] #main > .record > [data-role="group"] > .panel {
    margin-bottom: 16px;
  }
  /* Align each group title and its actions in a transparent 44px header with balanced 10px edge insets. */
  body[data-navbar="side"] #main > .record > [data-role="group"] > .panel > .panel-heading {
    display: flex; align-items: center;
    height: 44px; min-height: 44px; padding: 0 10px;
    background: transparent; color: var(--text-color);
    border-bottom-color: var(--default-border-color);
  }
  /* Remove the inherited gap above column labels; retain side/bottom padding balanced by the list's margins. */
  body[data-navbar="side"] #main > .record > [data-role="group"] > .panel > .panel-body {
    padding-top: 0;
  }
  /* Make a collapsed panel end at its rounded header, without the expanded list's divider. */
  body[data-navbar="side"] #main > .record > [data-role="group"] > .panel > .panel-heading:has([data-action="expandGroup"]) {
    border-bottom: 0;
    border-bottom-left-radius: var(--panel-border-radius);
    border-bottom-right-radius: var(--panel-border-radius);
  }
  /* Remove the collapsed body's padding strip; expandGroup distinguishes collapse from temporary loading. */
  body[data-navbar="side"] #main > .record > [data-role="group"] > .panel > .panel-heading:has([data-action="expandGroup"]) + .panel-body {
    display: none;
  }
  /* Keep the chevron inside the header inset by cancelling the core float layout's negative left margin. */
  body[data-navbar="side"] #main > .record > [data-role="group"] .panel-heading > .panel-actions-container-left {
    order: 0; flex: 0 0 20px; margin: 0;
  }
  /* Reserve a stable 20px chevron slot with a 30px click target, without pushing the title on hover. */
  body[data-navbar="side"] #main > .record > [data-role="group"] .panel-actions-container-left > .btn {
    display: flex; align-items: center; justify-content: flex-start;
    width: 20px !important; height: 30px; padding: 0;
    color: var(--text-muted-color); background: transparent; border: 0;
  }
  /* Keep the disclosure glyph small and muted while retaining the larger button hit area. */
  body[data-navbar="side"] #main > .record > [data-role="group"] .panel-actions-container-left .fas {
    font-size: 10px;
  }
  /* Give the title remaining width between the chevron and actions, with consistent 14px/500 type. */
  body[data-navbar="side"] #main > .record > [data-role="group"] .panel-heading > .panel-title {
    order: 1; flex: 1; min-width: 0; padding: 0; margin: 0;
    font-size: 14px; font-weight: 500; line-height: 20px;
  }
  /* Truncate long group names rather than allowing them to overlap the right-side controls. */
  body[data-navbar="side"] #main > .record > [data-role="group"] .panel-title > [data-action="refreshGroup"] {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Paint an 8px square in the group's inline color, avoiding the font glyph's baseline and positioning offsets. */
  body[data-navbar="side"] #main > .record > [data-role="group"] .panel-title .color-icon {
    display: inline-block; width: 8px; height: 8px; font-size: 0;
    background: currentColor; vertical-align: middle; position: static;
  }
  /* Suppress Font Awesome's square glyph because the element background now draws the marker. */
  body[data-navbar="side"] #main > .record > [data-role="group"] .panel-title .color-icon::before { content: none; }
  /* Align count, add, and More without the core -10px right offset that defeats the header inset. */
  body[data-navbar="side"] #main > .record > [data-role="group"] .panel-heading > .panel-actions-container {
    order: 2; display: flex; align-items: center; gap: 4px;
    position: relative; right: 0; float: none; margin: 0 0 0 10px;
  }
  /* Keep the filtered group total visually secondary and separated from its icon actions. */
  body[data-navbar="side"] #main > .record > [data-role="group"] [data-role="taskCount"] {
    padding: 0 8px; font-size: 12px; color: var(--text-muted-color);
  }
  /* Give add and More equal 30px ghost hit areas with no inherited border or attached-button rounding. */
  body[data-navbar="side"] #main > .record > [data-role="group"] [data-role="groupButtons"] > .btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; min-width: 30px; height: 30px; padding: 0; margin: 0;
    border: 0; border-radius: 6px; background: transparent;
    box-shadow: none; color: var(--text-muted-color);
  }
  /* Use the same quiet hover/open feedback for group actions as for the toolbar controls. */
  body[data-navbar="side"] #main > .record > [data-role="group"] [data-role="groupButtons"] > .btn:hover,
  body[data-navbar="side"] #main > .record > [data-role="group"] [data-role="groupButtons"].open > .dropdown-toggle {
    background: var(--btn-default-hover-bg);
  }
  /* Keep column labels readable at 13px inside a compact 32px row, without adding a gap above the table. */
  body[data-navbar="side"] #main > .record > [data-role="group"] .list > table.table > thead > tr > th {
    height: 32px; padding: 4px 8px;
    font-size: 13px; font-weight: 400; color: var(--text-muted-color);
    border-radius: 0; border-bottom: 1px solid var(--default-border-color);
  }
  /* Keep task rows at 36px with lighter theme-aware separators, independent of group/header sizing. */
  body[data-navbar="side"] #main > .record > [data-role="group"] .list > table.table > tbody > tr.list-row > td {
    height: 36px; padding: 4px 8px;
    border-top: 1px solid var(--default-border-color);
  }
  /* Highlight the full hovered task row using the existing table-hover theme token. */
  body[data-navbar="side"] #main > .record > [data-role="group"] .list > table.table > tbody > tr.list-row:hover {
    background: var(--table-row-hover-bg);
  }
  /* Follow section 9b when its wrapped record header moves the toolbar from grid row 2 to row 3. */
  @media (max-width: 1100px) {
    body[data-navbar="side"] #main:has(> .record > [data-role="group"])::after { grid-row: 3; }
  }
}

/* ── 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;
  /* core floats the label and reserves room for its floated pencil, which truncates short-valued
     cells' labels; the pencil is overlaid below instead, and core's rules here are more specific */
  float: none !important;
  max-width: none !important;
  margin: 0 0 var(--2px);
  padding: 0;
  font-size: var(--13px);
  font-weight: 400;
  line-height: var(--18px);
  /* the tooltip icon would otherwise make labelled cells taller than the rest of the strip */
  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; }
/* edit-mode controls draw dropdowns and validation messages outside their own box */
.sh-key-fields .sh-key-field > .field[data-mode="edit"] { overflow: visible; }

/* Keep open key-field menus above the detail record and size Stage's menu to its options and padding.
  The strip's containment and transformed groups otherwise put menus behind Name, while
  Selectize sizes the Stage menu to its current value, making short values too narrow. */
body[data-navbar="side"] #main .record > .detail > .sh-key-fields:has(.selectize-input.dropdown-active) {
  position: relative;
  z-index: 2;
}
.sh-key-fields > .sh-key-group:has(.selectize-input.dropdown-active) { position: relative; z-index: 1; }
.sh-key-fields .sh-key-field[data-name="column"] .selectize-dropdown {
  width: max-content !important;
  min-width: 100%;
  max-width: calc(100vw - 48px);
  white-space: normal;
  overflow-wrap: anywhere;
}

.sh-key-fields .sh-key-field { position: relative; }

/* Remove dynamically hidden strip cells entirely so mirrored labels and flex spacing do not remain visible. */
.sh-key-fields .sh-key-field.hidden-cell { display: none; }
/* Floated icons shrink a short-valued cell until its label truncates; overlay them on the label row instead. */
.sh-key-fields .sh-key-field > .inline-edit-link,
.sh-key-fields .sh-key-field > .inline-save-link,
.sh-key-fields .sh-key-field > .inline-cancel-link { position: absolute; float: none; top: 0; right: 0; margin: 0; }
.sh-key-fields .sh-key-field > .inline-save-link { right: 22px; }
.sh-key-fields .sh-key-field:has(> .inline-save-link) > .control-label { padding-right: 44px; }

/* ── 10a. Case key-field cells, Effort panel, assignment blocks ─────────────
   Detail-mode styling only; edit mode is core's. Cell selectors use the live
   field names (caseStatus, caseStatusWith, casePriority).                    */

.sh-key-fields .sh-key-field[data-name="caseStatus"] > .field,
.sh-key-fields .sh-key-field[data-name="caseStatusWith"] > .field { display: flex; flex-direction: column; gap: 4px; }
.sh-key-fields .sh-key-field .field[data-mode="edit"] .sh-picker-trigger { min-width: 180px; }
.sh-key-notice { margin-top: 4px; max-width: 260px; font-size: 12px; color: #a8670f; white-space: normal; text-wrap: pretty; }
.sh-key-notice > a { margin-left: 6px; color: var(--text-muted-color); cursor: pointer; }

/* Status */
.sh-status { display: inline-flex; align-items: center; gap: 10px; height: 30px; }
.sh-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--btn-primary-bg); }
.sh-status[data-stage="5"] .sh-status-dot { background: #5cc370; }
.sh-status[data-blocked] .sh-status-dot { background: #e16e90; }
.sh-status-label { font-weight: 500; }
.sh-status-stage { font-size: 13px; color: var(--text-muted-color); }
.sh-stage-strip { display: flex; gap: 3px; width: 100%; }
.sh-stage-strip > span { flex: 1; height: 4px; border-radius: 2px; background: var(--default-border-color); }
.sh-stage-strip > span.done { background: #5cc370; }
.sh-stage-strip > span.current { background: var(--btn-primary-bg); }
.sh-status[data-stage="5"] + .sh-stage-strip > span.current { background: #5cc370; }
.sh-status[data-blocked] + .sh-stage-strip > span.current { background: #e16e90; }

/* Currently With */
.sh-holder { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 6px; font-weight: 400; }
.sh-holder > .fas { font-size: 11px; }
.sh-holder[data-value="Catalyst"] { background: rgba(97,140,218,.1); color: #3b6fc9; }
.sh-holder[data-value="Client"] { background: rgba(228,161,51,.12); color: #a8670f; }
.sh-holder.sh-holder-list { gap: 6px; height: 24px; padding: 0 8px; font-size: 12px; white-space: nowrap; }
.sh-holder-since { font-size: 12px; color: var(--text-muted-color); }

/* Priority: the existing priority-matrix field (badge + summary), summary inline beside the badge in the strip */
.sh-key-fields .case-priority-field { display: inline-flex; align-items: center; gap: 10px; height: 30px; }
.sh-key-fields .case-priority-summary { margin: 0; font-size: 13px; color: var(--text-muted-color); }
.sh-key-fields .case-priority-field .label { font-size: 12px; font-weight: 600; line-height: 1.4; padding: 2px 7px; border-radius: 4px; }

/* Effort panel */
.panel-effort > .panel-heading { padding-bottom: 0; }
.panel-effort > .panel-body { padding-top: 4px; }
.sh-effort { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; align-items: start; }
.sh-effort .cell { margin: 0; min-width: 0; }

/* Assignment blocks */
.sh-assign { display: flex; flex-direction: column; gap: 10px; }
.sh-assign-block {
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px; border-radius: 6px;
    border: 1px solid var(--panel-default-border); background: transparent;
    transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
}
.sh-assign-block[data-side="Catalyst"].is-current { border-color: #618cda; background: rgba(97,140,218,.08); }
.sh-assign-block[data-side="Client"].is-current { border-color: #e4a133; background: rgba(228,161,51,.12); }
.sh-assign-head { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: 13px; color: var(--text-muted-color); }
.sh-assign-head > .control-label { flex: 1; margin: 0; }
.sh-assign-head .label { font-size: 12px; font-weight: 600; }
.sh-assign-head a.sh-handover { font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.sh-assign-head a.sh-handover > .fas { font-size: 11px; }
.sh-assign-since { font-size: 13px; color: var(--text-muted-color); }
/* Core positions the inline edit/save/cancel icons via .cell-scoped rules; these blocks are not a .cell,
   so park the icons at the block's bottom-right and leave room for them while editing. */
.sh-assign-block:has(.inline-save-link) { padding-bottom: 34px; }
.sh-assign-block .inline-edit-link,
.sh-assign-block .inline-save-link,
.sh-assign-block .inline-cancel-link { position: absolute; float: none; top: auto; bottom: 10px; margin: 0; }
.sh-assign-block .inline-edit-link,
.sh-assign-block .inline-cancel-link { right: 12px; color: var(--text-muted-color); }
.sh-assign-block .inline-edit-link:hover,
.sh-assign-block .inline-cancel-link:hover { color: var(--text-color); }
.sh-assign-block .inline-save-link { right: 34px; color: var(--link-color); }

/* Edit-mode pickers (Status, Currently With): a select-like trigger that opens a popover menu */
.sh-picker-trigger {
    display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box;
    height: 30px; padding: 0 10px; border: 1px solid var(--default-border-color); border-radius: 6px;
    background: var(--panel-bg); cursor: pointer; max-width: 100%;
}
.sh-picker-trigger:focus-visible { outline: 2px solid var(--link-color); outline-offset: 1px; }
.sh-picker-trigger .sh-status { height: auto; }
.sh-picker-trigger.sh-holder { padding: 0 10px; }
.sh-picker-trigger.sh-holder[data-value="Catalyst"] { border-color: #618cda; }
.sh-picker-trigger.sh-holder[data-value="Client"] { border-color: #e4a133; }
.sh-picker-chevron { margin-left: auto; font-size: 10px; color: var(--text-muted-color); }
.sh-key-field.has-error .sh-picker-trigger { border-color: var(--brand-danger); }

.sh-picker-popover { max-width: none; }
.sh-picker-popover .popover-content { padding: 6px; }
.sh-picker-item { display: flex; align-items: flex-start; gap: 10px; min-width: 220px; padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.sh-picker-item:hover, .sh-picker-item:focus { background: var(--btn-default-hover-bg); }
.sh-picker-item.is-selected { background: var(--state-primary-bg, rgba(97,140,218,.12)); }
.sh-picker-item > .fas { margin-top: 3px; width: 14px; text-align: center; color: var(--text-muted-color); }
.sh-picker-item-label { font-weight: 500; }
.sh-picker-item-sub { font-size: 12px; color: var(--text-muted-color); }

/* Dark mode: the low-alpha fills carry over; only the ink colours need lifting for contrast. */
html.dark .sh-holder[data-value="Catalyst"] { color: #8fb0ee; }
html.dark .sh-holder[data-value="Client"] { color: #e4b361; }
html.dark .sh-key-notice { color: var(--state-warning-text); }


/* ── 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; }
}