/*
 * DataNoble side navigation skin (design: "User navigation" 2b / 2c).
 * Purely visual — scoped to .sidebar.dn-nav and layered over Material Dashboard,
 * so the Blade logic, permissions and Bootstrap collapses are untouched.
 *
 * Variants: default = left glow bar + gradient wash (2b).
 *           add `dn-nav--pill` to the .sidebar for the inset pill highlight (2c).
 * Background: swap data-image between img/nav/bg-v1.jpg and img/nav/bg-v2.jpg.
 */

.sidebar.dn-nav {
  --dn-accent: #2f7bff;
  --dn-accent-deep: #1a56d6;
  --dn-hover: rgba(255, 255, 255, 0.05);
  --dn-divider: rgba(255, 255, 255, 0.14);
  --dn-logo-h: 112px;
  --dn-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-color: #001a3d;
  font-family: 'Figtree', 'Roboto', system-ui, sans-serif;
}

/* Background image: full strength, no Material wash on top */
.sidebar.dn-nav .sidebar-background { opacity: 1; background-position: center top; }
.sidebar.dn-nav .sidebar-background:after { display: none; }

/* ── Client logo box ─────────────────────────────── */
.sidebar.dn-nav .logo {
  height: var(--dn-logo-h);
  padding: 14px 18px;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar.dn-nav .logo:after { display: none; }
.sidebar.dn-nav .logo a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sidebar.dn-nav .logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.sidebar.dn-nav .sidebar-wrapper {
  height: calc(100vh - var(--dn-logo-h));
  padding: 20px 0 30px;
}

/* ── User block ──────────────────────────────────── */
.sidebar.dn-nav .user {
  margin: 0 0 10px;
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--dn-divider);
}
.sidebar.dn-nav .user:after { display: none; }
.sidebar.dn-nav .user .photo {
  width: 40px;
  height: 40px;
  margin: 2px 0 0 24px;
  background: #e8861c;
  box-shadow: none;
}
.sidebar.dn-nav .user .photo img { width: 100%; height: 100%; object-fit: cover; }
.sidebar.dn-nav .user .user-info > a.username {
  display: block;
  padding: 0 28px 0 14px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 44px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar.dn-nav .user .user-info > a.username > span { padding-right: 18px; }
.sidebar.dn-nav .user .user-info .caret { top: 50%; right: 24px; margin-top: -6px; }
.sidebar.dn-nav .user .collapse .nav,
.sidebar.dn-nav .user .collapsing .nav { margin-top: 10px; }
.sidebar.dn-nav .user .nav .nav-item .nav-link {
  position: relative;
  margin: 0;
  height: 44px;
  padding: 0 24px 0 74px;
  display: flex;
  align-items: center;
  border-radius: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  opacity: 0.92;
  text-transform: none;
}
.sidebar.dn-nav .user .nav .nav-item .nav-link:hover { background-color: var(--dn-hover); }
.sidebar.dn-nav .user .nav .sidebar-mini { display: none !important; }

/* ── Caret → chevron (rotates when the group is open) ── */
.sidebar.dn-nav .caret {
  width: 12px;
  height: 12px;
  border: 0;
  background: var(--dn-caret) center/12px no-repeat;
  opacity: 0.8;
  transition: transform 0.2s;
}
.sidebar.dn-nav [aria-expanded="true"] .caret,
.sidebar.dn-nav .nav-item:has(> .collapse.show) > a .caret,
.sidebar.dn-nav .user-info:has(> .collapse.show) .caret { transform: rotate(180deg); }

/* ── Main menu ───────────────────────────────────── */
.sidebar.dn-nav .dn-nav__menu { margin-top: 0; display: flex; flex-direction: column; gap: 4px; }
.sidebar.dn-nav .dn-nav__menu .nav-item { position: relative; }
/* Keep each item (and its submenu) to the sidebar's width; otherwise a long survey name
   widens the whole group and the text runs off under the sidebar's edge. */
.sidebar.dn-nav .dn-nav__menu > .nav-item,
.sidebar.dn-nav .dn-nav__menu .collapse,
.sidebar.dn-nav .dn-nav__menu .collapsing { width: 100%; min-width: 0; max-width: 100%; }

/* Top-level rows */
.sidebar.dn-nav .dn-nav__menu > .nav-item > .nav-link {
  position: relative;
  margin: 0;
  height: 56px;
  padding: 0 24px 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  text-transform: none;
  transition: background-color 0.15s, box-shadow 0.2s;
}
.sidebar.dn-nav .dn-nav__menu > .nav-item > .nav-link .dn-nav__icon {
  width: 36px;
  height: 36px;
  flex: none;
  object-fit: contain;
}
.sidebar.dn-nav .dn-nav__menu > .nav-item > .nav-link p {
  position: static; /* anchor the caret to the row, not the label */
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-right: 16px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar.dn-nav .dn-nav__menu > .nav-item > .nav-link .caret { position: absolute; top: 50%; right: 24px; margin-top: -6px; }

/* Sub-rows (text only, aligned under the label) */
.sidebar.dn-nav .dn-nav__menu .nav-item .nav .nav-item .nav-link {
  position: relative;
  margin: 2px 0 0;
  min-height: 44px;   /* grows when a long name wraps */
  height: auto;
  padding: 8px 24px 8px 74px;
  display: flex;
  align-items: center;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  text-transform: none;
}
.sidebar.dn-nav .dn-nav__menu .nav-item .nav .nav-link .sidebar-mini { display: none !important; }

/* Sub-item icons: small glyphs centred in the parent's icon column, so the text stays
   aligned under the parent labels and the ringed PNGs remain the top-level marker. */
.sidebar.dn-nav .dn-nav__menu .nav-item .nav .nav-link i.material-icons,
.sidebar.dn-nav .user .nav .nav-item .nav-link i.material-icons {
  position: absolute;
  left: 33px;
  top: 50%;
  width: 18px;
  margin: -9px 0 0;
  float: none;
  color: #fff;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  opacity: 0.7;
}
.sidebar.dn-nav .dn-nav__menu .nav-item .nav .nav-item.active > .nav-link i.material-icons,
.sidebar.dn-nav .nav .nav .nav-link:hover i.material-icons { opacity: 1; }
.sidebar.dn-nav .dn-nav__menu .nav-item .nav .nav-link .sidebar-normal,
.sidebar.dn-nav .dn-nav__menu .nav-item .nav .nav-link p {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.92;
  flex: 1 1 auto;
  min-width: 0;
  /* Wrap rather than truncate: survey names often differ only at the end ("…FY27 - S1" / "- S2") */
  white-space: normal;
  overflow-wrap: anywhere;
  transform: none;
}

/* Hover */
.sidebar.dn-nav .dn-nav__menu .nav-item > .nav-link:hover,
.sidebar.dn-nav .dn-nav__menu .nav-item > .nav-link:focus { background-color: var(--dn-hover); box-shadow: none; }

/* Active: a leaf, or a group whose submenu is closed (an open group lets its child carry the highlight) */
.sidebar.dn-nav .dn-nav__menu .nav-item.active:not(:has(> .collapse.show, > .collapsing)) > .nav-link {
  background-image: linear-gradient(90deg, rgba(47, 123, 255, 0.28), rgba(47, 123, 255, 0.06) 85%, rgba(47, 123, 255, 0));
}
.sidebar.dn-nav .dn-nav__menu .nav-item.active:not(:has(> .collapse.show, > .collapsing)) > .nav-link:before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: var(--dn-accent);
  box-shadow: 0 0 12px rgba(47, 123, 255, 0.8);
}
.sidebar.dn-nav .dn-nav__menu > .nav-item.active:not(:has(> .collapse.show, > .collapsing)) > .nav-link p { font-weight: 700; }
/* sub-items go only to 600 when active, so a name doesn't re-wrap as it becomes bold */
.sidebar.dn-nav .dn-nav__menu .nav .nav-item.active > .nav-link .sidebar-normal,
.sidebar.dn-nav .dn-nav__menu .nav .nav-item.active > .nav-link p { font-weight: 600; }

/* ── Variant 2c: inset pill highlight ────────────── */
.sidebar.dn-nav--pill .sidebar-wrapper { padding-left: 14px; padding-right: 14px; }
.sidebar.dn-nav--pill .user .photo { margin-left: 10px; }
.sidebar.dn-nav--pill .user .user-info > a.username { padding-right: 6px; }
.sidebar.dn-nav--pill .user .user-info .caret { right: 6px; }
.sidebar.dn-nav--pill .dn-nav__menu > .nav-item > .nav-link { padding: 0 14px 0 12px; border-radius: 12px; }
.sidebar.dn-nav--pill .dn-nav__menu > .nav-item > .nav-link .caret { right: 14px; }
.sidebar.dn-nav--pill .dn-nav__menu .nav-item .nav .nav-link i.material-icons,
.sidebar.dn-nav--pill .user .nav .nav-item .nav-link i.material-icons { left: 21px; }
.sidebar.dn-nav--pill .user .nav .nav-item .nav-link,
.sidebar.dn-nav--pill .dn-nav__menu .nav-item .nav .nav-item .nav-link { padding: 0 14px 0 62px; border-radius: 10px; }
.sidebar.dn-nav--pill .dn-nav__menu .nav-item > .nav-link:hover { background-color: rgba(255, 255, 255, 0.06); }
.sidebar.dn-nav--pill .dn-nav__menu .nav-item.active:not(:has(> .collapse.show, > .collapsing)) > .nav-link {
  background-image: linear-gradient(135deg, var(--dn-accent), var(--dn-accent-deep));
  box-shadow: 0 8px 24px rgba(30, 100, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.sidebar.dn-nav--pill .dn-nav__menu .nav-item.active > .nav-link:before { display: none; }

/* ── Collapsible rail ────────────────────────────── */
/* The toggle sits on the sidebar's right edge, just under the logo box. */
.sidebar.dn-nav .dn-nav__toggle {
  position: absolute;
  top: calc(var(--dn-logo-h) - 14px);
  right: -14px;
  z-index: 6;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfe6ee;
  border-radius: 50%;
  background: #fff;
  color: #13315c;
  box-shadow: 0 2px 8px rgba(11, 37, 69, 0.18);
  cursor: pointer;
}
.sidebar.dn-nav .dn-nav__toggle:hover { background: #f2f6fb; }
.sidebar.dn-nav .dn-nav__toggle:focus-visible { outline: 2px solid var(--dn-accent); outline-offset: 2px; }
.sidebar.dn-nav .dn-nav__toggle i { font-size: 20px; line-height: 1; transition: transform 0.25s; }
.dn-nav-mini .sidebar.dn-nav .dn-nav__toggle i { transform: rotate(180deg); }

/* Off-canvas phone/tablet menu has no rail. */
@media (max-width: 991px) {
  .sidebar.dn-nav .dn-nav__toggle { display: none; }
}

/* Collapsed: an 80px icon rail. Hovering the menu (not the toggle) widens it
   back to 260px OVER the page; the short delay stops a cursor passing by from
   flicking it open.
   NOTHING MOVES on hover: the collapsed rail has exactly the open menu's layout —
   open sub-menus stay in place (their icons show, their names are hidden), the
   avatar keeps its position — so hovering only widens the menu and fades the
   names in. (Hiding sub-menus on the rail and showing them on hover pushed every
   item below down and back up.) */
@media (min-width: 992px) {
  .dn-nav-mini .sidebar.dn-nav,
  .dn-nav-mini .sidebar.dn-nav .sidebar-wrapper { width: 80px; }
  .dn-nav-mini .main-panel { width: calc(100% - 80px); }
  .dn-nav-mini .sidebar.dn-nav { z-index: 1040; } /* expands over the fixed top navbar */
  .dn-nav-mini .sidebar.dn-nav .sidebar-wrapper { overflow-x: hidden; }

  /* No logo on the rail: it only shows when the menu is open. The menu moves up
     into its space, and the toggle moves to the top. Hover doesn't bring the logo
     back, so the menu doesn't jump down under the pointer. */
  .dn-nav-mini .sidebar.dn-nav .logo { display: none; }
  .dn-nav-mini .sidebar.dn-nav .sidebar-wrapper { height: 100vh; padding-top: 52px; }
  .dn-nav-mini .sidebar.dn-nav .dn-nav__toggle { top: 14px; }

  /* The menu is laid out at its full OPEN width even on the rail, which simply
     clips it: every row keeps exactly the height and position it has when open
     (a narrow layout wrapped the name block and long survey names onto extra
     lines, so hovering shifted everything). Names are only hidden. */
  .dn-nav-mini .sidebar.dn-nav .sidebar-wrapper > .user,
  .dn-nav-mini .sidebar.dn-nav .sidebar-wrapper > .dn-nav__menu { width: 260px; max-width: none; }
  .sidebar.dn-nav .nav .nav-link :is(p, .sidebar-normal),
  .sidebar.dn-nav .user .user-info > a.username,
  .sidebar.dn-nav .dn-nav__menu > .nav-item > .nav-link .caret { transition: opacity 0.2s; }
  /* !important: the menu's own sub-item rules (opacity .92) are more specific. */
  .dn-nav-mini .sidebar.dn-nav .nav .nav-link :is(p, .sidebar-normal),
  .dn-nav-mini .sidebar.dn-nav .user .user-info > a.username,
  .dn-nav-mini .sidebar.dn-nav .dn-nav__menu > .nav-item > .nav-link .caret { opacity: 0 !important; }

  /* Hover-expand. `dn-nav-nohover` is set by the toggle until the cursor leaves,
     so collapsing doesn't immediately spring it open again under the pointer. */
  .dn-nav-mini:not(.dn-nav-nohover) .sidebar.dn-nav:has(.sidebar-wrapper:hover),
  .dn-nav-mini:not(.dn-nav-nohover) .sidebar.dn-nav:has(.sidebar-wrapper:hover) .sidebar-wrapper {
    width: 260px;
    transition-delay: 0.15s;
  }
  .dn-nav-mini:not(.dn-nav-nohover) .sidebar.dn-nav:has(.sidebar-wrapper:hover) .nav .nav-link :is(p, .sidebar-normal),
  .dn-nav-mini:not(.dn-nav-nohover) .sidebar.dn-nav:has(.sidebar-wrapper:hover) .user .user-info > a.username,
  .dn-nav-mini:not(.dn-nav-nohover) .sidebar.dn-nav:has(.sidebar-wrapper:hover) .dn-nav__menu > .nav-item > .nav-link .caret { opacity: 1 !important; transition-delay: 0.25s; }
}