/*
 * IBM Plex Sans is the font of every page (owner, 2026-10-13). The faces are self-hosted
 * (assets/ido-ui/fonts) and --ido-font, with the tenant's choice from the font catalog, is set by
 * ido_ui_font_vars_html(); this rule only makes the elements that browsers or older stylesheets give their own
 * face use it. Icon fonts keep their family through the !important rule on [class^="fa-"] below.
 */
:where(body, h1, h2, h3, h4, h5, h6, p, a, span, li, label, dt, dd, strong, b, em, small, th, td, button, input, select, textarea) {
    font-family: var(--ido-font, 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

body.customers {
    font-weight: 400;
}

body.customers strong, body.customers b, body.customers .bold {
    font-weight: 700;
}

body.customers em, body.customers .text-italic {
    font-style: italic;
}
[class^="fa-"], [class*=" fa-"], .fa, .material-icons {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
  font-weight: 900;
}
html, body {
    width: 100%;
    height: auto;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
  color: #a93593;
}
a:hover, a:focus {
  color: #7a2670;
}

/* Sin sombra gris detrás del header/logo */
#header {
  box-shadow: none;
}

/*
 * Pinned across every admin page on desktop, the same way #menu (the sidebar) already
 * stays put while the page scrolls (see #menu's own `position: fixed` in assets/css/
 * style.css). Scoped to `body.admin` so the customer-facing portal, which loads this
 * same file, is untouched — and to desktop widths, since small screens swap in their
 * own `.mobile-navbar`.
 *
 * This file — not modules/idoworker_theme/assets/css/idoworker-theme-admin.css — is
 * what actually renders on SaaS tenant routes (e.g. /ido/ps/admin/...): those pages
 * never get the `body-modern-theme` class that file is scoped to, so a fix living
 * only there is invisible here. Keep both in sync for any future #header change.
 */
@media (min-width: 769px) {
  body.admin #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
  }

  body.admin:not(.ido-frame) #wrapper {
    padding-top: 57px !important;
  }
}

/* Keep desktop actions on one row so they cannot cover the page toolbar. */
@media (min-width: 1200px) {
  body.admin #header nav > .tw-flex > .tw-flex,
  body.admin #header #top_search {
    min-width: 0;
  }

  body.admin #header #search_input {
    width: 100%;
    min-width: 0;
    max-width: 350px;
  }

  body.admin #header .navbar-right,
  body.admin #header nav > .tw-flex > .tw-flex > .navbar-nav {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/*
 * Sidebar toggle — a small round button (down from a 36px bordered square) whose
 * icon morphs between hamburger and "×" as the sidebar opens/closes, so the icon
 * itself carries the state instead of just being a static glyph. Purely CSS: the
 * three <line> elements (assets/views/admin/includes/header.php) get transformed
 * by the same `hide-sidebar`/`show-sidebar`/`page-small` body classes the sidebar
 * itself already uses (assets/css/style.css) — no JS changes needed.
 * Old bar only: the kit's top bar (.ido-topbar, assets/ido-ui/widgets/topbar) styles its own button.
 */
#header:not(.ido-topbar) .hide-menu {
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 13px;
  padding: 0;
  border-radius: 50%;
  color: #374151 !important;
  background-color: transparent !important;
  border: 0;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
#header:not(.ido-topbar) .hide-menu:hover,
#header:not(.ido-topbar) .hide-menu:focus {
  background-color: rgba(128, 140, 160, 0.16) !important;
}
#header:not(.ido-topbar) .hide-menu:active {
  transform: scale(0.9);
}
#header:not(.ido-topbar) .hide-menu:focus-visible {
  outline: 2px solid #111827 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
#header:not(.ido-topbar) .hide-menu svg {
  width: 16px;
  height: 16px;
  color: inherit !important;
  overflow: visible;
}
#header:not(.ido-topbar) .hide-menu .hm-line {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Sidebar visible (the common case: desktop default, or revealed on mobile) —
   the icon reads as "×", since clicking it closes what's currently open. */
body:not(.hide-sidebar):not(.page-small) #header:not(.ido-topbar) .hide-menu .hm-line-top,
body.page-small.show-sidebar #header:not(.ido-topbar) .hide-menu .hm-line-top {
  transform: translateY(4px) rotate(45deg);
}
body:not(.hide-sidebar):not(.page-small) #header:not(.ido-topbar) .hide-menu .hm-line-mid,
body.page-small.show-sidebar #header:not(.ido-topbar) .hide-menu .hm-line-mid {
  opacity: 0;
}
body:not(.hide-sidebar):not(.page-small) #header:not(.ido-topbar) .hide-menu .hm-line-bottom,
body.page-small.show-sidebar #header:not(.ido-topbar) .hide-menu .hm-line-bottom {
  transform: translateY(-4px) rotate(-45deg);
}

.navbar, .admin-sidebar {
  background-color: #11111f;
}

.admin-sidebar .menu-item > a,
.customer-wrapper .navbar-nav > li > a {
  color: #ffffff;
}

.admin-sidebar .menu-item.active,
.customer-wrapper .navbar-nav > li.active > a {
  background-color: #a93593;
  color: #ffffff;
}

.btn-primary {
  background-color: #a93593;
  border-color: #a93593;
}

.modal-header {
  background-color: #a93593;
  color: #ffffff;
}

/* Fix caret position inside fit-width selectpickers used in totals KPI strips
   (Invoices, Estimates, Expenses). The default rule places the caret at
   right: -6px (outside the button). We move it inside, vertically center it,
   and add right padding to the button so the value text doesn't overlap. */
#invoices_total .bootstrap-select.fit-width .dropdown-toggle .caret,
#estimates_total .bootstrap-select.fit-width .dropdown-toggle .caret,
#expenses_total .bootstrap-select.fit-width .dropdown-toggle .caret {
  right: 10px !important;
  top: 50% !important;
  margin-top: 0 !important;
  transform: translateY(-50%) rotate(45deg);
}

#invoices_total .bootstrap-select.fit-width .dropdown-toggle,
#estimates_total .bootstrap-select.fit-width .dropdown-toggle,
#expenses_total .bootstrap-select.fit-width .dropdown-toggle {
  padding-right: 30px !important;
  padding-left: 12px !important;
}

#invoices_total .bootstrap-select.fit-width .dropdown-toggle .filter-option,
#estimates_total .bootstrap-select.fit-width .dropdown-toggle .filter-option,
#expenses_total .bootstrap-select.fit-width .dropdown-toggle .filter-option {
  right: 26px !important;
  left: 12px !important;
}

[dir="rtl"] #invoices_total .bootstrap-select.fit-width .dropdown-toggle .caret,
[dir="rtl"] #estimates_total .bootstrap-select.fit-width .dropdown-toggle .caret,
[dir="rtl"] #expenses_total .bootstrap-select.fit-width .dropdown-toggle .caret {
  right: auto !important;
  left: 10px !important;
}

[dir="rtl"] #invoices_total .bootstrap-select.fit-width .dropdown-toggle,
[dir="rtl"] #estimates_total .bootstrap-select.fit-width .dropdown-toggle,
[dir="rtl"] #expenses_total .bootstrap-select.fit-width .dropdown-toggle {
  padding-right: 12px !important;
  padding-left: 30px !important;
}

[dir="rtl"] #invoices_total .bootstrap-select.fit-width .dropdown-toggle .filter-option,
[dir="rtl"] #estimates_total .bootstrap-select.fit-width .dropdown-toggle .filter-option,
[dir="rtl"] #expenses_total .bootstrap-select.fit-width .dropdown-toggle .filter-option {
  right: 12px !important;
  left: 26px !important;
}

/*
 * The client portal's shell: the top bar (template_parts/my_navigation.php), the page frame and the footer (my_footer.php), on every
 * page of the client area. Everything reads registry roles (assets/ido-ui/tokens): the bar's own `--ido-bar-bg`, `--ido-bar-fg` and
 * `--ido-bar-mark` come from the tenant's Theme style through ido_ui_portal_brand() with contrast checked, the rest are the shared
 * text, line, surface and accent roles. No literal colour, no portal-private variable.
 *
 * The bar rule (canvas "Portal shell at 1440"): full width and static -- it scrolls away with the page, never fixed -- 64 high, the
 * inner row follows the page frame's maximum width and gutter, measured by the navigation's fit routine. The
 * viewport width must not depend on the page's height either: without a reserved gutter a classic scrollbar appears on a long page
 * and pushes the contact's menu left, so the right edge of the bar moved from page to page.
 */
html:has(> body.customers) { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html:has(> body.customers) { overflow-y: scroll; }
}

body.customers {
  --ido-portal-bar-plate: color-mix(in srgb, var(--ido-bar-fg) 12%, transparent);
  --ido-portal-bar-edge: color-mix(in srgb, var(--ido-bar-fg) 14%, transparent);
}

body.customers .navbar.navbar-default.header.ido-portal-bar {
  min-height: 64px;
  margin-bottom: 0;
  border: 0;
  border-bottom: 1px solid var(--ido-portal-bar-edge);
  border-radius: 0;
  background-color: var(--ido-bar-bg);
  background-image: none;
  color: var(--ido-bar-fg);
}

body.customers .ido-portal-bar .ido-portal-bar-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--ido-space-4);
  width: 100%;
  max-width: 1280px;
  min-height: 64px;
  padding: 0 var(--ido-space-5);
}

/* Bootstrap's clearfix pseudo-elements would be flex items and push the row off centre. */
body.customers .ido-portal-bar .ido-portal-bar-inner::before,
body.customers .ido-portal-bar .ido-portal-bar-inner::after { content: none; display: none; }

body.customers .ido-portal-bar .ido-portal-brand { flex: none; display: flex; align-items: center; min-width: 0; }

body.customers .navbar.navbar-default.header.ido-portal-bar .navbar-brand {
  float: none;
  display: flex;
  align-items: center;
  gap: var(--ido-space-3);
  height: 64px;
  margin: 0 !important;
  padding: 0;
  color: var(--ido-bar-fg);
  font-size: var(--ido-size-body);
  font-weight: var(--ido-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
}
/* The mark: 32, radius 8, the accent with its text, the company's initial 13/700 (board Anatomy 1). */
body.customers .ido-portal-bar .ido-portal-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ido-radius-sm);
  background: var(--ido-accent);
  color: var(--ido-on-accent);
  font-size: var(--ido-size-label);
  font-weight: var(--ido-weight-bold);
}
body.customers .ido-portal-bar .ido-portal-brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ido-bar-fg); }
/* A tenant's logo image replaces the mark and the name (cap 56 high) until it cannot load. */
body.customers .ido-portal-bar .ido-portal-brandlink:not(.is-text):not(.is-broken) :is(.ido-portal-mark, .ido-portal-brand-name) { display: none; }
/* A logo made for a light page vanishes on a dark bar: the image sits on a light plate (surface), its alt text in strong ink. */
body.customers .ido-portal-bar .ido-portal-logo {
  display: block;
  box-sizing: content-box;
  max-height: 40px;
  width: auto;
  max-width: 200px;
  padding: var(--ido-space-1) var(--ido-space-3);
  border-radius: var(--ido-radius-sm);
  background-color: var(--ido-surface);
  color: var(--ido-text-strong);
}
body.customers .ido-portal-bar .ido-portal-brandlink.is-broken .ido-portal-logo { display: none; }
/* Logo skeleton: a 160 x 40 block (the logo's cap height) while the image loads; the image waits invisible behind it. */
body.customers .ido-portal-bar .ido-portal-logo-skel { display: none; width: 160px; height: 40px; border-radius: var(--ido-radius-sm); }
body.customers .ido-portal-bar .ido-portal-brandlink.is-loading .ido-portal-logo-skel { display: block; }
body.customers .ido-portal-bar .ido-portal-brandlink.is-loading .ido-portal-logo { position: absolute; opacity: 0; pointer-events: none; }
body.customers .ido-portal-bar .ido-portal-brandlink { position: relative; }
/* Entries skeleton (768 and up): four bars where the entries will be, until the first fit after the fonts. */
body.customers .ido-portal-bar .ido-portal-nav-skel { display: none; }
body.customers .ido-portal-bar .ido-portal-menu { position: relative; }
@media (min-width: 768px) {
  body.customers .ido-portal-bar.is-settling .ido-portal-links { visibility: hidden; }
  body.customers .ido-portal-bar.is-settling .ido-portal-nav-skel {
    display: flex; align-items: center; gap: var(--ido-space-3); position: absolute; left: var(--ido-space-3); top: 0; bottom: 0;
  }
  body.customers .ido-portal-bar .ido-portal-nav-skel .ido-skeleton { width: 72px; height: 16px; }
}

body.customers .ido-portal-bar .ido-portal-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--ido-radius-sm);
  background: transparent;
  color: var(--ido-bar-fg);
}
body.customers .ido-portal-bar .ido-portal-menu-toggle:hover,
body.customers .ido-portal-bar .ido-portal-menu-toggle[aria-expanded="true"] { background: var(--ido-portal-bar-plate); }

body.customers .ido-portal-bar .ido-portal-menu { flex: 1; min-width: 0; padding: 0; border: 0; box-shadow: none; }
body.customers .ido-portal-bar .ido-portal-menu .navbar-nav { float: none; margin: 0; }
body.customers .ido-portal-bar .ido-portal-menu .navbar-nav > li { float: none; }

body.customers .navbar.navbar-default.header.ido-portal-bar .ido-portal-links > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 64px;
  padding: 0 var(--ido-space-3);
  border-radius: 0;
  background: transparent;
  color: var(--ido-bar-fg);
  font-size: var(--ido-size-body);
  font-weight: var(--ido-weight-medium);
  line-height: 1;
  white-space: nowrap;
}
body.customers .navbar.navbar-default.header.ido-portal-bar .ido-portal-links > li > a:hover,
body.customers .navbar.navbar-default.header.ido-portal-bar .ido-portal-links > li > a:focus,
body.customers .navbar.navbar-default.header.ido-portal-bar .ido-portal-links > li.open > a {
  background: var(--ido-portal-bar-plate);
  color: var(--ido-bar-fg);
}
body.customers .navbar.navbar-default.header.ido-portal-bar .ido-portal-links > li.active > a,
body.customers .navbar.navbar-default.header.ido-portal-bar .ido-portal-links > li.active > a:hover,
body.customers .navbar.navbar-default.header.ido-portal-bar .ido-portal-links > li.active > a:focus {
  background: transparent;
  color: var(--ido-bar-fg);
  font-weight: var(--ido-weight-semibold);
  box-shadow: inset 0 -2px 0 var(--ido-bar-mark);
}

body.customers .ido-portal-bar .ido-portal-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: var(--ido-space-2);
  border-radius: var(--ido-radius-full);
  background: var(--ido-bar-mark);
  color: var(--ido-bar-mark-on);
  font-size: var(--ido-size-caption);
  font-weight: var(--ido-weight-semibold);
}

/* The menus are the kit's (.dropdown-menu.ido-menu, composites/menu): surface, line, radius 12, rows and hover come from there. */
body.customers .ido-portal-bar .ido-portal-tools { display: flex; align-items: center; gap: var(--ido-space-1); margin-left: auto; }
body.customers .ido-portal-bar .customers-nav-item-profile {
  margin-left: var(--ido-space-1);
  padding-left: var(--ido-space-2);
  border-left: 1px solid var(--ido-portal-bar-edge);
}
body.customers .navbar.navbar-default.header.ido-portal-bar .ido-portal-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 var(--ido-space-2) 0 var(--ido-space-1);
  border-radius: var(--ido-radius-full);
  background: transparent;
  color: var(--ido-bar-fg);
}
body.customers .navbar.navbar-default.header.ido-portal-bar .ido-portal-profile:hover,
body.customers .navbar.navbar-default.header.ido-portal-bar .ido-portal-profile:focus,
body.customers .navbar.navbar-default.header.ido-portal-bar li.open > .ido-portal-profile { background: var(--ido-portal-bar-plate); color: var(--ido-bar-fg); }
body.customers .ido-portal-bar .ido-portal-profile-name { font-size: var(--ido-size-label); font-weight: var(--ido-weight-medium); white-space: nowrap; }
body.customers .ido-portal-bar .ido-portal-profile > svg { flex: none; }

body.customers .navbar.navbar-default.header.ido-portal-bar a:focus-visible,
body.customers .navbar.navbar-default.header.ido-portal-bar button:focus-visible {
  outline: 2px solid var(--ido-bar-fg);
  outline-offset: -2px;
}

/* The contact heads their own menu with the kit's person row (avatar 40, name, email, company). */
/* The one separator under the head is the menu's own divider row (owner 2026-10-14: no doubled lines); the head draws none. */
body.customers .ido-portal-bar .ido-portal-profile-head { padding: var(--ido-space-2) 10px var(--ido-space-3); }
/* The account menu scrolls only when needed. The language component uses the kit's floating layer. */
body.customers .ido-portal-bar .dropdown-menu.ido-portal-account { width: 280px; max-height: calc(100vh - 80px); overflow-x: hidden; overflow-y: auto; }
body.customers .ido-portal-bar .ido-portal-account > li > a { min-height: 40px; }
body.customers .ido-portal-bar .ido-portal-language { padding: var(--ido-space-2); }
/* A row is a chip only on hover or keyboard focus: the focus a click leaves on the first row does not paint it. */
body.customers .ido-portal-bar .ido-portal-account > li > a:focus:not(:focus-visible):not(:hover) { background: transparent; }
body.customers .ido-portal-bar .ido-portal-profile-head > .ido-avatar { flex: none; }

/* Wide screens: everything in one row, the panel always open. Entries that do not fit move into More by the bar's script. */
@media (min-width: 768px) {
  body.customers .ido-portal-bar .ido-portal-menu { display: flex !important; align-items: center; height: auto !important; overflow: visible !important; }
  /* Owner 2026-10-14: the entries sit at the right, next to the profile; the brand stays left. The fold script measures this box. */
  body.customers .ido-portal-bar .ido-portal-links { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 2px; flex: 1; min-width: 0; }
  body.customers .ido-portal-bar .ido-portal-links > li { flex: none; }
}
/* The page frame sits 16 under the bar (board: breadcrumb 16 under the bar); the legacy 30 px #content margin and the frame's own
   24 padding made 54 above the title. */
body.customers #wrapper > #content:has(.ido-page--portal) { margin-top: 0; }
body.customers .ido-page--portal { padding-top: var(--ido-space-4); }
/* The contact's name beside the avatar at 1200 and wider (board "Portal shell at 1440"); the avatar alone below. */
@media (min-width: 768px) and (max-width: 1199px) {
  body.customers .ido-portal-bar .ido-portal-profile-name { display: none; }
}
/* Laptops: a little less room around each entry before any of them moves into More. */
@media (min-width: 768px) and (max-width: 1279px) {
  body.customers .navbar.navbar-default.header.ido-portal-bar .ido-portal-links > li > a { padding: 0 9px; }
}

/*
 * Phones: the bar is the brand and the menu button; the entries open in a full-height sheet under the bar (canvas "Portal navigation:
 * phone and tablet"): the page behind does not scroll, Esc, the button, the backdrop and a tap on an entry close it and focus returns
 * to the button. Rows are 48 high at Body 14; the bar and the sheet pad by the safe-area insets.
 */
@media (max-width: 767px) {
  body.customers .navbar.navbar-default.header.ido-portal-bar { min-height: 56px; padding-top: env(safe-area-inset-top, 0px); }
  body.customers .ido-portal-bar .ido-portal-bar-inner {
    gap: 0 var(--ido-space-3);
    min-height: 56px;
    padding-left: max(var(--ido-space-4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--ido-space-4), env(safe-area-inset-right, 0px));
  }
  body.customers .ido-portal-bar .ido-portal-brand { flex: 1; min-width: 0; min-height: 56px; }
  body.customers .navbar.navbar-default.header.ido-portal-bar .navbar-brand { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  body.customers .ido-portal-bar .ido-portal-menu-toggle { display: inline-flex; flex: none; }

  body.customers .ido-portal-bar .ido-portal-menu { display: none; }
  body.customers .ido-portal-bar .ido-portal-menu.is-open {
    display: block;
    position: fixed;
    z-index: var(--ido-z-drawer);
    top: var(--ido-portal-sheet-top, 56px);
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--ido-space-2) max(var(--ido-space-4), env(safe-area-inset-right, 0px)) calc(var(--ido-space-4) + env(safe-area-inset-bottom, 0px)) max(var(--ido-space-4), env(safe-area-inset-left, 0px));
    background: var(--ido-bar-bg);
    border-top: 1px solid var(--ido-portal-bar-edge);
  }
  body.ido-portal-nav-open { overflow: hidden; }
  body.customers .ido-portal-nav-backdrop { display: none; }
  body.ido-portal-nav-open.customers .ido-portal-nav-backdrop { display: block; position: fixed; z-index: var(--ido-z-menu-backdrop); inset: var(--ido-portal-sheet-top, 56px) 0 0 0; background: var(--ido-overlay); }

  body.customers .ido-portal-bar .ido-portal-links { display: block; }
  body.customers .navbar.navbar-default.header.ido-portal-bar .ido-portal-links > li > a { height: 48px; padding: 0 var(--ido-space-3); border-radius: var(--ido-radius-sm); }
  body.customers .navbar.navbar-default.header.ido-portal-bar .ido-portal-links > li.active > a {
    box-shadow: inset 3px 0 0 var(--ido-bar-mark);
    background: color-mix(in srgb, var(--ido-bar-mark) 16%, transparent);
    color: var(--ido-bar-fg);
    font-weight: var(--ido-weight-semibold);
  }

  /* More is a labelled section of the sheet, never a dropdown inside it. */
  body.customers .ido-portal-bar .customers-nav-item-more > .dropdown-toggle {
    display: flex !important;
    height: var(--ido-control-touch);
    margin-top: var(--ido-space-2);
    padding: 0 var(--ido-space-3);
    pointer-events: none;
    color: var(--ido-text-muted);
    font-size: var(--ido-size-caption);
    font-weight: var(--ido-weight-bold);
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  body.customers .ido-portal-bar .customers-nav-item-more > .dropdown-toggle svg { display: none; }
  body.customers .ido-portal-bar .ido-portal-more,
  body.customers .ido-portal-bar .customers-nav-item-profile > .dropdown-menu {
    position: static; display: block; float: none; width: 100%; min-width: 0; max-width: none; max-height: none; overflow: visible; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; animation: none;
  }
  body.customers .ido-portal-bar .ido-portal-more > li > a,
  body.customers .ido-portal-bar .customers-nav-item-profile > .dropdown-menu > li > a {
    height: 48px; padding: 0 var(--ido-space-3); color: var(--ido-bar-fg);
  }
  body.customers .ido-portal-bar .ido-portal-more > li > a:hover,
  body.customers .ido-portal-bar .customers-nav-item-profile > .dropdown-menu > li > a:hover { background: var(--ido-portal-bar-plate); color: var(--ido-bar-fg); }
  body.customers .ido-portal-bar .ido-portal-more .divider,
  body.customers .ido-portal-bar .customers-nav-item-profile .divider { background: var(--ido-portal-bar-edge); }

  /* The account is always listed, with the contact and company on top. */
  body.customers .ido-portal-bar .ido-portal-tools { display: block; margin: var(--ido-space-2) 0 0; padding-top: var(--ido-space-2); border-top: 1px solid var(--ido-portal-bar-edge); }
  body.customers .ido-portal-bar .customers-nav-item-profile { margin: 0; padding: 0; border: 0; }
  body.customers .navbar.navbar-default.header.ido-portal-bar .customers-nav-item-profile > .dropdown-toggle { display: none; }
  body.customers .ido-portal-bar .ido-portal-profile-head { padding: var(--ido-space-2) var(--ido-space-3); color: var(--ido-bar-fg); }
  body.customers .ido-portal-bar .ido-portal-profile-head .ido-menu__person-name { color: var(--ido-bar-fg); }
  /* The theme hides Language under 768; in the sheet it stays. */
  body.customers .ido-portal-bar .customers-nav-item-languages { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
  body.customers .ido-portal-bar .ido-portal-menu.is-open { animation: ido-portal-sheet-in var(--ido-motion-panel) var(--ido-ease-out); }
}
@keyframes ido-portal-sheet-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/*
 * The footer, one line in the page flow on every client page (my_footer.php): copyright and the legal links the tenant switched
 * on, Body 13 muted on the surface with the line above. The tenant's Theme style can colour the theme's footer; the portal's own is
 * the board's, so it wins here.
 */
body.customers.ido-portal footer.footer.ido-portal-footer {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ido-line);
  background: var(--ido-surface);
  color: var(--ido-text-muted);
  font-size: var(--ido-size-label);
}
body.customers.ido-portal .ido-portal-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ido-space-1) var(--ido-space-4);
  padding: var(--ido-space-4) var(--ido-space-5);
}
body.customers.ido-portal .ido-portal-footer .copyright-footer { color: var(--ido-text-muted); }
body.customers.ido-portal .ido-portal-footer a { color: var(--ido-text-muted); text-decoration: underline; }
body.customers.ido-portal .ido-portal-footer a:hover,
body.customers.ido-portal .ido-portal-footer a:focus { color: var(--ido-text-strong); }
@media (max-width: 575px) {
  body.customers.ido-portal .ido-portal-footer__inner { padding-inline: var(--ido-space-4); }
}