/* ============================================================
   Modern top bar + collapsible side nav.
   Loaded LAST in BEngine/inc-css.php so it wins over main.css.

   Only appearance + collapse is new. Every hook the old markup and
   JS rely on is untouched: .rate-menu / .mobi-rate-menu (T.menu_mobi),
   .sub-menu, li.active, .icon-active, #upload_logo, .dropdown-toggle.
   ============================================================ */

:root {
  --nav-w:        256px;
  --nav-w-rail:   68px;
  --bar-h:        62px;

  --ink:          #0c2439;
  --navy:         #123a5c;
  --navy-2:       #0e2c46;
  --blue:         #2b74b0;
  --blue-soft:    #e7f0f8;
  --line:         #dbe4ec;
  --paper:        #ffffff;
  --paper-2:      #f4f7fa;
  --muted:        #6b8098;

  --ease:         cubic-bezier(.4, 0, .2, 1);
  --serif:        "Merriweather", Georgia, "Times New Roman", serif;
}

body.nav-collapsed { --nav-w: var(--nav-w-rail); }

/* ============================ TOP BAR ============================ */

#wrapper .header {
  position: sticky;
  top: 0;
  z-index: 1030;               /* under Bootstrap's modal backdrop (1040) */
  height: var(--bar-h);
  min-height: var(--bar-h);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 1px 3px rgba(12, 36, 57, .18);
  border-radius: 0;
  margin-bottom: 0;
}

#wrapper .header > .container-fluid {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--bar-h);
  padding: 0 14px;
}

/* brand ---------------------------------------------------------- */

.nav-brand {
  order: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .2px;
  white-space: nowrap;
  text-decoration: none;
}
.nav-brand:hover, .nav-brand:focus { color: #fff; text-decoration: none; }

.nav-brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), #6aa6d8);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--serif);
  box-shadow: 0 2px 8px rgba(43, 116, 176, .45);
}
.nav-brand-sub {
  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  border-left: 1px solid rgba(255, 255, 255, .18);
  padding-left: 10px;
}

/* hamburgers ------------------------------------------------------ */

/* Exactly one of these is ever visible — #nav-toggle collapses the desktop
   rail, .menu-admin-mobi (T.menu_mobi) opens the mobile drawer. Neither sets
   `display` here; the media queries below own that, otherwise this rule's
   specificity would beat main.css and show both at once. */
#nav-toggle,
#wrapper .menu-admin-mobi {
  order: 1;
  flex: 0 0 auto;
  position: static;
  float: none;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
#nav-toggle:hover,
#wrapper .menu-admin-mobi:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
#nav-toggle:active { transform: scale(.93); }
#nav-toggle > i { transition: transform .25s var(--ease); }
body.nav-collapsed #nav-toggle > i { transform: rotate(90deg); }

#nav-toggle { display: none; }

/* right-hand actions ---------------------------------------------- */

#wrapper .header #lag { order: 3; margin: 0 0 0 auto; }
#wrapper .header #lag .goog-te-gadget { color: transparent; font-size: 0; }

#wrapper .menu-top-right {
  order: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  float: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
#wrapper .menu-top-right > a,
#wrapper .menu-top-right > li { display: inline-flex; align-items: center; }

#wrapper .menu-top-right > a.btn {
  margin: 0 !important;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
#wrapper .menu-top-right > a.btn:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
#wrapper .menu-top-right > a.btn:active { transform: translateY(1px); }
#wrapper .menu-top-right > a.btn-to-hotel {
  background: var(--blue);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 10px rgba(43, 116, 176, .4);
}
#wrapper .menu-top-right > a.btn-to-hotel:hover { background: #3585c4; }

/* account chip + dropdown ----------------------------------------- */

#wrapper .menu-top-right > li.dropdown { background: none; }
#wrapper .menu-top-right a.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 7px 12px;
  font-family: var(--serif);
  font-size: 12.5px;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  box-shadow: none;
  transition: background .18s var(--ease);
}
#wrapper .menu-top-right a.dropdown-toggle:hover { background: rgba(255, 255, 255, .17); }
#wrapper .menu-top-right a.dropdown-toggle > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#wrapper .menu-top-right .caret { transition: transform .2s var(--ease); }
#wrapper .menu-top-right .open > .dropdown-toggle .caret { transform: rotate(180deg); }

#wrapper .menu-top-right .dropdown-menu {
  right: 0;
  left: auto;
  min-width: 180px;
  margin-top: 8px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(12, 36, 57, .22);
  animation: navMenuIn .16s var(--ease);
}
#wrapper .menu-top-right .dropdown-menu > li > a {
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--ink);
}
#wrapper .menu-top-right .dropdown-menu > li > a:hover {
  background: var(--blue-soft);
  color: var(--navy);
}

@keyframes navMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ============================ SIDE NAV ============================ */

#wrapper .rate-menu {
  font-family: var(--serif);
  background: var(--paper);
  border-right: 1px solid var(--line);
  min-height: 0;
  padding: 0;
}

#wrapper .rate-menu > ul {
  margin: 0;
  padding: 8px 10px 24px;
  list-style: none;
}

#wrapper .rate-menu > ul > li {
  position: relative;
  margin-bottom: 2px;
  padding: 0;
  font-size: 13.5px;
  font-weight: 400;
  border-radius: 9px;
  transition: background .16s var(--ease);
}
#wrapper .rate-menu > ul > li:hover { background: var(--paper-2); }

#wrapper .rate-menu > ul > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  color: #33506b;
  text-decoration: none;
  border-radius: 9px;
  transition: color .16s var(--ease);
}
#wrapper .rate-menu > ul > li > a:hover { color: var(--navy); }

#wrapper .rate-menu > ul > li > a > i {
  flex: 0 0 20px;
  margin: 0;
  font-size: 15px;
  text-align: center;
  color: var(--muted);
  transition: color .16s var(--ease), transform .16s var(--ease);
}
#wrapper .rate-menu > ul > li:hover > a > i { color: var(--blue); transform: scale(1.12); }

#wrapper .rate-menu > ul > li > a > .caret {
  margin-left: auto;
  opacity: .45;
  transition: transform .2s var(--ease);
}
#wrapper .rate-menu > ul > li.active > a > .caret { transform: rotate(180deg); opacity: .9; }

/* active section --------------------------------------------------- */

#wrapper .rate-menu > ul > li.active {
  background: var(--blue-soft);
}
#wrapper .rate-menu > ul > li.active > a { color: var(--navy); font-weight: 700; }
#wrapper .rate-menu > ul > li.active > a > i { color: var(--blue); }
#wrapper .rate-menu > ul > li.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--blue);
}

/* the old markup appends a stray caret glyph after each active <li> */
#wrapper .rate-menu span.icon-active { display: none; }

/* submenu ---------------------------------------------------------- */

#wrapper .rate-menu ul.sub-menu {
  margin: 2px 0 8px;
  padding: 4px 0 4px 30px;
  background: none;
  position: relative;
  list-style: none;
}
#wrapper .rate-menu ul.sub-menu:before {
  content: "";
  position: absolute;
  left: 21px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  height: auto;
  border: 0;
  background: var(--line);
}
#wrapper .rate-menu ul.sub-menu > li { border-radius: 7px; }
#wrapper .rate-menu ul.sub-menu > li > a {
  display: block;
  padding: 7px 10px;
  font-family: "Open Sans", sans-serif;
  font-size: 12.5px;
  color: #5a7590;
  border-radius: 7px;
  text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease), padding-left .15s var(--ease);
}
#wrapper .rate-menu ul.sub-menu > li > a:hover {
  background: var(--paper-2);
  color: var(--navy);
  padding-left: 15px;
}
#wrapper .rate-menu ul.sub-menu > li.active > a {
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(43, 116, 176, .3);
}

/* logo tile (first item) ------------------------------------------- */

#wrapper .rate-menu .logo {
  position: relative;
  padding: 14px 10px 16px;
  margin-bottom: 6px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
#wrapper .rate-menu .logo img {
  max-height: 76px;
  width: auto;
  margin: 0 auto 10px;
  border-radius: 8px;
  transition: max-height .2s var(--ease);
}
#wrapper .rate-menu .logo label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px !important;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 20px;
  cursor: pointer;
  transition: background .16s var(--ease);
}
#wrapper .rate-menu .logo label:hover { background: #d5e6f4; }
#wrapper .rate-menu .logo label i { margin: 0; }
#wrapper .rate-menu .logo #upload_logo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
}

/* ===================== DESKTOP LAYOUT + RAIL ====================== */

/* Rail from 992px up. Below that the column is too narrow to give 256px away,
   so the same menu is served as the off-canvas drawer instead — one breakpoint
   for both, rather than a rail that gets progressively more cramped. */
@media (min-width: 992px) {

  #nav-toggle { display: grid; }

  /* Pinned under the sticky top bar and always exactly as tall as the space
     below it, so the column is never short of the content (the grey stub that
     used to show under the last menu item was the page background). */
  #wrapper .rate-menu:not(.mobi-rate-menu) {
    width: var(--nav-w);
    position: sticky;
    top: var(--bar-h);
    height: calc(100vh - var(--bar-h));
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 20;                 /* content column is unpositioned, so this
                                    keeps collapsed flyouts on top of it */
    transition: width .22s var(--ease);
  }

  /* content column is the next sibling in every page shell */
  #wrapper .rate-menu:not(.mobi-rate-menu) + div {
    width: calc(100% - var(--nav-w));
    min-height: calc(100vh - var(--bar-h));
    transition: width .22s var(--ease);
  }
  #wrapper .bengine-content { min-height: calc(100vh - var(--bar-h)); }

  #wrapper .rate-menu::-webkit-scrollbar { width: 7px; }
  #wrapper .rate-menu::-webkit-scrollbar-thumb {
    background: #c8d5e1;
    border-radius: 4px;
  }

  /* --- collapsed rail --- */

  /* ponytail: flyouts have to escape the rail, and a scroll container clips
     them, so the rail stops scrolling when collapsed. ~14 icon rows (≈640px)
     fit any normal viewport. If the menu grows past that, position the flyout
     with JS instead of bringing back overflow. */
  body.nav-collapsed #wrapper .rate-menu:not(.mobi-rate-menu) {
    overflow: visible;
    height: auto;                /* grow rather than spill on short viewports */
    min-height: calc(100vh - var(--bar-h));
  }

  body.nav-collapsed #wrapper .rate-menu > ul { padding: 8px 8px 24px; }

  /* labels are bare text nodes inside the <a>, so they can only be
     collapsed by zeroing the font and restoring it on the icon */
  body.nav-collapsed #wrapper .rate-menu > ul > li > a {
    justify-content: center;
    gap: 0;
    font-size: 0;
    padding: 12px 0;
  }
  body.nav-collapsed #wrapper .rate-menu > ul > li > a > i { font-size: 17px; }
  body.nav-collapsed #wrapper .rate-menu > ul > li > a > .caret { display: none; }

  body.nav-collapsed #wrapper .rate-menu .logo {
    padding: 10px 4px 12px;
  }
  body.nav-collapsed #wrapper .rate-menu .logo img { max-height: 40px; }
  body.nav-collapsed #wrapper .rate-menu .logo label { display: none; }

  /* submenu becomes a hover flyout */
  body.nav-collapsed #wrapper .rate-menu ul.sub-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 1030;
    min-width: 220px;
    margin: 0;                   /* no gap — a margin here is a dead zone the
                                    pointer crosses and the flyout closes */
    padding: 6px 6px 6px 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(12, 36, 57, .2);
  }
  body.nav-collapsed #wrapper .rate-menu ul.sub-menu:before { display: none; }
  body.nav-collapsed #wrapper .rate-menu > ul > li:hover {
    z-index: 30;                 /* lift the row so its flyout clears siblings */
  }
  body.nav-collapsed #wrapper .rate-menu > ul > li:hover > ul.sub-menu {
    display: block;
    animation: navFlyIn .16s var(--ease);
  }
  /* a hovered rail row keeps the accent even when it isn't the active page */
  body.nav-collapsed #wrapper .rate-menu > ul > li:hover > a { color: var(--navy); }
  body.nav-collapsed #wrapper .rate-menu ul.sub-menu > li > a { font-size: 12.5px; }
}

@keyframes navFlyIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ========================= MOBILE DRAWER ========================== */

@media (max-width: 991px) {

  /* main.css only hides the in-page menu below 768px */
  #wrapper .rate-menu:not(.mobi-rate-menu) { display: none; }
  #wrapper .rate-menu:not(.mobi-rate-menu) + div { width: 100%; float: none; }

  #wrapper .menu-admin-mobi { display: grid; }
  #wrapper .header #lag { display: none; }
  #wrapper .menu-top-right { margin-left: auto; min-width: 0; }

  /* T.menu_mobi() flips inline display, so the keyframe is the only slide-in
     available without touching that handler — it replays on every show.
     The huge shadow spread is the backdrop; no extra element needed. */
  #wrapper .mobi-rate-menu.rate-menu {
    position: fixed;
    top: var(--bar-h);
    left: 0;
    bottom: 0;
    z-index: 1035;
    width: 286px;
    max-width: 84vw;
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid var(--line);
    box-shadow: 0 0 0 100vmax rgba(9, 27, 43, .55);
    animation: navDrawerIn .24s var(--ease);
  }

  /* touch targets */
  #wrapper .mobi-rate-menu > ul > li > a { padding: 13px 12px; }
  #wrapper .mobi-rate-menu ul.sub-menu > li > a { padding: 10px 12px; }
  #wrapper .mobi-rate-menu .logo img { max-height: 60px; }
}

@media (max-width: 767px) {

  :root { --bar-h: 56px; }

  #wrapper .header > .container-fluid { padding: 0 8px; gap: 6px; }
  #wrapper .bengine-content > h3 { padding: 14px 15px; font-size: 16px; }

  /* four slots at this width: burger, brand mark, actions, account. What
     can't fit gets dropped rather than squeezed — Refresh goes first, the
     browser's own reload covers it. */
  .nav-brand > span:not(.nav-brand-mark) { display: none; }
  #wrapper .menu-top-right { gap: 6px; }
  #wrapper .menu-top-right > a.btn-refresh { display: none; }
  #wrapper .menu-top-right > a.btn { padding: 7px 9px; font-size: 11px; }
  #wrapper .menu-top-right a.dropdown-toggle {
    max-width: 40vw;
    padding: 6px 9px;
    font-size: 11px;
  }
}

@keyframes navDrawerIn {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: none; }
}

/* ======================= LOGIN / PRE-AUTH ======================== */
.login #nav-toggle,
.root_login #nav-toggle { display: none; }

.login .nav-brand,
.root_login .nav-brand { display: none; }

.login #wrapper .header,
.root_login #wrapper .header { position: static; }

/* ===================== PAGE HEADING (adjacent) ==================== */

#wrapper .bengine-content > h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 18px 22px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
#wrapper .bengine-content > h3 > i {
  color: var(--blue);
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  #wrapper *, #wrapper *::before, #wrapper *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}