/* ==========================================================================
   Inovbi — console shell

   The sidebar + topbar chrome shared by every authenticated console page.
   Class names match the pre-redesign markup (.console__*, .sidebar-toggle,
   .back-btn) so existing per-module _base.html templates pick up the new
   identity with no markup change; they are replaced by templates/erp/
   shell.html module by module.

   Sidebar is spruce (dark). Collapse state is set on <html> before first
   paint (inline <head> script) to avoid a flash.
   ========================================================================== */


.console { min-height: 100vh; min-height: 100dvh; display: flex; background: var(--canvas); }

.console__sidebar {
  width: var(--shell-sidebar-w); flex-shrink: 0; overflow: hidden;
  background: var(--spruce); color: var(--on-dark);
  padding: var(--space-5) var(--space-3); display: flex; flex-direction: column; gap: 2px;
  transition: width var(--dur) var(--ease), padding var(--dur) var(--ease), transform var(--dur) var(--ease);
}
html.sidebar-collapsed .console__sidebar { width: 0; padding-inline-start: 0; padding-inline-end: 0; }

.console__brand {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 2px var(--space-2) var(--space-5); white-space: nowrap;
}
.console__brand .brand-mark__badge {
  width: 28px; height: 28px; font-size: var(--text-xs);
  background: var(--on-brand); color: var(--spruce); flex-shrink: 0;
}
.console__brand-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: #fff; }

.console__nav { white-space: nowrap; overflow-y: auto; }
.console__nav-label {
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-dark-subtle); padding: 0 var(--space-3); margin: var(--space-4) 0 var(--space-1);
}
.console__nav-label:first-child { margin-top: 0; }
.console__nav a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-base); color: var(--on-dark-muted); text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.console__nav a:hover { color: #fff; background: var(--on-dark-fill); }
.console__nav a.is-active { color: #fff; background: var(--on-dark-fill-strong); font-weight: 600; }

.console__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.console__topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-7); border-bottom: 1px solid var(--line);
  background: var(--surface); flex-shrink: 0; min-height: var(--shell-header-h);
}
.console__topbar-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.console__topbar-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console__topbar-meta { font-size: var(--text-sm); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.console__topbar-meta form { display: inline; margin: 0; }
.topbar-user { color: var(--text-muted); }

.sidebar-toggle, .back-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 34px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: 600;
  text-decoration: none; flex-shrink: 0; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sidebar-toggle { width: 34px; padding: 0; font-size: var(--text-md); }
.sidebar-toggle:hover, .back-btn:hover { background: var(--surface-sunken); border-color: var(--text-subtle); }

.console__content { padding: var(--space-7); width: 100%; max-width: var(--content-max); margin: 0 auto; }
.console__backdrop { display: none; }

@media (max-width: 860px) {
  .console__sidebar {
    position: fixed; top: 0; inset-inline-start: 0; bottom: 0; z-index: var(--z-drawer);
    width: 252px; max-width: 82vw; padding: var(--space-5) var(--space-3);
  }
  html.sidebar-collapsed .console__sidebar { width: 252px; max-width: 82vw; padding: var(--space-5) var(--space-3); transform: translateX(-100%); }
  .console__backdrop {
    display: block; position: fixed; inset: 0; z-index: var(--z-backdrop);
    background: rgba(13, 33, 29, 0.5);
    opacity: 1; transition: opacity var(--dur) var(--ease);
  }
  html.sidebar-collapsed .console__backdrop { opacity: 0; pointer-events: none; }
  .console__topbar { padding: var(--space-3) var(--space-4); }
  .console__topbar-title { font-size: var(--text-md); }
  .back-btn span:last-child { display: none; }
  .topbar-user { display: none; }
  .console__content { padding: var(--space-5) var(--space-4); }
}

/* ==========================================================================
   Unified shell  (templates/erp/shell.html)

   Header spans the full width on top; below it a [sidebar | content] row.
   Header + sidebar are both spruce, so they read as one continuous L.
   ========================================================================== */
.erp-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--canvas); }

/* ---- header ---- */
.erp-header {
  flex-shrink: 0; position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--shell-header-h); padding: 0 var(--space-4);
  background: var(--spruce); color: var(--on-dark);
  border-bottom: 1px solid var(--on-dark-line);
}
.erp-header__brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: #fff; min-width: 0; }
.erp-header__badge {
  width: 26px; height: 26px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--on-brand); color: var(--spruce);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs);
}
.erp-header__workspace { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erp-header__spacer { flex: 1; }

.erp-header__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 34px; min-width: 34px; padding: 0 var(--space-2);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--on-dark); cursor: pointer;
  font: inherit; font-size: var(--text-sm); text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.erp-header__btn:hover { background: var(--on-dark-fill); color: #fff; }
.erp-header__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--on-dark-fill-strong); }
.erp-header__btn .ic { flex-shrink: 0; }

.erp-header__count {
  position: absolute; top: 2px; inset-inline-end: 2px;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: var(--radius-pill);
  background: var(--signal); color: var(--spruce);
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
}
.erp-header__badge-wrap { position: relative; }

/* search field (desktop) */
.erp-search {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 34px; padding: 0 var(--space-3); width: 240px;
  border: 1px solid var(--on-dark-line); border-radius: var(--radius-sm);
  background: var(--on-dark-fill); color: var(--on-dark-muted);
  cursor: text; font-size: var(--text-sm);
}
.erp-search:hover { background: var(--on-dark-fill-strong); color: var(--on-dark); }
.erp-search kbd {
  margin-inline-start: auto; font-family: var(--font-mono); font-size: 10px;
  padding: 1px 5px; border-radius: var(--radius-xs);
  background: var(--on-dark-fill-strong); color: var(--on-dark-muted);
}

/* header disclosure menus (module switcher, user menu, help) */
.erp-menu { position: relative; }
.erp-menu > summary { list-style: none; }
.erp-menu > summary::-webkit-details-marker { display: none; }
.erp-menu__panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: var(--z-popover);
  min-width: 240px; padding: var(--space-2);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--elev-3);
}
/* Progressive enhancement: a browser that understands `@starting-style`
   and discrete `display` transitions animates the panel open (fade + a
   short drop); everything else keeps the plain instant show/hide a
   native <details> already gives for free. Same pattern as the public
   site's own nav dropdown (static/site/site.css's Motion section). */
@media (prefers-reduced-motion: no-preference) {
  .erp-menu[open] .erp-menu__panel {
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), display var(--dur) allow-discrete;
  }
  @starting-style {
    .erp-menu[open] .erp-menu__panel { opacity: 0; transform: translateY(-6px); }
  }
}
.erp-menu__head { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-1); }
.erp-menu__head strong { display: block; font-size: var(--text-sm); }
.erp-menu__head span { font-size: var(--text-xs); color: var(--text-muted); }
.erp-menu__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--text); text-decoration: none;
  background: none; border: none; width: 100%; cursor: pointer; font: inherit; text-align: start;
}
.erp-menu__item:hover { background: var(--surface-sunken); }
.erp-menu__item .ic { color: var(--text-subtle); flex-shrink: 0; }
.erp-menu__item-hint { margin-inline-start: auto; font-size: var(--text-xs); color: var(--text-subtle); }
.erp-menu__item-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.erp-menu__item-sub { font-size: var(--text-xs); color: var(--text-subtle); }
.erp-menu__label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-subtle);
}

.erp-switcher__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1);
  padding: var(--space-1);
}
.erp-switcher__tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-2); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text); text-align: center;
}
.erp-switcher__tile:hover { background: var(--surface-sunken); }
.erp-switcher__tile-icon { color: var(--brand); }
.erp-switcher__tile-label { font-size: var(--text-2xs); line-height: 1.2; }

.erp-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xs); font-weight: 700;
  overflow: hidden;
}

.erp-avatar__img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ---- body: sidebar + content ---- */
.erp-shell__body { flex: 1; display: flex; min-height: 0; }

.erp-sidebar {
  width: var(--shell-sidebar-w); flex-shrink: 0;
  background: var(--spruce); color: var(--on-dark);
  padding: var(--space-4) var(--space-3) var(--space-6);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: var(--space-1);
  transition: width var(--dur) var(--ease), transform var(--dur) var(--ease), padding var(--dur) var(--ease);
}
/* Collapsed = a narrow icon-only rail on desktop, not a full hide — the
   mobile breakpoint below overrides .erp-sidebar back to its off-canvas
   264px drawer regardless of this class, so these rules only ever take
   effect above 900px (see the [data-sidebar-toggle] rule further down,
   which hides the toggle button itself on mobile so this state can't
   even be reached there). */
/* Desktop: pinned under the header at viewport height, so a long module
   nav scrolls inside the sidebar instead of stretching the page (a short
   page used to get a page-length scrollbar just from the nav). The
   mobile breakpoint below turns it into a fixed drawer instead. */
@media (min-width: 901px) {
  .erp-sidebar {
    position: sticky; top: var(--shell-header-h); align-self: flex-start;
    height: calc(100vh - var(--shell-header-h)); height: calc(100dvh - var(--shell-header-h));
  }
}
/* The collapsed icon rail is a desktop affordance only. Below 901px the
   sidebar is a full-width drawer (see the max-width:900px block), and a
   collapsed flag (the default under 1100px, see shell.html) used to turn
   that drawer into an unlabelled 64px icon strip on every phone. */
@media (min-width: 901px) {
  html.sidebar-collapsed .erp-sidebar { width: 64px; padding-inline-start: var(--space-2); padding-inline-end: var(--space-2); }
  html.sidebar-collapsed .erp-nav-link,
  html.sidebar-collapsed .erp-nav-module-head {
    justify-content: center; padding-inline-start: 0; padding-inline-end: 0; gap: 0;
  }
  html.sidebar-collapsed .erp-nav-link span,
  html.sidebar-collapsed .erp-nav-module-head span,
  html.sidebar-collapsed .erp-nav-link__badge,
  html.sidebar-collapsed .erp-nav-label {
    display: none;
  }
  /* The current module's own sub-nav (Work/Recovery/Administration-type
     groups, e.g. Debt Collection's dozen-plus items) is too deep a level
     of navigation for a bare icon rail — collapsed shows top-level nav,
     the module switcher and platform admin only, same as if you weren't
     inside a module's sub-nav at all. */
  html.sidebar-collapsed .erp-nav-group--section { display: none; }
  /* business areas: the rail shows every module icon, headings hidden */
  html.sidebar-collapsed .erp-nav-area__toggle { display: none; }
  html.sidebar-collapsed .erp-nav-area.is-folded .erp-nav-area__items { display: block; }
  html.sidebar-collapsed .erp-nav-area { margin-top: var(--space-2); }
  html.sidebar-collapsed .erp-sidebar__divider { margin-inline-start: var(--space-2); margin-inline-end: var(--space-2); }
}

.erp-nav-group { margin-top: var(--space-3); }
.erp-nav-group:first-of-type { margin-top: 0; }
.erp-nav-group--section { margin-top: var(--space-2); }
.erp-nav-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-dark-subtle); padding: 0 var(--space-3); margin-bottom: var(--space-1);
}
.erp-nav-label--section {
  color: var(--on-dark-muted); font-size: 11px; letter-spacing: 0.06em;
  margin-top: var(--space-3); margin-bottom: var(--space-1);
}
.erp-nav-group--section:first-of-type .erp-nav-label--section { margin-top: 0; }

/* module header strip shown above its section list */
.erp-nav-module-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-1);
  border-radius: var(--radius-sm);
  color: #fff; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-md);
}
.erp-nav-module-head:hover { background: var(--on-dark-fill); }
.erp-nav-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-base); color: var(--on-dark-muted); text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.erp-nav-link:hover { color: #fff; background: var(--on-dark-fill); }
.erp-nav-link.is-active { color: #fff; background: var(--on-dark-fill-strong); font-weight: 600; }
.erp-nav-link .ic { flex-shrink: 0; color: currentColor; opacity: 0.85; }
.erp-nav-link__emoji { flex-shrink: 0; color: currentColor; opacity: 0.85; }
.erp-nav-link__badge {
  margin-inline-start: auto; font-size: 10px; font-weight: 700; line-height: 1;
  padding: 2px 6px; border-radius: var(--radius-pill);
  background: var(--signal); color: var(--spruce);
}
.erp-nav-module.is-active > .erp-nav-link { color: #fff; }
.erp-nav-sub { margin: var(--space-1) 0 var(--space-2); padding-inline-start: var(--space-4); display: flex; flex-direction: column; }
.erp-nav-sub .erp-nav-label { padding-inline-start: var(--space-3); margin-top: var(--space-2); }
.erp-nav-sublink {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 6px var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--on-dark-muted); text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.erp-nav-sublink:hover { color: #fff; background: var(--on-dark-fill); }
.erp-nav-sublink.is-active { color: #fff; background: var(--on-dark-fill-strong); font-weight: 600; }
.erp-nav-sublink .ic { flex-shrink: 0; color: currentColor; opacity: 0.85; }
/* Module sub-items carry no icon (see erp/navigation.py) — this is their
   stand-in on the collapsed rail (hidden otherwise), a single initial
   letter in the same slot an icon would occupy. */
.erp-nav-sublink__rail {
  display: none; flex-shrink: 0; align-items: center; justify-content: center;
  width: 18px; height: 18px; font-size: 10px; font-weight: 700;
  border-radius: var(--radius-sm); background: var(--on-dark-fill); color: currentColor;
}
/* section items get a subtle left rail so they read as belonging to the heading above */
.erp-nav-group--section .erp-nav-sublink { margin-inline-start: var(--space-2); padding-inline-start: var(--space-3); border-inline-start: 1px solid var(--on-dark-line); border-start-start-radius: 0; border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); border-end-start-radius: 0; }
.erp-nav-group--section .erp-nav-sublink.is-active { border-inline-start-color: var(--signal); }

/* ESM business areas (erp/_sidebar_areas.html): a heading per area that
   folds its modules; shell.js remembers folded areas per browser. */
.erp-nav-area { margin-top: var(--space-2); }
.erp-nav-area__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: var(--space-1) var(--space-3); margin-bottom: 2px; border: 0; border-radius: var(--radius-sm);
  background: none; cursor: pointer; font: inherit;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-subtle);
}
.erp-nav-area__toggle:hover { color: #fff; background: var(--on-dark-fill); }
.erp-nav-area__toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.erp-nav-area.is-current .erp-nav-area__toggle { color: var(--on-dark-muted); }
.erp-nav-area__chev { display: inline-flex; transition: transform var(--dur-fast) var(--ease); }
.erp-nav-area.is-folded .erp-nav-area__chev { transform: rotate(-90deg); }
.erp-nav-area.is-folded .erp-nav-area__items { display: none; }

.erp-sidebar__divider { height: 1px; background: var(--on-dark-line); margin: var(--space-3) var(--space-3); }

/* ---- main column ---- */
.erp-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.erp-crumbs {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-7); min-height: 48px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.erp-crumbs__trail { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); min-width: 0; flex-wrap: wrap; }
.erp-crumbs__trail a { color: var(--text-muted); text-decoration: none; }
.erp-crumbs__trail a:hover { color: var(--brand); }
.erp-crumbs__trail .ic { color: var(--text-disabled); }
.erp-crumbs__current { color: var(--text); font-weight: 600; }
.erp-crumbs__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

.erp-content { padding: var(--space-7); width: 100%; max-width: var(--content-max); margin: 0 auto; flex: 1; }

.erp-shell__backdrop { display: none; }

@media (max-width: 900px) {
  /* The topbar (search/module-switcher/approvals/notifications/help/
     language/account) is replaced by .m-bottom-nav on mobile — Home,
     Search, Alerts and Sign out are duplicated there and Menu opens this
     same sidebar as a drawer, so the topbar would be pure redundant
     chrome. Remaining gap: language switching, help and the
     module-switcher shortcut have no header to live in anymore and
     aren't yet on .m-bottom-nav either. */
  .erp-header { display: none; }
  .erp-sidebar {
    position: fixed; top: 0; inset-inline-start: 0; bottom: 0; z-index: var(--z-drawer);
    width: 264px; max-width: 84vw;
  }
  html:not(.drawer-open) .erp-sidebar { transform: translateX(-100%); }
  /* :not(.drawer-open) so a sidebar-collapsed flag left over from a
     desktop visit (it persists across page loads/devices via
     localStorage) can't permanently block the mobile drawer from
     opening — tapping [data-drawer-toggle] must always win here. */
  html.sidebar-collapsed:not(.drawer-open) .erp-sidebar { transform: translateX(-100%); }
  .erp-shell__backdrop {
    display: block; position: fixed; inset: 0; z-index: var(--z-backdrop);
    background: rgba(13, 33, 29, 0.5); opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }
  html.drawer-open .erp-shell__backdrop { opacity: 1; pointer-events: auto; }
  .erp-crumbs { padding: var(--space-3) var(--space-4); }
  .erp-content { padding: var(--space-5) var(--space-4); }
}
@media (min-width: 901px) {
  .erp-header__menu-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .erp-sidebar, .erp-shell__backdrop { transition: none; }
}

/* ---- global search dialog ---- */
.erp-search-dialog {
  width: min(560px, 92vw); margin: 12vh auto auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--elev-3); color: var(--text);
}
.erp-search-dialog::backdrop { background: rgba(13, 33, 29, 0.4); }
.erp-search-dialog__form { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.erp-search-dialog__form .ic { color: var(--text-subtle); flex-shrink: 0; }
.erp-search-dialog__form input {
  flex: 1; border: none; outline: none; background: none;
  font: inherit; font-size: var(--text-lg); color: var(--text);
}
.erp-search-dialog__close {
  border: 1px solid var(--line); background: var(--surface-sunken); color: var(--text-subtle);
  font-family: var(--font-mono); font-size: var(--text-2xs); padding: 3px 7px;
  border-radius: var(--radius-xs); cursor: pointer; flex-shrink: 0;
}

/* ---- global search dialog: live results (erp/shell.js) ---- */
.erp-search-dialog__results {
  max-height: min(420px, 60vh); overflow-y: auto;
  border-top: 1px solid var(--line);
}
.erp-search-dialog__group + .erp-search-dialog__group { border-top: 1px solid var(--line); }
.erp-search-dialog__group-label {
  padding: var(--space-3) var(--space-5) var(--space-1);
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-subtle); font-weight: 600;
}
.erp-search-dialog__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-5); text-decoration: none; color: var(--text);
  cursor: pointer;
}
.erp-search-dialog__item:hover,
.erp-search-dialog__item.is-active { background: var(--surface-hover); }
.erp-search-dialog__item-label { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-search-dialog__item-meta {
  font-size: var(--text-xs); color: var(--text-subtle); flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%;
}
.erp-search-dialog__status {
  padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--text-subtle);
}

/* ---- generic modal-form dialog ----
   Any [data-modal-form] link is fetched and its #main content dropped
   into here instead of a full navigation — see erp/shell.js. The page
   underneath stays exactly where it was and stays visible, just blurred
   and dimmed rather than hidden outright, so context is never fully lost. */
.erp-modal {
  width: min(760px, 94vw); max-height: 86vh; min-width: 420px; min-height: 220px;
  margin: 6vh auto auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--elev-3); color: var(--text);
  overflow: hidden;
  /* No `position` declared here on purpose: a native <dialog> shown via
     showModal() is promoted to the top layer and centers itself via the
     UA stylesheet's own `position: fixed` + this rule's auto margins.
     Overriding that to `position: relative` (as this rule used to)
     defeats the top-layer centering entirely. Dragging the titlebar
     (erp/shell.js) still works: it switches to an explicit
     position:fixed with exact coordinates the instant a drag starts,
     regardless of this rule. Same for resizing (.erp-modal__resize-grip
     below) — a real element whose mousedown does the same, since
     interactively resizing a top-layer element with auto margins is the
     same hazard dragging would be. */
}
/* THE "empty box stuck at the bottom of the page" bug (closing the
   dialog by any means — clicking outside, Escape, Cancel, the × button
   — leaves it fully visible instead of hidden) was actually this:
   display was declared unscoped, on plain `.erp-modal`. The UA
   stylesheet hides a <dialog> with `display: none` when it has no
   `open` attribute — but an unscoped author `display` declaration
   still wins that cascade (author origin beats user-agent origin
   regardless of specificity), so the dialog never actually went
   display:none on close; it just sat there, unstyled-position, in
   normal document flow — and since #erpModal is the last element in
   <body>, "normal document flow" put it at the very bottom of the
   page. Scoping to [open] is the entire fix. */
.erp-modal[open] {
  display: flex; flex-direction: column;
}
/* Document forms with a line-items table (orders, quotations, purchase
   orders, journal entries, ...) need more width than a plain field form —
   triggered by data-modal-form="wide" (see erp/shell.js). */
.erp-modal--wide { width: min(1120px, 96vw); }
/* The 420px min-width above (plus min-width:420px carrying into --wide)
   is wider than the viewport on any phone under ~460px — every "New …"
   / "Edit …" link app-wide opens through this one dialog, so that
   overflowed the modal off the right edge of the screen on every such
   flow, not just one page. Below 480px there's no meaningful floor
   left to protect — a form has to fit the phone it's on. */
@media (max-width: 480px) {
  .erp-modal, .erp-modal--wide { width: 94vw; min-width: 0; max-height: 92vh; margin: 3vh auto auto; }
}
.erp-modal::backdrop {
  background: rgba(13, 33, 29, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.erp-modal__titlebar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  height: 34px; padding-block: 0 0; padding-inline: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--line); background: var(--surface-sunken);
  cursor: move; user-select: none;
}
.erp-modal__grip { color: var(--text-subtle); display: flex; align-items: center; pointer-events: none; }
.erp-modal__close {
  border: none; background: none; color: var(--text-subtle); cursor: pointer;
  font-size: 1.5rem; line-height: 1; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.erp-modal__close:hover { background: var(--surface-hover); color: var(--text); }
/* JS-driven resize handle — see erp/shell.js and the long comment on
   .erp-modal above for why this replaced the native `resize: both`. */
.erp-modal__resize-grip {
  position: absolute; inset-inline-end: 0; bottom: 0;
  width: 18px; height: 18px;
  cursor: nwse-resize;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg stroke='%238a8f98' stroke-width='1.4' stroke-linecap='round'%3E%3Cline x1='4' y1='15' x2='15' y2='4'/%3E%3Cline x1='8' y1='15' x2='15' y2='8'/%3E%3Cline x1='12' y1='15' x2='15' y2='12'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 12px 12px;
  opacity: .6;
}
.erp-modal__resize-grip:hover { opacity: 1; }
/* A dismiss attempt (backdrop click, Escape, ×) nudges instead of
   closing — see erp/shell.js. Transform-only, so it's safe alongside
   the deliberate no-`position` rule above (and Escape-safe for anyone
   who has prefers-reduced-motion on). */
.erp-modal.is-shaking { animation: erpModalShake 0.4s ease-in-out; }
@keyframes erpModalShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .erp-modal.is-shaking { animation: none; }
}
.erp-modal__body {
  flex: 1 1 auto; padding: var(--space-6); overflow-y: auto; min-height: 0;
  transition: opacity .12s ease;
}
.erp-modal.is-loading .erp-modal__body { opacity: .4; pointer-events: none; }
/* Content fetched from a full page brings its own .page-header — tighten
   it a little so it doesn't look like it's expecting a sidebar/breadcrumb
   next to it, and hide the "New tenant" scroll anchor bookmark if present. */
.erp-modal__body .page-header { margin-bottom: var(--space-5); }
.erp-modal__body .page-header p { color: var(--text-muted); }
/* The tab row (General/Sales/Addresses/...) used to live inside the same
   scrolling element as the rest of the form. Even pinned there with
   position:sticky, the body's own scrollbar thumb sits at the top of its
   track whenever the form is scrolled near the top — exactly where a
   sticky header also sits — so the two visually collided. The real fix:
   shell.js physically moves the tab nav into this dedicated, non-
   scrolling slot the moment a form loads into the modal, leaving only
   the tab panels (and their own scrolling) in .erp-modal__body. Empty
   (and so invisible, no border/padding of its own) for any form that
   has no tabs at all. */
.erp-modal__tabs:empty { display: none; }
.erp-modal__tabs { flex: 0 0 auto; padding: 0 var(--space-6); border-bottom: 1px solid var(--line); background: var(--surface); }
.erp-modal__tabs .tab-row { margin-bottom: 0; border-bottom: none; }

/* ---- help panel (right-side docs drawer, erp/_help_panel.html) ---- */
.erp-help-panel {
  position: fixed; top: 0; inset-inline-end: 0; bottom: 0; z-index: var(--z-modal);
  width: min(400px, 92vw); display: flex; flex-direction: column;
  background: var(--surface); border-inline-start: 1px solid var(--line); box-shadow: var(--elev-3);
  transform: translateX(100%); transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  /* hidden while closed: its shadow otherwise bleeds into the right edge of every page */
  visibility: hidden;
}
html.help-open .erp-help-panel { transform: translateX(0); visibility: visible; transition: transform var(--dur) var(--ease), visibility 0s; }
.erp-help-backdrop {
  display: none; position: fixed; inset: 0; z-index: var(--z-backdrop);
  background: rgba(13, 33, 29, 0.4); opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
html.help-open .erp-help-backdrop { display: block; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .erp-help-panel, .erp-help-backdrop { transition: none; }
}
.erp-help-panel__head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line);
}
.erp-help-panel__head strong { font-size: var(--text-lg); }
.erp-help-panel__close {
  border: none; background: none; color: var(--text-subtle); cursor: pointer;
  font-size: 22px; line-height: 1; padding: var(--space-1) var(--space-2);
}
.erp-help-panel__close:hover { color: var(--text); }
.erp-help-panel__body { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-2); }
.erp-help-domain { border-bottom: 1px solid var(--line); }
.erp-help-domain:last-child { border-bottom: none; }
.erp-help-domain > summary {
  display: flex; align-items: center; gap: var(--space-3); list-style: none; cursor: pointer;
  padding: var(--space-3); border-radius: var(--radius-sm); font-weight: 600;
}
.erp-help-domain > summary::-webkit-details-marker { display: none; }
.erp-help-domain > summary:hover { background: var(--surface-hover); }
.erp-help-domain > summary .ic { color: var(--text-subtle); flex-shrink: 0; }
.erp-help-domain__label { flex: 1; }
.erp-help-group {
  margin: var(--space-4) var(--space-3) var(--space-1); font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle);
}
.erp-help-group:first-child { margin-top: var(--space-1); }
.erp-help-domain__here {
  font-size: var(--text-2xs); font-weight: 600; color: var(--brand); background: var(--brand-tint);
  border-radius: var(--radius-pill); padding: 1px 8px;
}
.erp-help-domain__count {
  font-size: var(--text-2xs); color: var(--text-subtle); background: var(--surface-sunken);
  border-radius: var(--radius-pill); padding: 1px 8px;
}
.erp-help-domain__list { list-style: none; margin: 0; padding: 0 var(--space-3) var(--space-3) calc(16px + var(--space-3) + var(--space-3)); }
.erp-help-domain__list li + li { margin-top: var(--space-1); }
.erp-help-domain__list a { color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); }
.erp-help-domain__list a:hover { color: var(--brand); text-decoration: underline; }
.erp-help-domain__empty {
  margin: 0; padding: 0 var(--space-3) var(--space-3) calc(16px + var(--space-3) + var(--space-3));
  font-size: var(--text-sm); color: var(--text-subtle);
}
.erp-help-panel__foot {
  flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line);
}
.erp-help-panel__foot a { font-size: var(--text-sm); color: var(--brand); text-decoration: none; }
.erp-help-panel__foot a:hover { text-decoration: underline; }

/* ---- notification panel (right-side drawer, erp/_notifications_panel.html) ----
   Same slide-in mechanism as .erp-help-panel/.erp-collab-panel above —
   kept as its own sibling ruleset for the same reason collaboration.css
   gives .erp-collab-panel one: each panel's open state (html.notif-open)
   is independent of the others. */
.erp-notif-panel {
  position: fixed; top: 0; inset-inline-end: 0; bottom: 0; z-index: var(--z-modal);
  width: min(400px, 92vw); display: flex; flex-direction: column;
  background: var(--surface); border-inline-start: 1px solid var(--line); box-shadow: var(--elev-3);
  transform: translateX(100%); transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  /* hidden while closed: its shadow otherwise bleeds into the right edge of every page */
  visibility: hidden;
}
html.notif-open .erp-notif-panel { transform: translateX(0); visibility: visible; transition: transform var(--dur) var(--ease), visibility 0s; }
.erp-notif-backdrop {
  display: none; position: fixed; inset: 0; z-index: var(--z-backdrop);
  background: rgba(13, 33, 29, 0.4); opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
html.notif-open .erp-notif-backdrop { display: block; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .erp-notif-panel, .erp-notif-backdrop { transition: none; }
}
.erp-notif-panel__head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line);
}
.erp-notif-panel__head strong { font-size: var(--text-lg); }
.erp-notif-panel__body { flex: 1; min-height: 0; overflow-y: auto; }
.erp-notif-panel__loading { padding: var(--space-5); text-align: center; color: var(--text-subtle); font-size: var(--text-sm); }
.erp-notif-panel__foot {
  flex-shrink: 0; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line);
}
.erp-notif-panel__foot a { font-size: var(--text-sm); color: var(--brand); text-decoration: none; font-weight: 600; }
.erp-notif-panel__foot a:hover { text-decoration: underline; }

/* notif-app: the toolbar above the shared .notif-list (components.css) —
   used both inside this panel and on the full erp/notifications.html
   page (see erp/_partials/notifications_list.html). */
.notif-app__toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}
.notif-app__tabs { display: flex; gap: var(--space-2); }
.notif-app__actions { display: flex; align-items: center; gap: var(--space-2); }
.notif-app__search {
  height: 30px; padding: 0 var(--space-2); width: 140px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: var(--text-sm); background: var(--surface);
}
.notif-app__icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: none; color: var(--text-subtle); cursor: pointer;
}
.notif-app__icon-btn:hover { color: var(--danger); border-color: var(--danger); }
.notif-app__mark-all { padding: 0 var(--space-4) var(--space-2); }
.notif-app__link-btn {
  border: none; background: none; padding: 0; cursor: pointer;
  font-size: var(--text-sm); font-weight: 600; color: var(--brand);
}
.notif-app__link-btn:hover { text-decoration: underline; }
.erp-notif-panel__body .notif-app__toolbar,
.erp-notif-panel__body .notif-app__mark-all { padding-inline-start: var(--space-5); padding-inline-end: var(--space-5); }
.erp-notif-panel__body .notif-item { padding-inline-start: var(--space-5); padding-inline-end: var(--space-5); }

/* body reset so the shell owns the viewport */
body.erp { margin: 0; background: var(--canvas); }

/* ==========================================================================
   Density — body.density-dense, set from foundation.UserProfile.density
   (see erp/shell.html's <body> class + Profile > Preferences). Nearly
   everything in base/components/shell.css spaces itself off the
   --space-* tokens, so redefining those here cascades through panels,
   tables, forms and menus without a per-component override; the few
   controls with their own fixed px sizing get explicit rules below.
   ========================================================================== */
body.density-dense {
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 22px;
  --text-base: 13px;
  --text-md: 14px;
}
body.density-dense .btn { min-height: 32px; }
body.density-dense .btn-lg { min-height: 38px; }
body.density-dense .btn-icon { width: 32px; }
body.density-dense .field input,
body.density-dense .field textarea,
body.density-dense .field select { padding: 6px var(--space-3); }
body.density-dense .field { margin-bottom: var(--space-3); }
body.density-dense .line-items-table input,
body.density-dense .line-items-table select { padding: 3px var(--space-2); }