/* ==================================================================
   Admin sidebar v2 - compact, collapsible rail with expandable groups.
   Loaded after admin.css so these rules win.
   ================================================================== */
:root {
  --sb-width: 224px;          /* a touch wider for readability */
  --sb-width-collapsed: 64px;
  --sb-ease: 200ms cubic-bezier(.4, 0, .2, 1);
}

/* ---- width ---- */
.dashboard #nav-sidebar,
#nav-sidebar { flex: 0 0 var(--sb-width) !important; width: var(--sb-width); }
#nav-sidebar {
  padding: 12px 8px;
  overflow-x: hidden;
  transition: flex-basis var(--sb-ease), width var(--sb-ease);
}
.dashboard .main > #nav-sidebar + .content {
  width: calc(100% - var(--sb-width) - 24px) !important;
  transition: width var(--sb-ease);
}
body.sidebar-collapsed .dashboard #nav-sidebar,
body.sidebar-collapsed #nav-sidebar {
  flex: 0 0 var(--sb-width-collapsed) !important;
  width: var(--sb-width-collapsed);
}
body.sidebar-collapsed .dashboard .main > #nav-sidebar + .content {
  width: calc(100% - var(--sb-width-collapsed) - 24px) !important;
}

/* ---- brand ---- */
#nav-sidebar .sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; margin: 0 0 10px; border-radius: 12px;
  background: linear-gradient(135deg, #E26830, #d65a2b);
  box-shadow: 0 6px 16px rgba(226,104,48,.22);
}
#nav-sidebar .brand-avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
  background: #fff5ed; color: #e0642e; font-weight: 800; font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
}
#nav-sidebar .brand-info { color: #fff; line-height: 1.15; min-width: 0; }
#nav-sidebar .brand-name { font-weight: 800; font-size: 15px; letter-spacing: .3px; }
#nav-sidebar .brand-sub { font-size: 11px; opacity: .9; }
#nav-sidebar .sidebar-toggle {
  margin-left: auto; width: 26px; height: 26px; flex: 0 0 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 7px; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.18);
  transition: background var(--sb-ease);
}
#nav-sidebar .sidebar-toggle:hover { background: rgba(255,255,255,.32); }
#nav-sidebar .sidebar-toggle svg { width: 16px; height: 16px; transition: transform var(--sb-ease); }

/* ---- search ---- */
#nav-sidebar .sidebar-search { padding: 0 0 10px; }
#nav-sidebar .search-field {
  display: flex; align-items: center; gap: 7px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; padding: 7px 9px;
}
#nav-sidebar .search-field:focus-within { border-color: #ff7b45; box-shadow: 0 0 0 3px rgba(226,104,48,.12); }
#nav-sidebar .search-field .icon {
  width: 17px; height: 17px; flex-shrink: 0; color: #94a3b8;
  transition: color .18s ease;
}
#nav-sidebar .search-field:focus-within .icon,
#nav-sidebar .search-field.has-value .icon { color: #E26830; }
/* Clear (×) button, shown only while there's text */
#nav-sidebar .search-clear {
  display: none; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
  color: #94a3b8; cursor: pointer; transition: color .15s ease, background .15s ease;
}
#nav-sidebar .search-field.has-value .search-clear { display: inline-flex; }
#nav-sidebar .search-clear:hover { color: #fff; background: #E26830; }
#nav-sidebar .search-clear svg { width: 12px; height: 12px; }
[data-theme="dark"] #nav-sidebar .search-field .icon { color: #64748b; }
#nav-sidebar .search-field input {
  border: none; background: transparent; width: 100%;
  font-size: 13px; outline: none; color: #0f172a; padding: 0;
}

/* ---- rows ---- */
#nav-sidebar .menu-list,
#nav-sidebar .nav-group-items { list-style: none; margin: 0; padding: 0; }
#nav-sidebar .menu-link,
#nav-sidebar .nav-group-header {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 9px; border-radius: 9px; font-size: 13px; line-height: 1.25;
  color: #334155; text-decoration: none; background: none; border: none;
  cursor: pointer; text-align: left;
  transition: background var(--sb-ease), color var(--sb-ease);
}
#nav-sidebar .nav-group-header { font-weight: 700; color: #1f2937; }
#nav-sidebar .menu-link:hover,
#nav-sidebar .nav-group-header:hover { background: #fff2ee; color: #c2512d; }
#nav-sidebar .menu-icon {
  width: 20px; height: 20px; flex: 0 0 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
#nav-sidebar .menu-icon svg { width: 18px; height: 18px; color: #E26830; }
#nav-sidebar .menu-text {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* child rows: indented, bullet aligned under the parent icon */
#nav-sidebar .nav-group-items .menu-link { padding-left: 14px; font-size: 12.5px; color: #475569; }
#nav-sidebar .menu-bullet {
  width: 20px; flex: 0 0 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
#nav-sidebar .menu-bullet::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #cbd5e1;
  transition: background var(--sb-ease), transform var(--sb-ease);
}
#nav-sidebar .menu-link:hover .menu-bullet::before { background: #E26830; transform: scale(1.35); }

/* active page */
#nav-sidebar .menu-item.is-active > .menu-link {
  background: #ffe7db; color: #b64c1e; font-weight: 700;
  box-shadow: inset 3px 0 0 #E26830;
}
#nav-sidebar .menu-item.is-active .menu-bullet::before { background: #E26830; transform: scale(1.4); }

/* ---- chevron + expand animation ---- */
#nav-sidebar .nav-chevron {
  width: 16px; height: 16px; flex: 0 0 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
#nav-sidebar .nav-chevron svg { width: 14px; height: 14px; color: #94a3b8; transition: transform var(--sb-ease); }
#nav-sidebar .nav-group.is-open > .nav-group-header .nav-chevron svg { transform: rotate(90deg); }
#nav-sidebar .nav-group.is-open > .nav-group-header { color: #b64c1e; }
#nav-sidebar .nav-group-items { max-height: 0; overflow: hidden; transition: max-height var(--sb-ease); }
#nav-sidebar .nav-group.no-anim .nav-group-items { transition: none; }
#nav-sidebar .nav-group { margin-bottom: 2px; }
#nav-sidebar .sidebar-empty { text-align: center; color: #94a3b8; font-size: 12px; padding: 14px 0; }

/* ==================== collapsed (icon-only rail) ==================== */
body.sidebar-collapsed #nav-sidebar { padding: 10px 6px; }
body.sidebar-collapsed #nav-sidebar .brand-info,
body.sidebar-collapsed #nav-sidebar .sidebar-search,
body.sidebar-collapsed #nav-sidebar .menu-text,
body.sidebar-collapsed #nav-sidebar .nav-chevron { display: none; }

/* Avatar + toggle can't sit side by side in a 64px rail - stack them,
   otherwise the toggle overflows and gets clipped at the edge. */
body.sidebar-collapsed #nav-sidebar .sidebar-brand {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  margin-bottom: 8px;
}
body.sidebar-collapsed #nav-sidebar .brand-avatar {
  width: 32px; height: 32px; flex: 0 0 32px; font-size: 16px; border-radius: 8px;
}
body.sidebar-collapsed #nav-sidebar .sidebar-toggle {
  margin-left: 0; width: 32px; height: 24px; flex: 0 0 24px;
}
body.sidebar-collapsed #nav-sidebar .sidebar-toggle svg { transform: rotate(180deg); }

/* Icons only: child rows would render as meaningless dots, so hide them. */
body.sidebar-collapsed #nav-sidebar .nav-group-items { display: none !important; }

body.sidebar-collapsed #nav-sidebar .menu-link,
body.sidebar-collapsed #nav-sidebar .nav-group-header {
  justify-content: center; padding: 10px 0; margin-bottom: 2px; gap: 0;
}
body.sidebar-collapsed #nav-sidebar .menu-icon { width: 24px; height: 24px; flex: 0 0 24px; }
body.sidebar-collapsed #nav-sidebar .menu-icon svg { width: 19px; height: 19px; }
/* keep the active marker readable without the label */
body.sidebar-collapsed #nav-sidebar .menu-item.is-active > .menu-link { box-shadow: inset 3px 0 0 #E26830; }

/* tooltips replace the hidden labels */
body.sidebar-collapsed #nav-sidebar [data-tip] { position: relative; }
body.sidebar-collapsed #nav-sidebar [data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: #1f2937; color: #fff; font-size: 12px; font-weight: 600;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap; z-index: 2000;
  box-shadow: 0 6px 18px rgba(0,0,0,.22); pointer-events: none;
}
body.sidebar-collapsed #nav-sidebar [data-tip]:hover::before {
  content: ""; position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-right-color: #1f2937;
  z-index: 2000; pointer-events: none;
}

/* ---- dark theme ---- */
[data-theme="dark"] #nav-sidebar { background: #0f172a; border-right-color: #1f2937; }
[data-theme="dark"] #nav-sidebar .menu-link,
[data-theme="dark"] #nav-sidebar .nav-group-header { color: #cbd5e1; }
[data-theme="dark"] #nav-sidebar .menu-link:hover,
[data-theme="dark"] #nav-sidebar .nav-group-header:hover { background: rgba(255,255,255,.07); color: #fdba74; }
[data-theme="dark"] #nav-sidebar .menu-item.is-active > .menu-link { background: rgba(226,104,48,.20); color: #fdba74; }
[data-theme="dark"] #nav-sidebar .search-field { background: #111827; border-color: #1f2937; }
[data-theme="dark"] #nav-sidebar .search-field input { color: #e2e8f0; }

/*
 * When the off-canvas drawer is open it is always wide (85vw / up to 340px),
 * so labels must never be clipped in it. Keyed on the `nav-open` class the
 * drawer JS sets rather than on a breakpoint, so it holds at any viewport
 * width even if the drawer opens outside the expected media query.
 */
body.nav-open #nav-sidebar .menu-text {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
}
body.nav-open #nav-sidebar .menu-link,
body.nav-open #nav-sidebar .nav-group-header {
  align-items: center;
  line-height: 1.3;
}
/* A drawer is never the icon-only rail, whatever the saved collapsed state. */
body.nav-open #nav-sidebar .menu-text,
body.nav-open #nav-sidebar .brand-info,
body.nav-open #nav-sidebar .sidebar-search { display: block !important; }
body.nav-open #nav-sidebar .nav-chevron { display: inline-flex !important; }
body.nav-open #nav-sidebar .nav-group-items { display: block !important; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  :root { --sb-width: 200px; }
  #nav-sidebar .menu-link,
  #nav-sidebar .nav-group-header { font-size: 12.5px; padding: 7px 8px; }
}

/*
 * <= 768px the base template turns the sidebar into an off-canvas drawer
 * (position:fixed, 85vw, opened by the header's "Menu" button). A drawer is
 * wide, so the icon-only rail must NOT apply there - otherwise the drawer
 * slides out with every label hidden. Undo the collapsed styling and let the
 * drawer rules own the layout.
 */
@media (max-width: 768px) {
  body.sidebar-collapsed #nav-sidebar .brand-info,
  body.sidebar-collapsed #nav-sidebar .sidebar-search { display: block; }
  body.sidebar-collapsed #nav-sidebar .menu-text { display: block; flex: 1 1 auto; }
  body.sidebar-collapsed #nav-sidebar .nav-chevron { display: inline-flex; }
  body.sidebar-collapsed #nav-sidebar .nav-group-items { display: block !important; }
  body.sidebar-collapsed #nav-sidebar .sidebar-brand {
    flex-direction: row; align-items: center; gap: 10px; padding: 10px;
  }
  body.sidebar-collapsed #nav-sidebar .brand-avatar {
    width: 34px; height: 34px; flex: 0 0 34px; font-size: 17px;
  }
  body.sidebar-collapsed #nav-sidebar .menu-link,
  body.sidebar-collapsed #nav-sidebar .nav-group-header {
    justify-content: flex-start; padding: 8px 9px; gap: 9px;
  }
  body.sidebar-collapsed #nav-sidebar .nav-group-items .menu-link { padding-left: 14px; }
  /* Collapsing a drawer makes no sense - the Menu button already closes it. */
  #nav-sidebar .sidebar-toggle { display: none; }
  /* Tooltips would be stuck under a finger on touch. */
  #nav-sidebar [data-tip]:hover::after,
  #nav-sidebar [data-tip]:hover::before { display: none; }
  /* The drawer is position:fixed, so give it room for labels. */
  #nav-sidebar { padding: 12px 10px; }

  /*
   * The drawer is position:fixed and therefore out of flow, so the content
   * must NOT reserve rail width for it - otherwise the page is squeezed by
   * ~200px and scrolls horizontally with the drawer shut.
   */
  .dashboard .main > #nav-sidebar + .content,
  body.sidebar-collapsed .dashboard .main > #nav-sidebar + .content {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* A drawer has room, so show full names instead of clipping them to
     "Field Advis...". Wrapping beats an ellipsis when vertical space is free. */
  #nav-sidebar .menu-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }
  #nav-sidebar .menu-link,
  #nav-sidebar .nav-group-header { align-items: center; line-height: 1.3; }

  /* Reclaim header height: the email line wraps to its own row on narrow
     screens and pushes the whole page down. */
  #user-tools .user-welcome,
  #user-tools .divider { display: none; }
}