/* SIDEBAR SECTION COLOURS (design option B, Oct 2026)

   Every section of the side menu has its own colour, so you can find
   Accounts, Purchase, HR, Contracting... at a glance instead of reading
   every line. The section title becomes a coloured label, and each
   first-level icon under it sits in a tile of the same colour.

   How it is wired: each <li class="menu-title"> in
   components/back/layouts/sidebar.php carries one colour class (sec-green,
   sec-orange...). The colour variables are set on that title and on the
   <li> right after it (the section's items), so both pick them up.

   Only for the light sidebars (the default, "light" and "sidebar2") in the
   light theme. The dark and coloured sidebar themes keep their own look.

   Text colours were checked against their tints: every pair is above the
   4.5:1 contrast needed for small text. */

.sidebar .sidebar-menu li.menu-title.sec-indigo, .sidebar .sidebar-menu li.menu-title.sec-indigo + li { --sec-c: #4338ca; --sec-t: #e0e7ff; }
.sidebar .sidebar-menu li.menu-title.sec-green,  .sidebar .sidebar-menu li.menu-title.sec-green + li  { --sec-c: #166534; --sec-t: #dcfce7; }
.sidebar .sidebar-menu li.menu-title.sec-teal,   .sidebar .sidebar-menu li.menu-title.sec-teal + li   { --sec-c: #0f766e; --sec-t: #ccfbf1; }
.sidebar .sidebar-menu li.menu-title.sec-orange, .sidebar .sidebar-menu li.menu-title.sec-orange + li { --sec-c: #c2410c; --sec-t: #ffedd5; }
.sidebar .sidebar-menu li.menu-title.sec-amber,  .sidebar .sidebar-menu li.menu-title.sec-amber + li  { --sec-c: #92400e; --sec-t: #fef3c7; }
.sidebar .sidebar-menu li.menu-title.sec-pink,   .sidebar .sidebar-menu li.menu-title.sec-pink + li   { --sec-c: #be185d; --sec-t: #fce7f3; }
.sidebar .sidebar-menu li.menu-title.sec-blue,   .sidebar .sidebar-menu li.menu-title.sec-blue + li   { --sec-c: #1d4ed8; --sec-t: #dbeafe; }
.sidebar .sidebar-menu li.menu-title.sec-purple, .sidebar .sidebar-menu li.menu-title.sec-purple + li { --sec-c: #7e22ce; --sec-t: #f3e8ff; }
.sidebar .sidebar-menu li.menu-title.sec-cyan,   .sidebar .sidebar-menu li.menu-title.sec-cyan + li   { --sec-c: #0e7490; --sec-t: #cffafe; }
.sidebar .sidebar-menu li.menu-title.sec-red,    .sidebar .sidebar-menu li.menu-title.sec-red + li    { --sec-c: #b91c1c; --sec-t: #fee2e2; }
.sidebar .sidebar-menu li.menu-title.sec-slate,  .sidebar .sidebar-menu li.menu-title.sec-slate + li  { --sec-c: #334155; --sec-t: #e2e8f0; }
.sidebar .sidebar-menu li.menu-title.sec-gray,   .sidebar .sidebar-menu li.menu-title.sec-gray + li   { --sec-c: #4b5563; --sec-t: #e5e7eb; }

/* Section title -> coloured label */
html:not([data-bs-theme=dark]):is(:not([data-sidebar]), [data-sidebar=light], [data-sidebar=sidebar2]):not([data-sidebarbg])
  .sidebar .sidebar-menu > ul li.menu-title[class*="sec-"] > span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sec-t);
  color: var(--sec-c);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

/* First-level icons under the section -> coloured tile */
html:not([data-bs-theme=dark]):is(:not([data-sidebar]), [data-sidebar=light], [data-sidebar=sidebar2]):not([data-sidebarbg])
  .sidebar .sidebar-menu > ul li.menu-title[class*="sec-"] + li > ul > li > a > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 8px;
  background: var(--sec-t);
  color: var(--sec-c);
  font-size: 15px;
}

/* Long names ("Accounts Receivable", "Material Management") ran under the
   dropdown arrow once the icon became a tile: the theme places the arrow
   absolutely, 7px from the right, 16px wide, and gave the text no room for
   it. Keep 28px clear on the right and let a name that still does not fit
   end in "..." instead of overlapping the arrow. */
html:not([data-bs-theme=dark]):is(:not([data-sidebar]), [data-sidebar=light], [data-sidebar=sidebar2]):not([data-sidebarbg])
  .sidebar .sidebar-menu > ul li.menu-title[class*="sec-"] + li > ul > li > a {
  padding-right: 28px;
  min-width: 0;
}
html:not([data-bs-theme=dark]):is(:not([data-sidebar]), [data-sidebar=light], [data-sidebar=sidebar2]):not([data-sidebarbg])
  .sidebar .sidebar-menu > ul li.menu-title[class*="sec-"] + li > ul > li > a > span:not(.menu-arrow) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 10px;
}

/* Collapsed (mini) sidebar: the theme hides titles there; keep the label hidden too */
html .mini-sidebar:not(.expand-menu) .sidebar .sidebar-menu > ul li.menu-title[class*="sec-"] > span {
  display: none;
}