/* ═══ Dockable navigation + breadcrumb ═══════════════════════════════════════
   The default (nav-pos-top + nav-pinned) is the app's original horizontal menu —
   these rules only add the left/right rails, the auto-hide behaviour, the dock
   controls and the breadcrumb. Docking is desktop-only (≥992px); on smaller
   screens the existing responsive hamburger menu is used unchanged.
   ────────────────────────────────────────────────────────────────────────── */

:root { --rail-w: 232px; --brand-h: 52px; }

/* ── Layout: the content wrapper must grow so the footer stays at the bottom.
   (body is a flex column with min-height:100vh; .gc-main flexes inside this.) ── */
.gc-shell { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

/* ── Breadcrumb (chip style — matches the approved mockup) ── */
/* A little more vertical room so the breadcrumb isn't cramped against the menu bar. */
.gc-breadcrumb-wrap { background:#fff; border-bottom:1px solid var(--cs-border); }
.gc-breadcrumb-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.7rem; padding-bottom:.7rem; }
.gc-breadcrumb { max-width:100%; min-width:0; }
.gc-breadcrumb ol {
  display:flex; align-items:center; flex-wrap:wrap; gap:7px; list-style:none;
  margin:0; padding:.15rem 0; font-size:.82rem;
}
.gc-breadcrumb li { display:flex; align-items:center; }
.gc-breadcrumb a { color:var(--cs-link); text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.gc-breadcrumb a:hover { text-decoration:underline; }
.gc-breadcrumb .sep { color:#aab6c4; }
.gc-breadcrumb .cur {
  background:#eef6fd; border:1px solid #cfe4f6; color:var(--cs-accent-dk);
  border-radius:20px; padding:2px 11px; font-weight:700; display:inline-flex; align-items:center; gap:5px;
}
@media(max-width:575px){ .gc-breadcrumb ol { padding:.5rem 1.1rem; } }

/* ── Dock controls (shared) ── */
.nav-dock-ctl { display:flex; align-items:center; gap:5px; }
.nav-cbtn {
  width:34px; height:32px; border:1px solid var(--cs-border); background:#fff; border-radius:8px;
  display:grid; place-items:center; cursor:pointer; color:var(--cs-blue); font-size:14px; padding:0;
}
.nav-cbtn:hover { border-color:var(--cs-accent); }
.nav-cbtn.on { background:var(--cs-blue); border-color:var(--cs-blue); color:#fff; }
.nav-posseg { display:inline-flex; border:1px solid var(--cs-border); border-radius:8px; overflow:hidden; }
.nav-segbtn {
  width:32px; height:32px; border:none; border-right:1px solid var(--cs-border); background:#fff;
  cursor:pointer; color:var(--cs-blue); font-size:13px; display:grid; place-items:center; padding:0;
}
.nav-segbtn:last-child { border-right:none; }
.nav-segbtn.on { background:var(--cs-blue); color:#fff; }
.nav-segbtn:hover:not(.on) { background:#f1f5f9; }

/* Top mode: an expander button that opens a popover with the controls */
.nav-expander { margin-left:.35rem; }
.nav-pop {
  position:absolute; top:100%; right:0; margin-top:6px; background:#fff; border:1px solid var(--cs-border);
  border-radius:10px; box-shadow:0 10px 26px rgba(15,32,54,.18); padding:10px; z-index:1050;
  min-width:220px; display:none;
}
.nav-pop.show { display:block; }
.nav-pop { min-width:auto; }
.nav-pop .ph { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--cs-muted); margin:2px 2px 5px; }
.nav-pop .prow { display:flex; gap:5px; margin-bottom:8px; }
.nav-pop .prow:last-child { margin-bottom:0; }
/* The dock-control buttons are always compact icon + tooltip (no text labels). */
.nav-pop .pbtn {
  width:30px; height:28px; border:1px solid var(--cs-border); background:#fff; border-radius:7px;
  color:var(--cs-blue); cursor:pointer; display:grid; place-items:center; font-size:13px; padding:0;
}
.nav-pop .pbtn:hover { border-color:var(--cs-accent); }
.nav-pop .pbtn.on { background:var(--cs-blue); border-color:var(--cs-blue); color:#fff; }

/* The rail cluster (left/right) lives at the bottom of the rail — icon + tooltip only. */
.nav-rail-ctl { display:none; }
.nav-rail-ctl .crow { display:flex; align-items:center; justify-content:center; gap:5px; }
.nav-rail-ctl .nav-cbtn { width:30px; height:28px; font-size:13px; }
.nav-rail-ctl .nav-segbtn { width:28px; height:28px; font-size:12px; }

/* By default (top) show the expander, hide the rail cluster */
.nav-expander { display:inline-flex; position:relative; }

/* ── Desktop docking ── */
@media (min-width: 992px) {
  /* LEFT / RIGHT: the app bar becomes a fixed vertical rail */
  body.nav-dock.nav-pos-left .gc-app-bar,
  body.nav-dock.nav-pos-right .gc-app-bar {
    position:fixed; top:var(--brand-h); bottom:0; width:var(--rail-w); z-index:1030;
    overflow-y:auto; overflow-x:hidden; background:#fff; border-bottom:none;
    transition:transform .28s cubic-bezier(.4,0,.2,1); box-shadow:0 0 18px rgba(15,32,54,.08);
  }
  body.nav-dock.nav-pos-left  .gc-app-bar { left:0;  border-right:3px solid transparent; border-image:var(--cs-grad) 1; }
  body.nav-dock.nav-pos-right .gc-app-bar { right:0; border-left:3px solid transparent;  border-image:var(--cs-grad) 1; }

  body.nav-dock.nav-pos-left .gc-app-inner,
  body.nav-dock.nav-pos-right .gc-app-inner {
    flex-direction:column; align-items:stretch; height:100%; max-width:none; padding:.75rem .6rem;
    flex-wrap:nowrap;
  }
  body.nav-dock.nav-pos-left .gc-app-nav,
  body.nav-dock.nav-pos-right .gc-app-nav { flex-direction:column; align-items:stretch; width:100%; gap:1px; }
  body.nav-dock.nav-pos-left .gc-app-nav > li,
  body.nav-dock.nav-pos-right .gc-app-nav > li { width:100%; }
  body.nav-dock.nav-pos-left .gc-app-nav li a,
  body.nav-dock.nav-pos-right .gc-app-nav li a {
    border-bottom:none; border-left:3px solid transparent; border-radius:6px; padding:.55rem .7rem;
  }
  body.nav-dock.nav-pos-left .gc-app-nav li a.active,
  body.nav-dock.nav-pos-right .gc-app-nav li a.active { border-left-color:var(--cs-brand); background:#eef6fd; }
  body.nav-dock.nav-pos-left .gc-app-nav .dropdown-menu,
  body.nav-dock.nav-pos-right .gc-app-nav .dropdown-menu { position:static !important; transform:none !important; box-shadow:none; border:none; padding-left:1rem; }

  /* rail cluster shows at the bottom; expander hides */
  body.nav-dock.nav-pos-left .nav-rail-ctl,
  body.nav-dock.nav-pos-right .nav-rail-ctl { display:block; margin-top:auto; padding-top:10px; border-top:1px solid var(--cs-border); }
  body.nav-dock.nav-pos-left .nav-expander,
  body.nav-dock.nav-pos-right .nav-expander { display:none; }

  /* push content when pinned */
  body.nav-dock.nav-pos-left.nav-pinned  .gc-shell,
  body.nav-dock.nav-pos-left.nav-pinned  #gc-footer { margin-left:var(--rail-w); }
  body.nav-dock.nav-pos-right.nav-pinned .gc-shell,
  body.nav-dock.nav-pos-right.nav-pinned #gc-footer { margin-right:var(--rail-w); }
  .gc-shell, #gc-footer { transition:margin .28s cubic-bezier(.4,0,.2,1); }

  /* auto-hide (unpinned): the rail slides off; an edge hotzone reveals it */
  body.nav-dock.nav-pos-left:not(.nav-pinned):not(.nav-peek)  .gc-app-bar { transform:translateX(-100%); }
  body.nav-dock.nav-pos-right:not(.nav-pinned):not(.nav-peek) .gc-app-bar { transform:translateX(100%); }
  body.nav-dock.nav-pos-top:not(.nav-pinned):not(.nav-peek)   .gc-app-bar { transform:translateY(-100%); opacity:0; }
  body.nav-dock.nav-pos-top .gc-app-bar { transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .2s; }

  .nav-hotzone { position:fixed; z-index:1029; display:none; }
  body.nav-dock:not(.nav-pinned) .nav-hotzone { display:block; }
  .nav-hotzone.left  { top:var(--brand-h); bottom:0; left:0;  width:9px; }
  .nav-hotzone.right { top:var(--brand-h); bottom:0; right:0; width:9px; }
  .nav-hotzone.top   { top:var(--brand-h); left:0; right:0; height:9px; }
  body.nav-dock.nav-pos-left  .nav-hotzone.top,  body.nav-dock.nav-pos-left  .nav-hotzone.right,
  body.nav-dock.nav-pos-right .nav-hotzone.top,  body.nav-dock.nav-pos-right .nav-hotzone.left,
  body.nav-dock.nav-pos-top   .nav-hotzone.left, body.nav-dock.nav-pos-top   .nav-hotzone.right { display:none !important; }
}

/* Saved-default toast */
.toast-nav {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--cs-nav); color:#fff; padding:11px 18px; border-radius:10px; font-size:.85rem;
  box-shadow:0 8px 24px rgba(0,0,0,.3); opacity:0; transition:.25s; z-index:2000; pointer-events:none;
}
.toast-nav.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast-nav .bi { color:var(--cs-accent); margin-right:6px; }

/* On small screens force the classic top menu regardless of saved preference */
@media (max-width: 991px) {
  body.nav-dock .nav-dock-ctl, body.nav-dock .nav-hotzone { display:none !important; }
}

/* ═══ Compact nav — label modes (icons+tooltip ⇄ icon+title) ══════════════════
   nav-dock.js wraps each nav link's text in <span class="nav-txt"> and sets a
   native title (tooltip) so icon-only mode stays discoverable. Label mode is a
   per-user saved default (nav-labels-auto|icons|text), flippable with Ctrl/⌘+\.
   In "auto", the top bar shows icon+title (with a More overflow) and the side
   rail shows icons+tooltip. Desktop only — small screens keep the hamburger. ── */
.nav-pop-hint { font-size:10.5px; color:var(--cs-muted); margin-top:7px; }

@media (min-width: 992px) {
  /* ── TOP bar, icon-only mode: hide titles, centre icons, drop the label gap ── */
  body.nav-dock.nav-pos-top.nav-labels-icons .gc-app-nav > li > a .nav-txt,
  body.nav-dock.nav-pos-top.nav-labels-icons .gc-app-nav > li.dropdown > a .nav-txt { display:none; }
  body.nav-dock.nav-pos-top.nav-labels-icons .gc-app-nav > li > a i,
  body.nav-dock.nav-pos-top.nav-labels-icons .gc-app-nav > li.dropdown > a i { margin:0 !important; font-size:1.05rem; }
  body.nav-dock.nav-pos-top.nav-labels-icons .gc-app-nav > li > a { padding:.5rem .62rem; }
  /* keep the caret on dropdown toggles even without a label */
  body.nav-dock.nav-pos-top.nav-labels-icons .gc-app-nav .dropdown-toggle::after { margin-left:.15rem; }

  /* ── TOP "More" overflow (built by nav-dock.js in icon+title mode) ── */
  .gc-app-nav .nav-more { position:relative; }
  .gc-app-nav .nav-more > a.dropdown-toggle { cursor:pointer; }
  .gc-app-nav .nav-more .dropdown-menu .dropdown-item { display:flex; align-items:center; gap:.5rem; }
  .gc-app-nav .nav-more .dropdown-item.active { background:#eef6fd; color:var(--cs-nav); font-weight:600; }
  /* hide the moved-into-More originals (JS toggles this class) */
  .gc-app-nav > li.nav-hidden { display:none !important; }

  /* ── SIDE RAIL: default icons+tooltip; widen to titles when text mode or expanded ── */
  body.nav-dock.nav-pos-left:not(.nav-labels-text):not(.nav-rail-expanded),
  body.nav-dock.nav-pos-right:not(.nav-labels-text):not(.nav-rail-expanded) { --rail-w:68px; }

  body.nav-dock.nav-pos-left:not(.nav-labels-text):not(.nav-rail-expanded) .gc-app-nav .nav-txt,
  body.nav-dock.nav-pos-right:not(.nav-labels-text):not(.nav-rail-expanded) .gc-app-nav .nav-txt { display:none; }
  body.nav-dock.nav-pos-left:not(.nav-labels-text):not(.nav-rail-expanded) .gc-app-nav > li > a,
  body.nav-dock.nav-pos-right:not(.nav-labels-text):not(.nav-rail-expanded) .gc-app-nav > li > a { justify-content:center; padding:.55rem 0; }
  body.nav-dock.nav-pos-left:not(.nav-labels-text):not(.nav-rail-expanded) .gc-app-nav > li > a i,
  body.nav-dock.nav-pos-right:not(.nav-labels-text):not(.nav-rail-expanded) .gc-app-nav > li > a i { margin:0 !important; font-size:1.15rem; }
  /* collapsed rail: drop the dropdown caret; the submenu still opens on click below the icon */
  body.nav-dock.nav-pos-left:not(.nav-labels-text):not(.nav-rail-expanded) .gc-app-nav .dropdown-toggle::after,
  body.nav-dock.nav-pos-right:not(.nav-labels-text):not(.nav-rail-expanded) .gc-app-nav .dropdown-toggle::after { display:none; }
  /* the collapsed rail's flyout menus overlay to the side instead of pushing width */
  body.nav-dock.nav-pos-left:not(.nav-labels-text):not(.nav-rail-expanded) .gc-app-nav .dropdown-menu,
  body.nav-dock.nav-pos-right:not(.nav-labels-text):not(.nav-rail-expanded) .gc-app-nav .dropdown-menu {
    position:absolute !important; left:100% !important; top:0 !important; padding-left:.35rem;
    background:#fff; border:1px solid var(--cs-border) !important; box-shadow:0 8px 22px rgba(15,32,54,.16) !important;
    border-radius:8px; min-width:190px;
  }
  body.nav-dock.nav-pos-right:not(.nav-labels-text):not(.nav-rail-expanded) .gc-app-nav .dropdown-menu {
    left:auto !important; right:100% !important;
  }
  .gc-app-bar { transition:width .2s cubic-bezier(.4,0,.2,1); }

  /* The rail expand button flips its chevron when expanded */
  body.nav-dock.nav-rail-expanded .nav-rail-ctl [data-nav-act="expand"] i { transform:rotate(180deg); }
  /* hide the rail's own expand button when the rail is showing titles anyway (text mode) */
  body.nav-dock.nav-labels-text .nav-rail-ctl [data-nav-act="expand"] { display:none; }
}