/* ============================================================================
   juribooks-railpos-v2.css — navigation orientation toggle (vertical | horizontal).

   Default is the vertical emerald rail. When `body[data-railpos="top"]` is set
   (persisted, toggled from the rail-foot button), the rail becomes a slim
   horizontal top bar and the content sits below it — the same shape the app
   already uses at mobile widths, promoted to a user choice at any width.

   Reuses the existing mobile reflow (shell -> column, rail -> row) and nav-v2's
   own horizontal-nav flattening (groups -> a single scrolling strip of items),
   so no new nav behaviour is invented. Presentation only; the nav buttons,
   data-view wiring and switchView are untouched. Emerald & Brass tokens.
   Loaded LAST. Scoped entirely under [data-railpos="top"] so vertical mode is
   byte-for-byte unchanged.
   ========================================================================== */

/* ---- shell: stack the bar over the content ---- */
body[data-railpos="top"] .shell{ flex-direction:column; height:100vh; }

/* ---- rail becomes a horizontal bar ---- */
body[data-railpos="top"] .rail,
body[data-railpos="top"] .rail.mini{
  width:100% !important; height:auto; max-height:none;
  flex-direction:row; align-items:center;
  padding:8px 12px; gap:12px; overflow:visible; flex-shrink:0;
  transition:none;
}
/* frame: a bottom edge instead of a right edge, in both themes */
body[data-railpos="top"] .rail,
[data-theme="dark"] body[data-railpos="top"] .rail{
  border-right:0 !important;
  box-shadow:0 2px 12px -2px rgba(0,0,0,.22) !important;
}

/* ---- brandmark: compact to keep the bar slim ---- */
body[data-railpos="top"] .rail .jb-brandmark{
  margin:0; padding:0; border-bottom:0; flex:0 0 auto;
}
body[data-railpos="top"] .rail .jb-brandmark::after{ display:none; }
body[data-railpos="top"] .rail .jb-brandmark-txt span{ display:none; } /* hide strapline in the bar */
body[data-railpos="top"] .rail .brand{ display:none; } /* firm watermark chip: not in the bar */

/* the width-collapse control is meaningless for a top bar */
body[data-railpos="top"] .navtoggle{ display:none !important; }

/* ---- nav: a horizontal MENU BAR with dropdowns ----
   Each nav-v2 group becomes a top-level menu; its items open in a dropdown on
   hover OR keyboard/click focus (a group label is a <button>, so clicking it
   focuses the group and :focus-within opens the panel — hover, click and tab
   all work with no extra JS). In vertical mode the same groups stay an
   accordion; this whole block only applies under [data-railpos="top"]. */
body[data-railpos="top"] #nav{
  display:flex !important; flex-direction:row; align-items:center;
  flex:1 1 auto; gap:2px; flex-wrap:wrap; row-gap:2px;  /* wrap gracefully rather than overflow */
  overflow:visible !important;              /* let dropdowns escape the bar */
  padding:0 2px !important; margin:0;
}

/* group = a positioned menu container */
body[data-railpos="top"] #nav .jb2-grp{
  display:block !important; position:relative; flex:0 0 auto; margin:0 !important;
}

/* label-less group (nav-v2's "main": Financial Dashboard, AI Insights) has no
   trigger, so its items sit DIRECTLY in the bar rather than in a dropdown. */
body[data-railpos="top"] #nav .jb2-grp:not(:has(> .jb2-glab)){ display:contents !important; }
body[data-railpos="top"] #nav .jb2-grp:not(:has(> .jb2-glab)) > .jb2-items{
  display:contents !important;
}
body[data-railpos="top"] #nav .jb2-grp:not(:has(> .jb2-glab)) > .jb2-items > .jb2-item{
  width:auto !important; flex:0 0 auto; white-space:nowrap;
  min-height:36px; padding:8px 12px !important; border-radius:8px;
}
body[data-railpos="top"] #nav .jb2-grp:not(:has(> .jb2-glab)) > .jb2-items > .jb2-item .jb2-bar{ display:none; }
body[data-railpos="top"] #nav .jb2-grp:not(:has(> .jb2-glab)) > .jb2-items > .jb2-item.on{
  box-shadow:inset 0 -2px 0 var(--accent) !important; border-radius:8px 8px 0 0 !important;
}

/* group label = the menu trigger (was hidden in the old strip) */
body[data-railpos="top"] #nav .jb2-glab{
  display:flex !important; width:auto; white-space:nowrap; cursor:pointer;
  padding:8px 9px !important; border-radius:8px; align-items:center; gap:6px;
  color:rgba(255,255,255,.82) !important;
}
body[data-railpos="top"] #nav .jb2-glab:hover{ color:#fff !important; background:rgba(255,255,255,.10); }
body[data-railpos="top"] #nav .jb2-glab .jb2-chev{ display:none; }   /* menu bar: chevron omitted to save width */
/* highlight the menu whose child is the current view */
body[data-railpos="top"] #nav .jb2-grp:has(.jb2-item.on) > .jb2-glab{
  color:#fff !important; background:rgba(255,255,255,.08);
}

/* the dropdown panel */
body[data-railpos="top"] #nav .jb2-items{
  display:flex !important; flex-direction:column; gap:1px;
  position:absolute; top:calc(100% - 1px); left:0; z-index:80;
  min-width:230px; max-height:min(72vh,560px); overflow-y:auto;
  padding:6px;
  background:#0B4D3A !important; border:1px solid rgba(255,255,255,.14); border-radius:12px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
[data-theme="dark"] body[data-railpos="top"] #nav .jb2-items{ background:#101d17 !important; }
/* open on hover or when focus is anywhere inside the group (click / tab) */
body[data-railpos="top"] #nav .jb2-grp:hover > .jb2-items,
body[data-railpos="top"] #nav .jb2-grp:focus-within > .jb2-items{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}
/* items are full-width rows again inside the dropdown */
body[data-railpos="top"] #nav .jb2-items .jb2-item{
  width:100% !important; flex:0 0 auto; white-space:nowrap;
  min-height:34px; padding:8px 10px !important; border-radius:7px;
}
body[data-railpos="top"] #nav .jb2-items .jb2-bar{ display:block; }
/* menus near the right edge open rightward-anchored so they don't overflow */
body[data-railpos="top"] #nav .jb2-grp:last-child > .jb2-items,
body[data-railpos="top"] #nav .jb2-grp:nth-last-child(2) > .jb2-items{ left:auto; right:0; }
/* dropdown scrollbar */
body[data-railpos="top"] #nav .jb2-items::-webkit-scrollbar{ width:8px; }
body[data-railpos="top"] #nav .jb2-items::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
@media (prefers-reduced-motion: reduce){
  body[data-railpos="top"] #nav .jb2-items{ transition:none; transform:none; }
  body[data-railpos="top"] #nav .jb2-grp:hover > .jb2-items,
  body[data-railpos="top"] #nav .jb2-grp:focus-within > .jb2-items{ transform:none; }
}

/* ---- rail-foot: controls sit at the far end of the bar ---- */
body[data-railpos="top"] .rail-foot{
  margin:0 0 0 auto; padding:0 0 0 12px;
  border-top:0; border-left:1px solid rgba(255,255,255,.14);
  flex-direction:row; width:auto; height:40px; align-items:center; flex:0 0 auto;
}
body[data-railpos="top"] .rail-foot button{ width:36px; height:36px; }

/* ---- content fills the remaining height and scrolls internally ---- */
body[data-railpos="top"] .main{ overflow:hidden; min-height:0; flex:1 1 auto; }

/* ---- orientation toggle button (added by juribooks-railpos-v2.js) ---- */
#railPosBtn svg{ width:18px; height:18px; }