/* Page-level module navigation.
   ------------------------------------------------------------------
   A module whose pages are peers of one workspace (Transaction: 3.1 New Deposit /
   3.3 Bulk Adjustment / 3.4 Bank Deposit Usage) keeps ONE row in the sidebar and puts
   its section links on the page itself, directly under the page header, on the content
   container's own left edge. The sidebar therefore no longer opens a floating submenu
   over the page content; the module row only carries the module's active state.

   Visual language is the Admin Management tab row (.mad-tab in
   menu-permission-executive.css): text only — no buttons, no per-tab cards, no
   gradient — active state is dark text over a 2px orange underline. The one control the
   row carries is the per-tab Dashboard pin, which its own tab reveals and which is not
   drawn at rest (see "Per-tab pin" below).

   Tokens are the Transaction module's own set. bo-wallet-transaction-amber.css states
   --bo-border / --bo-text / --bo-muted / --bo-cyan on body.bo-wallet-tx and re-states
   them for dark mode, so the row follows the page's theme without a second copy of the
   palette here; the literals are only a fallback for a page that misses that sheet.
   ------------------------------------------------------------------ */

.bo-module-tabs{
  display:flex;
  align-items:stretch;
  flex-wrap:nowrap;
  gap:4px;
  width:100%;
  height:48px;
  min-height:48px;
  box-sizing:border-box;
  /* No bottom margin: every page this row appears on is a `bo-wallet-tx` content column
     (`display:flex; flex-direction:column` with its own gap), so a margin here would be a
     second, competing space between the tabs and whatever follows them. */
  margin:0;
  padding:0;
  border-bottom:1px solid var(--bo-border,#EADCC8);
  /* A narrow screen scrolls this row sideways. The module never falls back to a
     second-level sidebar. */
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.bo-module-tabs::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.bo-module-tabs .bo-module-tab{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  height:100%;
  margin:0;
  padding:0 12px;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  background:transparent!important;
  color:var(--bo-muted,#71717A);
  font-size:13.5px;
  font-weight:650;
  line-height:1.2;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:color .16s var(--bo-ease,ease),border-color .16s var(--bo-ease,ease);
}

.bo-module-tabs .bo-module-tab:hover{
  background:transparent!important;
  color:var(--bo-text,#18191C);
}

.bo-module-tabs .bo-module-tab.is-active{
  background:transparent!important;
  color:var(--bo-text,#18191C)!important;
  font-weight:800;
  border-bottom-color:var(--bo-cyan,#D97706)!important;
}

.bo-module-tabs .bo-module-tab:focus-visible{
  outline:2px solid var(--bo-cyan,#D97706);
  outline-offset:2px;
  box-shadow:0 0 0 3px var(--bo-cyan-tint,rgba(217,119,6,.14));
}

/* ------------------------------------------------------------------
   Per-tab pin.
   Every tab carries the pin of the page it points at — the SAME control the sidebar rows
   carry, writing the same store (window.__boUiSetting.headerMenuKeys, PUT
   /admin/ui-setting, see auth.js moduleTabHtml). It lives here because a module's sidebar
   was collapsed into ONE row: the module's pages are no longer listed in the rail, so the
   tab row is the last place their own pin can be.

   Deliberately not drawn like the sidebar's pin. That one is always on and sits in the
   rail's own gutter; a second copy of it on every tab would turn a text row into a row of
   buttons, which is the one thing this row's design language rules out. So the row stays
   text at rest, the pin is revealed by the tab it belongs to, and a pinned tab keeps it on.

   Nothing about the resting row moves: same height, same padding, same font. The reveal
   shifts the LABEL with a transform rather than with padding or width, so tabs never shove
   each other sideways while the pointer crosses the row, and the pin is absolutely
   positioned inside the tab's own right padding so it costs the row no width at all.
   The 8px the label gives up while its pin is shown is what the pin sits in; the tab's
   left padding keeps 4px of its 12. The glyph is 18px and carries no backdrop: a filled pill
   in this row reads as a button glued to the tab's own name. ---- */
.bo-module-tabs .bo-module-tab{
  /* the pin is positioned inside the tab, so the tab is its containing block */
  position:relative;
}

.bo-module-tabs .bo-module-tab-label{
  display:inline-block;
  transition:transform .16s var(--bo-ease,ease);
}

.bo-module-tabs .bo-module-tab-pin{
  position:absolute;
  top:50%;
  right:0;
  width:18px;
  height:18px;
  margin:0;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--bo-muted,#71717A);
  font-size:12px;
  line-height:1;
  cursor:pointer;
  /* Invisible at rest, but never display:none: it keeps its place in the tab's focus
     order, and pointer-events off means a click where it is not drawn still opens the
     tab instead of hitting a control nobody can see. */
  opacity:0;
  pointer-events:none;
  transform:translate(6px,-50%);
  transition:opacity .16s var(--bo-ease,ease),transform .16s var(--bo-ease,ease),color .16s var(--bo-ease,ease),background .16s var(--bo-ease,ease);
}

/* A 18px glyph with a 26px target: the visual stays in the row's own scale, the hit area does
   not go below the touch/pointer minimum. */
.bo-module-tabs .bo-module-tab-pin::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:10px;
}

.bo-module-tabs .bo-module-tab:hover .bo-module-tab-pin,
.bo-module-tabs .bo-module-tab:focus-within .bo-module-tab-pin,
.bo-module-tabs .bo-module-tab.is-pinned .bo-module-tab-pin{
  opacity:1;
  pointer-events:auto;
  transform:translate(0,-50%);
}

/* The tab makes room for its own pin. `is-pinned` carries the same shift, so a pinned tab
   is not left with the pin sitting on its last letter — and the shift itself is the mark
   that this tab is pinned, in the row's own vocabulary (nothing added, nothing coloured). */
.bo-module-tabs .bo-module-tab:hover .bo-module-tab-label,
.bo-module-tabs .bo-module-tab:focus-within .bo-module-tab-label,
.bo-module-tabs .bo-module-tab.is-pinned .bo-module-tab-label{
  transform:translateX(-8px);
}

/* No pill behind it, and no colour change to black. A filled box on hover made the glyph read
   as a chip glued to the last letter of the tab's name - which is what the owner circled
   ("需要调整"), and it put a button-shaped object in a row whose whole language is text. The
   feedback is the glyph itself: muted → amber on hover (amber is what a pinned one looks
   like, so the hover previews the state it will leave behind), and a 12% scale when it is
   ALREADY amber - the one case a colour change cannot say anything. */
.bo-module-tabs .bo-module-tab-pin:hover,
.bo-module-tabs .bo-module-tab-pin:focus-visible{
  color:var(--bo-cyan,#D97706);
  transform:translate(0,-50%) scale(1.12);
}

.bo-module-tabs .bo-module-tab.is-pinned .bo-module-tab-pin{
  color:var(--bo-cyan,#D97706);
}

.bo-module-tabs .bo-module-tab-pin:focus-visible{
  outline:2px solid var(--bo-cyan,#D97706);
  outline-offset:1px;
}

/* No hover to reveal it with (touch), or a narrow layout where the sidebar pins are on
   their whole width anyway: show it, and give the label its room up front. */
@media(hover:none),(max-width:991.98px){
  .bo-module-tabs .bo-module-tab-pin{
    opacity:1;
    pointer-events:auto;
    transform:translate(0,-50%);
  }
  .bo-module-tabs .bo-module-tab-label{
    transform:translateX(-6px);
  }
}

/* The reveal is a 6px slide and an opacity ramp; with motion reduced, only the ramp. */
@media(prefers-reduced-motion:reduce){
  .bo-module-tabs .bo-module-tab-label{
    transition:none;
  }
  .bo-module-tabs .bo-module-tab-pin{
    transform:translate(0,-50%);
    transition:opacity .16s linear;
  }
}

@media(max-width:991.98px){
  .bo-module-tabs{
    height:44px;
    min-height:44px;
    margin-bottom:12px;
  }
  .bo-module-tabs .bo-module-tab{
    padding:0 10px;
    font-size:13px;
  }
}

/* ------------------------------------------------------------------
   The module's sidebar row, now that it opens no submenu.
   The row is the module's active marker for every page inside the module, and it keeps
   exactly the look it had while its submenu was open — the "cream chip + left amber pill
   bar (locked reference)" rules in bo-wallet-transaction-amber.css — restated for the
   direct-anchor shape so the module's active state does not disappear with the flyout.
   Same values, no new palette. The selector is deliberately as long as theirs: the idle
   rule `... .nav-group .nav-group-btn{background:transparent!important}` is itself
   specific, and a shorter selector here would lose to it and leave the row unmarked.
   ------------------------------------------------------------------ */
html:not([data-bo-theme="dark"]) body.bo-wallet-tx .report-sidebar .report-nav .nav-group .nav-group-btn.nav-group-direct.active{
  position:relative;
  background:linear-gradient(135deg,#FFF8EF 0%,#FFE8CC 48%,#FFF3E0 100%)!important;
  color:#6b360c!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 0 0 1px rgba(217,119,6,.18),
    0 6px 16px rgba(217,119,6,.12)!important;
  border:0!important;
  border-radius:10px!important;
  overflow:hidden;
  text-shadow:none;
}

html:not([data-bo-theme="dark"]) body.bo-wallet-tx .report-sidebar .report-nav .nav-group .nav-group-btn.nav-group-direct.active::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  bottom:7px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,#FBBF24 0%,#D97706 100%);
  box-shadow:0 0 10px rgba(217,119,6,.35);
  pointer-events:none;
  z-index:1;
}

html:not([data-bo-theme="dark"]) body.bo-wallet-tx .report-sidebar .report-nav .nav-group .nav-group-btn.nav-group-direct.active i{
  color:#6b360c!important;
  opacity:1;
  filter:none;
}

html[data-bo-theme="dark"] body.bo-wallet-tx .report-sidebar .report-nav .nav-group .nav-group-btn.nav-group-direct.active{
  position:relative;
  background:linear-gradient(90deg,rgba(245,158,11,.16) 0%,rgba(245,158,11,.05) 45%,transparent 100%)!important;
  color:#FBBF24!important;
  box-shadow:
    inset 0 1px 0 rgba(245,158,11,.18),
    inset 0 -1px 0 rgba(245,158,11,.10),
    0 0 28px rgba(245,158,11,.12)!important;
  border:0!important;
  border-radius:8px!important;
  overflow:hidden;
  text-shadow:0 0 18px rgba(245,158,11,.45);
}

html[data-bo-theme="dark"] body.bo-wallet-tx .report-sidebar .report-nav .nav-group .nav-group-btn.nav-group-direct.active::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg,#FDE68A 0%,#F59E0B 55%,#D97706 100%);
  box-shadow:0 0 10px rgba(245,158,11,.9),0 0 18px rgba(245,158,11,.5);
  pointer-events:none;
  z-index:1;
}

html[data-bo-theme="dark"] body.bo-wallet-tx .report-sidebar .report-nav .nav-group .nav-group-btn.nav-group-direct.active i{
  color:#FBBF24!important;
  filter:drop-shadow(0 0 8px rgba(245,158,11,.65));
}

/* ------------------------------------------------------------------
   11.1 Roles & Permissions (menu-permission.html) — the same row, on the one page of the
   Access Control family that cannot get it from bo-charcoal-shell.css.

   The module's collapsed row is painted by `body.report-body.bo-charcoal ... .nav-group-btn.active`
   in the BO shell sheet. That page IS in the BO's Access Control group and now carries the
   module row like its five siblings, but it is a Main panel page (data-bo-shell="main") and
   therefore carries no `bo-charcoal` — so the rail sat unmarked on the one page whose whole
   point is that you are inside Access Control. Measured there with the group collapsed
   (1600x900, both themes): `background-image none`, `box-shadow none` against the family's
   cream wash + amber pill on admin-user.html.

   Restated here, next to the row it belongs to, rather than by linking the BO shell sheet
   onto that page: AGENTS.md keeps the two shells apart. Colours only — the row's metrics
   stay the page's own (its rail row is 2px shorter than the BO's and keeps its own inset).
   ------------------------------------------------------------------ */
html:not([data-bo-theme="dark"]) body.menu-permission-page .report-sidebar .report-nav .nav-group > .nav-group-btn.active{
  position:relative;
  background:linear-gradient(135deg,#FFF8EF 0%,#FFE8CC 48%,#FFF3E0 100%)!important;
  color:#6b360c!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 0 0 1px rgba(217,119,6,.18),
    0 6px 16px rgba(217,119,6,.12)!important;
  border:0!important;
  border-radius:10px!important;
  overflow:hidden;
  text-shadow:none;
}

html:not([data-bo-theme="dark"]) body.menu-permission-page .report-sidebar .report-nav .nav-group > .nav-group-btn.active::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  bottom:7px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,#FBBF24 0%,#D97706 100%);
  box-shadow:0 0 10px rgba(217,119,6,.35);
  pointer-events:none;
  z-index:1;
}

html:not([data-bo-theme="dark"]) body.menu-permission-page .report-sidebar .report-nav .nav-group > .nav-group-btn.active i{
  color:#6b360c!important;
  opacity:1;
  filter:none;
}

html[data-bo-theme="dark"] body.menu-permission-page .report-sidebar .report-nav .nav-group > .nav-group-btn.active{
  position:relative;
  background:linear-gradient(90deg,rgba(245,158,11,.16) 0%,rgba(245,158,11,.05) 45%,transparent 100%)!important;
  color:#FBBF24!important;
  box-shadow:
    inset 0 1px 0 rgba(245,158,11,.18),
    inset 0 -1px 0 rgba(245,158,11,.10),
    0 0 28px rgba(245,158,11,.12)!important;
  border:0!important;
  border-radius:8px!important;
  overflow:hidden;
  text-shadow:0 0 18px rgba(245,158,11,.45);
}

html[data-bo-theme="dark"] body.menu-permission-page .report-sidebar .report-nav .nav-group > .nav-group-btn.active::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg,#FDE68A 0%,#F59E0B 55%,#D97706 100%);
  box-shadow:0 0 10px rgba(245,158,11,.9),0 0 18px rgba(245,158,11,.5);
  pointer-events:none;
  z-index:1;
}

html[data-bo-theme="dark"] body.menu-permission-page .report-sidebar .report-nav .nav-group > .nav-group-btn.active i{
  color:#FBBF24!important;
  filter:drop-shadow(0 0 8px rgba(245,158,11,.65));
}