/* =========================================================
   industrio.online – INDUSTRIAL UI v2 (redesign 2026-07)
   Drupal 11 + Bootstrap Barrio (Bootstrap 5) + Commerce
   DESIGN SYSTEM:
   - Single accent: Signal Orange #FF7A00 (no blue, no red)
   - Cold neutrals (steel/graphite), sharp edges
   - Display font (Bahnschrift/Barlow) for headings/nav/buttons
   - Mono ONLY for SKU, codes, prices
   - Admin (Claro) untouched
========================================================= */
/* =========================================================
   0) FRONTEND SCOPE + TOKENS
========================================================= */
body:not(.path-admin):not(.claro){
  --td-accent: #FF7A00;
  --td-accent-2: #E56700;
  --td-accent-soft: rgba(255,122,0,0.08);
  --td-focus: 0 0 0 3px rgba(255,122,0,0.30);
  --td-gray-950: #0D0F13;
  --td-gray-900: #16191F;
  --td-gray-850: #0D0F13;
  --td-steel: #20242C;
  --td-bg: #ffffff;
  --td-surface: #ffffff;
  --td-surface-2: #F5F6F8;
  --td-text: #2A2F38;
  --td-text-strong: #1B1F26;
  --td-text-muted: #7A828E;
  --td-text-inv: rgba(255,255,255,0.87);
  --td-text-inv-strong: #ffffff;
  --td-text-inv-muted: #9AA1AB;
  --td-border: #E4E7EB;
  --td-border-soft: #EEF0F3;
  --td-border-strong: #C9CED6;
  --td-border-inv: #2A2F37;
  --td-radius: 0px;
  --td-radius-sm: 0px;
  --td-radius-xs: 0px;
  --td-font-display: "Bahnschrift", "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --td-font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --td-font-mono: "Cascadia Code", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --td-font-size: 15.5px;
  --td-line-height: 1.6;
  --td-h1: 34px;
  --td-h2: 26px;
  --td-h3: 20px;
  --td-h4: 17px;
  --td-heading-weight: 700;
  --td-heading-letterspace: 0.01em;
  /* WIDE LAYOUT */
  --td-container-max: 1680px;
  --td-page-pad-x: 18px;
  --td-btn-height: 42px;
  --td-btn-radius: 0px;
  --td-topbar-bg: var(--td-gray-950);
  --td-mainbar-bg: var(--td-gray-900);
  --td-header-border: var(--td-border-inv);
  /* TABLE TOKENS */
  --td-table-font-family: var(--td-font-sans);
  --td-table-font-size: 14.5px;
  --td-table-line-height: 1.45;
  --td-table-bg: #ffffff;
  --td-table-header-bg: #F5F6F8;
  --td-table-zebra-bg: #FAFBFC;
  --td-table-hover-bg: #F1F3F5;
  --td-table-border: #E4E7EB;
  --td-table-header-border: #C9CED6;
  --td-table-text: #2A2F38;
  --td-table-header-text: #7A828E;
  --td-table-cell-pad-y: 0.6rem;
  --td-table-cell-pad-x: 0.75rem;
  --td-table-radius: 0px;
  --td-table-border-width: 1px;
  /* FOOTER TOKENS */
  --td-footer-cols: 4;
  --td-footer-gap-x: 34px;
  --td-footer-gap-y: 18px;
  --td-footer-pad-top: 32px;
  --td-footer-pad-bottom: 18px;
  --td-footer-heading-size: 13px;
  --td-footer-text-size: 14px;
  --td-footer-line: #2A2F37;
  /* SIDEBAR TOKENS */
  --td-sidebar-heading-size: 13px;
  --td-sidebar-link-size: 14.5px;
  --td-sidebar-sublink-size: 13.5px;
  --td-sidebar-link-pad-y: 8px;
  --td-sidebar-link-pad-x: 10px;
  --td-sidebar-indent: 14px;
  /* Bootstrap variables (frontend only) */
  --bs-body-font-family: var(--td-font-sans);
  --bs-body-font-size: var(--td-font-size);
  --bs-body-line-height: var(--td-line-height);
  --bs-body-color: var(--td-text);
  --bs-body-bg: var(--td-bg);
  --bs-primary: var(--td-accent);
  --bs-link-color: var(--td-text-strong);
  --bs-link-hover-color: var(--td-accent-2);
  --bs-border-color: var(--td-border);
  --bs-border-radius: 0;
}
/* =========================================================
   1) GLOBAL BASE (frontend)
========================================================= */
body:not(.path-admin):not(.claro){
  font-family: var(--td-font-sans);
  background: var(--td-bg);
  color: var(--td-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* focus – orange signal ring */
body:not(.path-admin):not(.claro) :focus-visible{
  outline: none;
  box-shadow: var(--td-focus);
}
/* =========================================================
   1b) WIDE LAYOUT
========================================================= */
body:not(.path-admin):not(.claro) .container,
body:not(.path-admin):not(.claro) .container-sm,
body:not(.path-admin):not(.claro) .container-md,
body:not(.path-admin):not(.claro) .container-lg,
body:not(.path-admin):not(.claro) .container-xl,
body:not(.path-admin):not(.claro) .container-xxl{
  max-width: var(--td-container-max) !important;
  padding-left: var(--td-page-pad-x) !important;
  padding-right: var(--td-page-pad-x) !important;
}
body:not(.path-admin):not(.claro) .container-fluid{
  padding-left: var(--td-page-pad-x) !important;
  padding-right: var(--td-page-pad-x) !important;
}
/* =========================================================
   1c) TYPOGRAPHY – display grotesk for headings
========================================================= */
body:not(.path-admin):not(.claro) h1,
body:not(.path-admin):not(.claro) h2,
body:not(.path-admin):not(.claro) h3,
body:not(.path-admin):not(.claro) h4,
body:not(.path-admin):not(.claro) h5,
body:not(.path-admin):not(.claro) h6{
  font-family: var(--td-font-display);
  font-weight: var(--td-heading-weight);
  letter-spacing: var(--td-heading-letterspace);
  color: var(--td-text-strong);
}
body:not(.path-admin):not(.claro) h1{ font-size: var(--td-h1); line-height: 1.12; }
body:not(.path-admin):not(.claro) h2{ font-size: var(--td-h2); line-height: 1.18; }
body:not(.path-admin):not(.claro) h3{ font-size: var(--td-h3); line-height: 1.25; }
body:not(.path-admin):not(.claro) h4{ font-size: var(--td-h4); line-height: 1.3; }
body:not(.path-admin):not(.claro) a{
  color: var(--td-text-strong);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
body:not(.path-admin):not(.claro) a:hover{
  color: var(--td-accent-2);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--td-accent);
}
/* code/kbd — the only place mono lives in content */
body:not(.path-admin):not(.claro) code,
body:not(.path-admin):not(.claro) pre,
body:not(.path-admin):not(.claro) kbd{
  font-family: var(--td-font-mono);
}
body:not(.path-admin):not(.claro) pre{
  background: var(--td-surface-2);
  border: 1px solid var(--td-border);
  padding: 14px;
  overflow: auto;
}
body:not(.path-admin):not(.claro) code{
  background: var(--td-accent-soft);
  border: 1px solid rgba(255,122,0,0.20);
  padding: 0 .35em;
  color: var(--td-accent-2);
}
/* =========================================================
   2) FORMS + BUTTONS
========================================================= */
body:not(.path-admin):not(.claro) .btn{
  min-height: var(--td-btn-height);
  border-radius: 0;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: var(--td-font-display);
  text-transform: uppercase;
  font-size: 13.5px;
}
body:not(.path-admin):not(.claro) .btn-primary{
  background: var(--td-accent);
  border-color: var(--td-accent);
  color: #16191F;
}
body:not(.path-admin):not(.claro) .btn-primary:hover,
body:not(.path-admin):not(.claro) .btn-primary:focus{
  background: var(--td-accent-2);
  border-color: var(--td-accent-2);
  color: #ffffff;
}
body:not(.path-admin):not(.claro) .btn-outline-primary{
  color: var(--td-accent-2);
  border-color: var(--td-accent);
  border-width: 1.5px;
}
body:not(.path-admin):not(.claro) .btn-outline-primary:hover{
  background: var(--td-accent-soft);
  color: var(--td-accent-2);
  border-color: var(--td-accent);
}
body:not(.path-admin):not(.claro) .form-control,
body:not(.path-admin):not(.claro) .form-select,
body:not(.path-admin):not(.claro) input,
body:not(.path-admin):not(.claro) textarea{
  border-radius: 0;
  border-color: var(--td-border-strong);
}
body:not(.path-admin):not(.claro) .form-control:focus,
body:not(.path-admin):not(.claro) .form-select:focus,
body:not(.path-admin):not(.claro) input:focus,
body:not(.path-admin):not(.claro) textarea:focus{
  border-color: var(--td-accent);
  box-shadow: var(--td-focus);
}
/* =========================================================
   3) HEADER
========================================================= */
body:not(.path-admin):not(.claro) #header{
  font-family: var(--td-font-display);
}
/* TOP BAR */
body:not(.path-admin):not(.claro) #navbar-top.navbar{
  background: var(--td-topbar-bg);
  border-bottom: 0;
  padding: 7px 0;
}
body:not(.path-admin):not(.claro) #navbar-top .region-secondary-menu{ width: 100%; margin: 0; }
body:not(.path-admin):not(.claro) #navbar-top .field__item p{
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 12px;
  line-height: 1.25;
  font-size: 12.5px;
  font-family: var(--td-font-mono);
  color: var(--td-text-inv-muted);
}
body:not(.path-admin):not(.claro) #navbar-top .field__item p a{
  color: var(--td-text-inv);
  font-weight: 500;
  text-decoration: none;
  padding: 2px 6px;
  border: 0 !important;
  background: transparent !important;
}
body:not(.path-admin):not(.claro) #navbar-top .field__item p a:hover{
  color: var(--td-accent);
  background: transparent !important;
  text-decoration: none;
}
@media (max-width: 576px){
  body:not(.path-admin):not(.claro) #navbar-top .field__item p{
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 0 2px;
  }
  body:not(.path-admin):not(.claro) #navbar-top .field__item p a{ white-space: nowrap; }
}
/* MAIN BAR – graphite + signal orange baseline */
body:not(.path-admin):not(.claro) #navbar-main.navbar{
  background: var(--td-mainbar-bg);
  border-bottom: 2px solid var(--td-accent);
  padding: 12px 0;
}
body:not(.path-admin):not(.claro) #navbar-main .navbar-brand img{ height: 40px; width: auto; }
body:not(.path-admin):not(.claro) #navbar-main .navbar-toggler{
  border: 1px solid var(--td-border-inv);
  border-radius: 0;
  padding: 8px 10px;
}
body:not(.path-admin):not(.claro) #navbar-main .navbar-toggler-icon{ filter: invert(1); opacity: 0.9; }
/* PRIMARY MENU */
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .navbar-nav{
  align-items: center;
  gap: 20px;
}
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link{
  color: #C9CED6 !important;
  font-family: var(--td-font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 15px;
  padding: 8px 2px;
  border: 0 !important;
  background: transparent !important;
  position: relative;
  text-decoration: none;
}
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link:hover{
  color: #ffffff !important;
  background: transparent !important;
  text-decoration: none;
}
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link:hover::after{
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 0;
  height: 2px;
  background: rgba(255,122,0,0.45);
}
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link.is-active,
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link.active{
  color: #ffffff !important;
}
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link.is-active::after,
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link.active::after{
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 0;
  height: 2px;
  background: var(--td-accent);
}
/* LANGUAGE SELECTOR */
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-advancedlanguageselectorblock select{
  color: #C9CED6;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent;
  font-family: var(--td-font-display);
  font-size: 14px;
}
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-advancedlanguageselectorblock select:focus{
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
/* =========================================================
   3.3 CART
========================================================= */
body:not(.path-admin):not(.claro) #block-circuitmaker-theme-cart{
  margin-left: 14px;
}
body:not(.path-admin):not(.claro) .cart--cart-block,
body:not(.path-admin):not(.claro) .cart-block--summary{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
body:not(.path-admin):not(.claro) .cart-block--link__expand{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 2px;
  border: 0 !important;
  background: transparent !important;
  text-decoration: none;
  color: #C9CED6;
  font-family: var(--td-font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 15px;
}
body:not(.path-admin):not(.claro) .cart-block--link__expand:hover{
  color: #ffffff;
  background: transparent !important;
  text-decoration: none;
}
/* count – orange chip with dark text */
body:not(.path-admin):not(.claro) .cart-block--summary__count{
  font-size: 12px;
  font-weight: 700;
  font-family: var(--td-font-mono);
  color: #16191F;
  background: var(--td-accent) !important;
  border: 0 !important;
  padding: 0 7px !important;
  line-height: 18px;
}
body:not(.path-admin):not(.claro) .cart-block--summary__icon img{
  width: 18px;
  height: 18px;
}
/* collapse */
@media (max-width: 1199.98px){
  body:not(.path-admin):not(.claro) #CollapsingNavbar.navbar-collapse{
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--td-border-inv);
    background: rgba(255,255,255,0.03);
  }
  body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .navbar-nav{
    align-items: stretch;
    gap: 6px;
  }
  body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link{ padding: 10px 10px; }
  body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link.is-active::after,
  body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link.active::after{
    left: 10px;
    right: 10px;
    bottom: 4px;
  }
  body:not(.path-admin):not(.claro) #block-circuitmaker-theme-cart{
    margin-left: 0;
    margin-top: 8px;
  }
  body:not(.path-admin):not(.claro) .cart-block--link__expand{
    width: 100%;
    justify-content: flex-start;
    padding: 10px 10px;
  }
}
/* =========================================================
   4) TABLES – technical, calm
========================================================= */
body:not(.path-admin):not(.claro) table{
  width: 100%;
  border-collapse: collapse;
  background: var(--td-table-bg);
  color: var(--td-table-text);
  font-family: var(--td-table-font-family);
  font-size: var(--td-table-font-size);
  line-height: var(--td-table-line-height);
  border: var(--td-table-border-width) solid var(--td-table-border);
}
body:not(.path-admin):not(.claro) table th,
body:not(.path-admin):not(.claro) table td{
  padding: var(--td-table-cell-pad-y) var(--td-table-cell-pad-x);
  border: var(--td-table-border-width) solid var(--td-table-border);
  vertical-align: top;
}
body:not(.path-admin):not(.claro) table thead th{
  background: var(--td-table-header-bg);
  color: var(--td-table-header-text);
  font-family: var(--td-font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--td-table-header-border);
}
body:not(.path-admin):not(.claro) table tbody tr:nth-child(even){
  background: var(--td-table-zebra-bg);
}
body:not(.path-admin):not(.claro) table tbody tr:hover{
  background: var(--td-table-hover-bg);
}
body:not(.path-admin):not(.claro) table code{
  font-family: var(--td-font-mono);
  font-size: 0.9em;
}
@media (max-width: 768px){
  body:not(.path-admin):not(.claro) table{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}
/* =========================================================
   5) FOOTER
========================================================= */
body:not(.path-admin):not(.claro) footer.site-footer{
  background: var(--td-gray-900);
  color: var(--td-text-inv);
  border-top: 2px solid var(--td-accent);
  padding-top: var(--td-footer-pad-top);
  padding-bottom: var(--td-footer-pad-bottom);
}
body:not(.path-admin):not(.claro) footer.site-footer .block,
body:not(.path-admin):not(.claro) footer.site-footer .content,
body:not(.path-admin):not(.claro) footer.site-footer .field,
body:not(.path-admin):not(.claro) footer.site-footer .field__item{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top > section.row.region{
  margin: 0 !important;
  padding: 0 !important;
  width: auto;
}
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top .row{
  margin: 0 !important;
}
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top{
  display: grid;
  grid-template-columns: repeat(var(--td-footer-cols), minmax(0, 1fr));
  column-gap: var(--td-footer-gap-x);
  row-gap: var(--td-footer-gap-y);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--td-footer-line);
}
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top h2{
  font-family: var(--td-font-display);
  font-size: var(--td-footer-heading-size);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--td-footer-line);
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top .content,
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top .field__item{
  font-size: var(--td-footer-text-size);
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
}
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top li{
  margin: 7px 0;
}
body:not(.path-admin):not(.claro) footer.site-footer a{
  color: #C9CED6;
  font-family: var(--td-font-sans);
  font-weight: 400;
  text-decoration: none;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
body:not(.path-admin):not(.claro) footer.site-footer a:hover{
  color: var(--td-accent);
  text-decoration: none;
}
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__bottom{
  padding-top: 14px;
}
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__bottom p{
  margin: 0;
  color: #6B7280;
  font-size: 12px;
  font-family: var(--td-font-mono);
}
@media (max-width: 992px){
  body:not(.path-admin):not(.claro){
    --td-footer-cols: 2;
    --td-footer-gap-x: 20px;
  }
}
@media (max-width: 576px){
  body:not(.path-admin):not(.claro){
    --td-footer-cols: 1;
    --td-h1: 28px;
    --td-h2: 22px;
  }
}
/* =========================================================
   6) SIDEBAR – CATEGORY MENU (#sidebar_first)
========================================================= */
body:not(.path-admin):not(.claro) #sidebar_first aside.section{
  padding-top: 8px;
}
body:not(.path-admin):not(.claro) #sidebar_first nav.block > h2,
body:not(.path-admin):not(.claro) #sidebar_first .block-menu > h2{
  font-family: var(--td-font-display);
  font-size: var(--td-sidebar-heading-size);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--td-text-muted);
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--td-border-strong);
  text-transform: uppercase;
}
body:not(.path-admin):not(.claro) #sidebar_first .nav{
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}
body:not(.path-admin):not(.claro) #sidebar_first .nav-item,
body:not(.path-admin):not(.claro) #sidebar_first ul.menu > li{
  width: 100%;
  display: block;
}
body:not(.path-admin):not(.claro) #sidebar_first nav.block > ul.nav > li.nav-item{
  border-bottom: 1px solid var(--td-border-soft);
}
body:not(.path-admin):not(.claro) #sidebar_first nav.block > ul.nav > li.nav-item:last-child{
  border-bottom: 0;
}
body:not(.path-admin):not(.claro) #sidebar_first ul.menu{
  list-style: none;
  padding-left: var(--td-sidebar-indent);
  margin: 4px 0 8px;
  border-left: 1px solid var(--td-border);
}
body:not(.path-admin):not(.claro) #sidebar_first .nav-link{
  display: block;
  width: 100%;
  padding: var(--td-sidebar-link-pad-y) var(--td-sidebar-link-pad-x);
  color: var(--td-text-strong);
  font-family: var(--td-font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: var(--td-sidebar-link-size);
  border: 0 !important;
  background: transparent !important;
  text-decoration: none;
  position: relative;
  transition: color .15s ease, background-color .15s ease;
}
body:not(.path-admin):not(.claro) #sidebar_first .nav-link:hover{
  color: var(--td-accent-2);
  background: var(--td-surface-2) !important;
  text-decoration: none;
}
body:not(.path-admin):not(.claro) #sidebar_first ul.menu a{
  display: block;
  width: 100%;
  padding: 6px var(--td-sidebar-link-pad-x);
  color: var(--td-text);
  font-family: var(--td-font-sans);
  font-weight: 400;
  font-size: var(--td-sidebar-sublink-size);
  border: 0 !important;
  background: transparent !important;
  text-decoration: none;
  position: relative;
  transition: color .15s ease, background-color .15s ease;
}
body:not(.path-admin):not(.claro) #sidebar_first ul.menu a:hover{
  color: var(--td-accent-2);
  background: var(--td-surface-2) !important;
  text-decoration: none;
}
body:not(.path-admin):not(.claro) #sidebar_first .menu-item--active-trail > .nav-link,
body:not(.path-admin):not(.claro) #sidebar_first .menu-item--active-trail > a{
  color: var(--td-text-strong);
  font-weight: 700;
}
/* ACTIVE item — orange left bar */
body:not(.path-admin):not(.claro) #sidebar_first .nav-link.is-active,
body:not(.path-admin):not(.claro) #sidebar_first .nav-link.active,
body:not(.path-admin):not(.claro) #sidebar_first ul.menu a.is-active{
  color: var(--td-text-strong);
  font-weight: 700;
  background: var(--td-accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--td-accent);
}
/* COLLAPSED BY DEFAULT */
body:not(.path-admin):not(.claro) #sidebar_first ul.menu{
  display: none;
}
body:not(.path-admin):not(.claro) #sidebar_first .menu-item--active-trail > ul.menu,
body:not(.path-admin):not(.claro) #sidebar_first li.is-open > ul.menu{
  display: block;
}
body:not(.path-admin):not(.claro) #sidebar_first li.has-children{
  position: relative;
}
body:not(.path-admin):not(.claro) #sidebar_first li.has-children > .nav-link,
body:not(.path-admin):not(.claro) #sidebar_first li.has-children > a{
  padding-right: 36px;
}
body:not(.path-admin):not(.claro) #sidebar_first .td-toggle{
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--td-text-muted);
  cursor: pointer;
  user-select: none;
  border: 0;
  background: transparent;
  transition: transform .2s ease, color .15s ease, background-color .15s ease;
  z-index: 1;
}
body:not(.path-admin):not(.claro) #sidebar_first .td-toggle:hover{
  color: var(--td-accent);
  background: var(--td-surface-2);
}
body:not(.path-admin):not(.claro) #sidebar_first li.is-open > .td-toggle,
body:not(.path-admin):not(.claro) #sidebar_first li.menu-item--active-trail > .td-toggle{
  transform: rotate(90deg);
  color: var(--td-accent);
}
@media (max-width: 768px){
  body:not(.path-admin):not(.claro) #sidebar_first{
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--td-border);
  }
}