/* crm-rail.css - the sidebar as an icon rail and the open group beside it
 * (owner, 2026-09-29, after studying respond.io). Drawn by crm-nav.js.
 *
 * crm-nav.js sets aside[data-crm-rail] to "wide" while the sidebar is open
 * and "narrow" while it is collapsed. Collapsed, the rail IS the sidebar: the
 * platform's column of row icons is put away and a press opens the sidebar on
 * that group. Loaded after brand-recolor.css so these win there.
 *
 *   rail      48px, a pale wash, one 36px button per group, 20px glyph
 *   open      the group shown beside it: lime with black ink
 *   rows      32px, 8px corners, 8px inside, the page you are on a pale lime
 *   heading   the open group's name as a small grey caption, nothing to fold
 *
 * No coloured edge on anything (owner): the current row is a tint, never a bar.
 */
aside[data-crm-rail] {
  --rail-w: 48px;
  --rail-bg: #f7f8f4;
  --rail-line: rgba(53, 60, 69, .12);
  --rail-ink: #55606c;
  --rail-hover: rgba(29, 27, 28, .06);
  --rail-pick: #f3fbd0;
  --rail-caption: #626f7f;
}

aside[data-crm-rail="wide"] {
  position: relative;
  padding-inline-start: var(--rail-w) !important;
}

:root.dark aside[data-crm-rail],
.dark aside[data-crm-rail] {
  --rail-bg: #121417;
  --rail-line: #2c3138;
  --rail-ink: #9aa3af;
  --rail-hover: rgba(255, 255, 255, .06);
  --rail-pick: rgba(212, 251, 8, .10);
  --rail-caption: #9aa3af;
}

.crm-navrail {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 2;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  background: var(--rail-bg);
  border-inline-end: 1px solid var(--rail-line);
  box-sizing: border-box;
}

.crm-navrail__btn {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--rail-ink);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.crm-navrail__btn > i {
  display: block;
  font-size: 18px;
  line-height: 1;
}

.crm-navrail__btn:hover { background: var(--rail-hover); color: #1d1b1c; }
.dark .crm-navrail__btn:hover { color: #e6e9e2; }

/* The page on screen is in this group, but another group is open beside it. */
.crm-navrail__btn.is-here { color: #1d1b1c; }
.dark .crm-navrail__btn.is-here { color: #e6e9e2; }

.crm-navrail__btn.is-open,
.dark .crm-navrail__btn.is-open { background: #d4fb08; color: #000; }

.crm-navrail__btn:focus-visible { outline: 2px solid #1d1b1c; outline-offset: 1px; }

/* Settings sits at the foot of the rail, where respond.io keeps it. */
.crm-navrail__btn[data-group="setup"] { margin-top: auto; }

/* ---- the panel beside it ---- */

/* Only the open group's heading shows, as a caption over its rows. */
aside[data-crm-rail="wide"] .crm-nav-head { margin: 6px 0 2px; }
aside[data-crm-rail="wide"] .crm-nav-head.is-shut { display: none !important; }
aside[data-crm-rail="wide"] .crm-nav-headrow { pointer-events: none; padding: 4px 8px; }
aside[data-crm-rail="wide"] .crm-nav-folder,
aside[data-crm-rail="wide"] .crm-nav-caret { display: none; }
aside[data-crm-rail="wide"] .crm-nav-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--rail-caption);
  opacity: 1;
}

/* No indent: the group is already said by the rail. */
aside[data-crm-rail="wide"] .crm-nav-in { padding-inline-start: 0; }

aside[data-crm-rail="wide"] nav ul li > div > :is(div[role="button"], a[name]) {
  min-height: 32px !important;
  height: auto !important;
  gap: 8px !important;
  border-radius: 8px !important;
  padding-block: 6px !important;
  padding-inline: 8px !important;
}

aside[data-crm-rail="wide"] nav ul li > div > :is(div[role="button"], a[name]):hover {
  background-color: var(--rail-hover) !important;
}

aside[data-crm-rail="wide"] nav ul li:not(:has(> ul.sidebar-group-children)) > div > div[role="button"]:is(
  [class~="text-n-brand"], [class~="bg-n-brand"], [class~="active"]
),
aside[data-crm-rail="wide"] nav ul li > div > a.crm-nav-here {
  background-color: var(--rail-pick) !important;
  box-shadow: none !important;
}

/* ---- collapsed: the rail alone ---- */

/* The platform's twenty row icons give way to the seven group buttons, which
   take the list's place between the top (account, search) and the profile. */
aside[data-crm-rail="narrow"] > nav { display: none !important; }
aside[data-crm-rail="narrow"] > section:last-of-type { order: 2; }
aside[data-crm-rail="narrow"] > .crm-navrail {
  position: static;
  order: 1;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 0 12px;
  background: transparent;
  border: 0;
}

/* Nothing is open beside it, so the lime goes to the group of the page on screen. */
aside[data-crm-rail="narrow"] .crm-navrail__btn.is-here { background: #d4fb08; color: #000; }

/* ---- the owner's groups (2026-09-29) ---- */

/* A platform row that only wraps what its group already names (Conversations
   in Conversations, Settings in Settings) is put away, and its rows stand in
   the group directly, all of them, at the group's own indent. crm-nav.js marks
   it data-crm-flat. The platform's inner sections (Channels, Labels, Teams)
   keep their own fold. */
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat] > div:first-child { display: none !important; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat] > ul.sidebar-group-children { display: grid !important; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat] > ul.sidebar-group-children > li {
  display: block !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat] > ul.sidebar-group-children > li::before,
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat] > ul.sidebar-group-children > li::after { display: none !important; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat] > ul.sidebar-group-children > :is(button, ul, div) { margin-inline: 0 !important; }
/* A caption inside the list ("Tagged with" in Contacts) is not a fold of its
   own: it and its rows show with the rest. A section with a button (Channels,
   Labels, Teams) keeps opening and closing as the platform draws it. */
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat] > ul.sidebar-group-children > div { display: flex !important; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat] > ul.sidebar-group-children > div + ul li { display: block !important; }
/* The platform now draws a section's heading as a button (Channels, Labels),
   and hides it and its rows whenever the WRAPPER group counts as closed - which
   happens every time another group opens, and the wrapper's own heading is put
   away above, so nothing could open it again (owner, 2026-09-29: "Channels and
   Labels don't show"). The heading always shows; its rows follow the section's
   own arrow (aria-expanded), so folding Labels still folds Labels. */
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat] > ul.sidebar-group-children > button[aria-expanded] { display: flex !important; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat] > ul.sidebar-group-children > button[aria-expanded="true"] + ul li:not([data-crm-label-tree="child"].is-hidden) { display: block !important; }

/* Moved to AI and Automations (crm-nav.js OWN rows): not listed twice. */
aside[data-crm-rail] nav ul > li[data-crm-flat] > ul.sidebar-group-children > li:is(
  [name="Settings Automation"], [name="Settings Macros"], [name="Settings Canned Responses"], [name="Settings Copilot"]
) { display: none !important; }

/* The platform's own "My Inbox" row: on accounts where it draws one (account
   25, owner 2026-10-03: "My Inbox" twice), Workspace's row of ours already is
   it (crm-nav.js myinbox). */
aside[data-crm-rail] nav ul > li:not([data-crm-nav]):has(> a[name="Inbox"][href$="/inbox-view"], > div > a[name="Inbox"][href$="/inbox-view"]) { display: none !important; }

/* Our rows' icons: the platform's 16px. */
.crm-nav-ix { font-size: 16px; line-height: 1; flex: 0 0 auto; }

/* ---- the account at the foot of the rail, as respond.io keeps it ---- */

/* The platform's profile bar under the list becomes the avatar alone, at the
   bottom of the rail; its button, and the menu it opens, are the platform's. */
aside[data-crm-rail="wide"] > .crm-navrail { padding-bottom: 56px; }
aside[data-crm-rail="wide"] > section:last-of-type {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  z-index: 3;
  width: var(--rail-w);
  padding: 8px 6px 10px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
aside[data-crm-rail] > section:last-of-type button:has(> span + div.min-w-0) {
  justify-content: center;
  padding: 4px !important;
}
aside[data-crm-rail] > section:last-of-type button > div.min-w-0 { display: none !important; }

/* A section's rows are all shown (owner, 2026-09-29): the platform caps
   Channels, Labels and "Tagged with" at 14rem with a scroll inside a scroll
   and a fade over the last rows, so a long list looked cut off one time and
   whole the next. The sidebar scrolls as one list instead. */
aside[data-crm-rail] nav ul.reset-base > div[class*="max-h-"] {
  max-height: none !important;
  overflow: visible !important;
}
aside[data-crm-rail] nav ul.reset-base > div[class~="absolute"][class*="bg-gradient-to-t"] { display: none !important; }

/* ---- Settings in groups under small captions, as respond.io lists them
   (owner, 2026-09-29). Every row stays; the grid is only reordered, and each
   group's first row carries its caption. Pure CSS: the platform's list is
   never touched, so Vue redraws cannot lose a caption. ---- */
:where(aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li) { order: 90; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Account Settings"] { order: 1; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Data"] { order: 2; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Audit Logs"] { order: 3; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Agents"] { order: 11; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Teams"] { order: 12; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Agent Assignment"] { order: 13; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Custom Roles"] { order: 14; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Chat Rooms"] { order: 15; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Inboxes"] { order: 21; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Labels"] { order: 22; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Custom Attributes"] { order: 23; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Sla"] { order: 24; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Conversation Workflow"] { order: 25; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Captain"] { order: 31; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings AI Assist"] { order: 32; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings MCP Server"] { order: 33; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Agent Bots"] { order: 34; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-group="setup"] > ul > li[name="Settings Integrations"] { order: 41; }

aside[data-crm-rail="wide"] nav ul > li[data-crm-flat][data-crm-group="setup"] > ul.sidebar-group-children > li:is(
  [name="Settings Account Settings"], [name="Settings Agents"], [name="Settings Inboxes"], [name="Settings Captain"], [name="Settings Integrations"]
)::before {
  display: block !important;
  position: static !important;
  content: var(--set-cap);
  padding: 4px 8px 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  color: var(--rail-caption);
  background: none !important;
  width: auto !important;
  height: auto !important;
}
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat][data-crm-group="setup"] > ul.sidebar-group-children > li:is(
  [name="Settings Agents"], [name="Settings Inboxes"], [name="Settings Captain"], [name="Settings Integrations"]
)::before { margin-top: 10px; }
aside[data-crm-rail] li[name="Settings Account Settings"] { --set-cap: "Account"; }
aside[data-crm-rail] li[name="Settings Agents"] { --set-cap: "Team"; }
aside[data-crm-rail] li[name="Settings Inboxes"] { --set-cap: "Channels & conversations"; }
aside[data-crm-rail] li[name="Settings Captain"] { --set-cap: "AI"; }
aside[data-crm-rail] li[name="Settings Integrations"] { --set-cap: "Apps"; }
[dir="rtl"] aside[data-crm-rail] li[name="Settings Account Settings"] { --set-cap: "الحساب"; }
[dir="rtl"] aside[data-crm-rail] li[name="Settings Agents"] { --set-cap: "الفريق"; }
[dir="rtl"] aside[data-crm-rail] li[name="Settings Inboxes"] { --set-cap: "القنوات والمحادثات"; }
[dir="rtl"] aside[data-crm-rail] li[name="Settings Captain"] { --set-cap: "الذكاء الاصطناعي"; }
[dir="rtl"] aside[data-crm-rail] li[name="Settings Integrations"] { --set-cap: "التطبيقات"; }

/* A flat section whose rows need their name (Campaigns over WhatsApp and API
   Channel, owner 2026-09-30) keeps the platform's own heading row: the same
   icon, font and size as the rows beside it. crm-nav.js marks it
   data-crm-caption.
   IT FOLDS (owner, 2026-10-02: "Campaigns with a collapse arrow; open it and
   WhatsApp shows"): the platform's own arrow is put away and ours
   (.crm-cap-caret, label-tree.js) opens and shuts the rows, which hang one
   step in under it. Shut = data-crm-cap-shut on the group. */
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat][data-crm-caption] > div:first-child { display: block !important; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat][data-crm-caption] > div:first-child [role="button"] {
  cursor: pointer;
  background: transparent !important;
}
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat][data-crm-caption] > div:first-child [class*="chevron"] { display: none !important; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat][data-crm-caption] > ul.sidebar-group-children > li { padding-inline-start: 14px !important; }
aside[data-crm-rail="wide"] nav ul > li[data-crm-flat][data-crm-caption][data-crm-cap-shut] > ul.sidebar-group-children { display: none !important; }

/* ---- idle and current rows, as respond.io draws them (owner, 2026-09-30) ----
   A row for a page you are not on is a faded ink; the page you are on is full
   ink, its word a little heavier and larger and its icon a little larger. The
   colour eases like every colour here; the size steps, and the icon grows by
   scale so the words beside it never move. Section headings (Channels,
   Labels) are buttons and captions, not rows, and keep their own grey.
   `html body` outranks the copy of the old ink rule the database injects after
   every stylesheet (dashboard_scripts), which would otherwise win the tie. */
aside[data-crm-rail] { --rail-row: #626f7f; --rail-row-on: #282e34; }
:root.dark aside[data-crm-rail],
.dark aside[data-crm-rail] { --rail-row: #9aa3af; --rail-row-on: #edefeb; }

html body aside[data-crm-rail="wide"] nav :is(li > div > div[role="button"], li > div > a[name], li > a) {
  color: var(--rail-row) !important;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1) !important;
}
html body aside[data-crm-rail="wide"] nav :is(li > div > div[role="button"], li > div > a[name], li > a) [class*="text-n-slate"] { color: inherit !important; }

/* :root, not html: the idle rule above counts its :is() at the heaviest row
   shape, so the current row needs the extra weight to take the full ink. */
:root body aside[data-crm-rail="wide"] nav li:not(:has(> ul.sidebar-group-children)) > div > div[role="button"]:is([class~="text-n-brand"], [class~="bg-n-brand"], [class~="active"]),
:root body aside[data-crm-rail="wide"] nav li > div > a.crm-nav-here,
:root body aside[data-crm-rail="wide"] nav li > a.active {
  color: var(--rail-row-on) !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
}
html body aside[data-crm-rail="wide"] nav :is(
  li:not(:has(> ul.sidebar-group-children)) > div > div[role="button"]:is([class~="text-n-brand"], [class~="bg-n-brand"], [class~="active"]),
  li > div > a.crm-nav-here,
  li > a.active
) :is(.text-sm, [class*="font-medium"]) { font-size: inherit !important; font-weight: inherit !important; }
html body aside[data-crm-rail="wide"] nav :is(
  li:not(:has(> ul.sidebar-group-children)) > div > div[role="button"]:is([class~="text-n-brand"], [class~="bg-n-brand"], [class~="active"]),
  li > div > a.crm-nav-here,
  li > a.active
) :is([class^="i-"], [class*=" i-"], .fi) { transform: scale(1.125); }