/* ═══════════════════════════════════════════════════════════════════════
   UPGEAR CRM — SIDEBAR NAVIGATION
   Loaded after common-theme.css / site.css / site-premium.css, so every
   rule here wins on equal specificity without needing !important.

   Markup owner: Views/Shared/_Sidebar.cshtml
   Filter logic: Serenity.Extensions/common-theme.js (adds .is-match /
   .non-match on .s-sidebar-item) — do not fight those classes.

   Icon colours come from Bootstrap .text-* utilities, which are !important,
   so nothing here tries to recolour an icon. Rest state is desaturated with
   a filter instead; hover/active restore full colour.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --nav-width: 300px;
  --nav-rail-width: 68px;
  --nav-gutter: 8px;          /* pill inset from the pane edge */
  --nav-icon-col: 20px;       /* icon column width */
  --nav-icon-gap: 10px;
  --nav-text: #2b3444;
  --nav-text-muted: #64748b;
  --nav-accent: #0a6fd8;
  --nav-accent-soft: rgba(10, 111, 216, 0.09);
  --nav-hover-bg: rgba(15, 23, 42, 0.05);
  --nav-hairline: #e9edf2;
  --nav-field-bg: #f5f7fa;
  --nav-field-border: #e1e6ec;
  --nav-radius: 9px;
  --nav-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Pane shell ─────────────────────────────────────────────────────── */

.s-sidebar {
  transition: transform 0.22s var(--nav-ease), width 0.18s var(--nav-ease);
}

.s-sidebar-pane {
  border-right: 1px solid var(--nav-hairline);
  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.02);
  transition: width 0.18s var(--nav-ease);
  /* common-theme.css only gives the pane a scrolling body above 1200px, which
     leaves narrower screens with a menu that runs off the bottom. */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scrim behind the drawer. z-index 10 sits under .s-sidebar (11). Clicking it
   produces a mouseup outside the aside, which is what the stock script listens
   for to close the drawer — so no extra JS is needed here. */
body.s-sidebar-expanded::before {
  content: "";
  position: fixed;
  inset: 48px 0 0 0;
  background: rgba(15, 23, 42, 0.32);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 10;
  animation: navScrimIn 0.2s ease-out;
}

@keyframes navScrimIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Search ─────────────────────────────────────────────────────────────
   The pill is the exact width of a menu row, the magnifier sits in the same
   20px column as the row icons, and the placeholder starts on the same x as
   the row labels. That is the alignment this file exists to fix. */

.s-sidebar-search {
  position: relative;
  margin: 10px var(--nav-gutter) 0;
}

.s-sidebar-search-icon {
  position: absolute;
  /* 10px pill padding — puts the glass in the same column as the row icons */
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--nav-icon-col);
  text-align: center;
  font-size: 13px;
  color: #9aa5b4;
  pointer-events: none;
  transition: color 0.18s var(--nav-ease);
}

.s-sidebar-search-input {
  width: 100%;
  height: 38px;
  line-height: normal;
  /* left = gutter-relative: 10px padding + 20px icon + 10px gap = 40px, so the
     placeholder starts on the same x as a menu label. Right keeps clear of the
     shortcut chip until there is text, then only of the clear button. */
  padding: 0 58px 0 40px;
  border: 1px solid var(--nav-field-border);
  border-radius: var(--nav-radius);
  background: var(--nav-field-bg);
  color: var(--nav-text);
  font-size: 13.5px;
  transition: background 0.18s var(--nav-ease), border-color 0.18s var(--nav-ease), box-shadow 0.18s var(--nav-ease);
}

.s-sidebar-search-input::placeholder {
  color: #97a2b1;
}

.s-sidebar-search-input:hover {
  border-color: #cfd8e3;
}

.s-sidebar-search-input:active,
.s-sidebar-search-input:focus {
  outline: none;
  background: #fff;
  border-color: rgba(10, 111, 216, 0.45);
  box-shadow: 0 0 0 3px rgba(10, 111, 216, 0.10);
}

.s-sidebar-search:focus-within .s-sidebar-search-icon {
  color: var(--nav-accent);
}

.s-sidebar-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  border-radius: 7px;
  background: transparent;
  color: #8d99a8;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s var(--nav-ease), color 0.15s var(--nav-ease);
}

.s-sidebar-search.has-value .s-sidebar-search-clear {
  display: flex;
}

.s-sidebar-search.has-value .s-sidebar-search-input {
  padding-right: 36px;
}

.s-sidebar-search-clear:hover {
  background: rgba(15, 23, 42, 0.07);
  color: #445064;
}

/* Keyboard hint chip — hidden once the field is focused or has text. */
.s-sidebar-search-kbd {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font: 500 10.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #97a2b1;
  background: #fff;
  border: 1px solid var(--nav-field-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 3px 5px;
  pointer-events: none;
}

.s-sidebar-search:focus-within .s-sidebar-search-kbd,
.s-sidebar-search.has-value .s-sidebar-search-kbd {
  display: none;
}

.s-sidebar-noresults {
  display: none;
  padding: 22px 16px;
  text-align: center;
  color: var(--nav-text-muted);
  font-size: 12.5px;
}

.s-sidebar-noresults i {
  display: block;
  font-size: 20px;
  margin-bottom: 8px;
  color: #c3ccd8;
}

.s-sidebar-pane.is-empty .s-sidebar-noresults {
  display: block;
}

/* The menu normally eats the remaining height; when the filter empties it the
   message has to take that space instead, or it renders below the fold. */
.s-sidebar-pane.is-empty #s-sidebar-menu {
  flex: 0 0 auto;
}

/* ── Menu rows ──────────────────────────────────────────────────────── */

#s-sidebar-menu {
  margin-top: 10px;
  padding: 6px 0 14px;
  border-top: 1px solid var(--nav-hairline);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}

#s-sidebar-menu::-webkit-scrollbar {
  width: 7px;
}

#s-sidebar-menu::-webkit-scrollbar-track {
  background: transparent;
}

#s-sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
  border-radius: 4px;
}

#s-sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.28);
}

.s-sidebar-link {
  position: relative;
  margin: 1px var(--nav-gutter);
  padding: 7px 10px;
  border-radius: var(--nav-radius);
  color: var(--nav-text);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  transition: background 0.15s var(--nav-ease), color 0.15s var(--nav-ease);
}

.s-sidebar-icon {
  flex: 0 0 var(--nav-icon-col);
  width: var(--nav-icon-col);
  margin-right: var(--nav-icon-gap);
  font-size: 15px;
  filter: saturate(0.85);
  transition: filter 0.15s var(--nav-ease), transform 0.15s var(--nav-ease);
}

.s-sidebar-link-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-sidebar-menu-toggle {
  flex: 0 0 14px;
  font-size: 12px;
  color: #9aa5b4;
  opacity: 0.85;
  transition: transform 0.18s var(--nav-ease), color 0.15s var(--nav-ease);
}

.s-sidebar-link:hover,
.s-sidebar-pane .active > .s-sidebar-link {
  color: var(--nav-accent);
}

.s-sidebar-link:hover {
  background: var(--nav-hover-bg);
}

.s-sidebar-link:hover .s-sidebar-icon,
.s-sidebar-item.active > .s-sidebar-link .s-sidebar-icon {
  filter: none;
  transform: scale(1.06);
}

.s-sidebar-link:hover .s-sidebar-menu-toggle {
  color: var(--nav-accent);
  opacity: 1;
}

/* Current page: tinted pill plus a rounded accent bar on the left edge. */
.s-sidebar-item.active > .s-sidebar-link {
  background: var(--nav-accent-soft);
  font-weight: 600;
}

.s-sidebar-item.active > .s-sidebar-link::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--nav-accent);
}

/* An open group reads as a container rather than another row. */
.s-sidebar-link[aria-expanded="true"] {
  background: rgba(15, 23, 42, 0.035);
  font-weight: 600;
}

.s-sidebar-link[aria-expanded="true"] .s-sidebar-menu-toggle {
  opacity: 1;
}

/* ── Nested levels ──────────────────────────────────────────────────── */

.s-sidebar-menu .s-sidebar-menu {
  margin-left: 20px;
  border-left: 1px solid var(--nav-hairline);
}

.s-sidebar-menu .s-sidebar-menu .s-sidebar-link {
  margin-right: var(--nav-gutter);
  margin-left: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 13px;
  font-weight: 400;
  color: #4a5566;
}

.s-sidebar-menu .s-sidebar-menu .s-sidebar-icon {
  font-size: 13.5px;
}

.s-sidebar-menu .s-sidebar-menu .s-sidebar-link:hover,
.s-sidebar-menu .s-sidebar-menu .active > .s-sidebar-link {
  color: var(--nav-accent);
}

.s-sidebar-menu .s-sidebar-menu .s-sidebar-item.active > .s-sidebar-link::before {
  left: -7px;
}

/* ── Search-result presentation ─────────────────────────────────────── */

/* A row that matched keeps its own colour; its ancestors are only scaffolding,
   so they stay quiet. */
.s-sidebar-item.is-match:not(.has-children) > .s-sidebar-link {
  background: rgba(10, 111, 216, 0.06);
}

.s-sidebar-item.is-match.has-children > .s-sidebar-link {
  background: transparent;
  color: var(--nav-text-muted);
  font-weight: 600;
}

/* ── Header bar ─────────────────────────────────────────────────────── */

.s-sidebar-header {
  background: linear-gradient(90deg, #2f7fae 0%, #3c8dbc 55%, #4b9bc9 100%);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  padding: 0 10px 0 6px;
  gap: 2px;
  align-items: center;
  z-index: 12;
}

.s-sidebar-toggler {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 19px;
  line-height: 1;
  border-radius: 9px;
  transition: background 0.15s var(--nav-ease);
}

.s-sidebar-toggler:hover {
  background: rgba(255, 255, 255, 0.14);
}

.s-sidebar-header-branding a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.s-sidebar-header-logo {
  width: 30px;
  height: 30px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.s-sidebar-header-title {
  margin-left: 10px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.s-sidebar-header-actions {
  align-items: center;
  gap: 2px;
}

.s-sidebar-header-link {
  margin-right: 0;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 17px;
  transition: background 0.15s var(--nav-ease);
}

a.s-sidebar-header-link:hover,
.s-sidebar-header-link.s-user-profile-link:hover {
  background: rgba(255, 255, 255, 0.14);
}

.s-sidebar-header-sep {
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: rgba(255, 255, 255, 0.32);
  align-self: center;
}

.s-user-profile-link {
  gap: 7px;
  font-size: 14px;
}

.s-user-profile-link > i {
  font-size: 14px;
}

.s-sidebar-header-username,
.s-sidebar-header-signout-text {
  font-size: 13.5px;
  font-weight: 500;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The name is the first thing worth dropping when the bar gets tight. */
@media (max-width: 640px) {
  .s-sidebar-header-username,
  .s-sidebar-header-signout-text,
  .s-sidebar-header-title {
    display: none;
  }
}

/* ── Icon rail on wide screens ──────────────────────────────────────────
   Below this width the pane stays a drawer, which is the stock behaviour.
   At and above it the pane is always the 68px rail and .s-main is inset by
   that much. Hovering (or tabbing into) the rail floats the full 300px pane
   over the page and it snaps back on leave, so the nav never holds more than
   68px of the window. There is deliberately no pinned-open state to get
   stuck in: the pane is either the rail or a temporary flyout. */

@media (min-width: 1400px) {
  .s-sidebar {
    transform: none;
  }

  .s-sidebar,
  .s-sidebar-pane {
    width: var(--nav-rail-width);
  }

  body.s-sidebar-expanded::before {
    display: none;
  }

  .s-main {
    padding-left: var(--nav-rail-width);
  }

  /* The rail is the whole nav here, so the drawer button has nothing to open. */
  .s-sidebar-toggler {
    display: none;
  }

  .s-sidebar-header {
    padding-left: 14px;
  }

  /* Hover or keyboard focus floats the full pane over the page. */
  .s-sidebar:hover,
  .s-sidebar:hover .s-sidebar-pane,
  .s-sidebar:focus-within,
  .s-sidebar:focus-within .s-sidebar-pane {
    width: var(--nav-width);
  }

  .s-sidebar:hover .s-sidebar-pane,
  .s-sidebar:focus-within .s-sidebar-pane {
    box-shadow: 6px 0 24px -8px rgba(15, 23, 42, 0.28);
  }

  /* Rail state: icons only. */
  .s-sidebar:not(:hover):not(:focus-within) .s-sidebar-link-text,
  .s-sidebar:not(:hover):not(:focus-within) .s-sidebar-menu-toggle,
  .s-sidebar:not(:hover):not(:focus-within) .s-sidebar-search-clear,
  .s-sidebar:not(:hover):not(:focus-within) .s-sidebar-search-kbd,
  .s-sidebar:not(:hover):not(:focus-within) .s-sidebar-menu .s-sidebar-menu {
    display: none;
  }

  .s-sidebar:not(:hover):not(:focus-within) .s-sidebar-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .s-sidebar:not(:hover):not(:focus-within) .s-sidebar-icon {
    margin-right: 0;
    /* Nothing else identifies a row at this width, so let the colours read. */
    filter: none;
  }

  /* The search pill becomes a button. The input is flattened rather than
     hidden: a display:none field cannot take focus, and focus is what opens
     the pane, so hiding it would make the pill a dead end for both the mouse
     and the Ctrl+K shortcut. */
  .s-sidebar:not(:hover):not(:focus-within) .s-sidebar-search {
    height: 38px;
    border: 1px solid var(--nav-field-border);
    border-radius: var(--nav-radius);
    background: var(--nav-field-bg);
    cursor: pointer;
  }

  .s-sidebar:not(:hover):not(:focus-within) .s-sidebar-search-input {
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: transparent;
    box-shadow: none;
    cursor: pointer;
  }

  .s-sidebar:not(:hover):not(:focus-within) .s-sidebar-search-input::placeholder {
    color: transparent;
  }

  .s-sidebar:not(:hover):not(:focus-within) .s-sidebar-search-icon {
    left: 50%;
    margin-left: 0;
    transform: translate(-50%, -50%);
  }

  /* An active row still has to be findable when the labels are gone. */
  .s-sidebar:not(:hover):not(:focus-within) .s-sidebar-item.active > .s-sidebar-link::before {
    left: 0;
  }
}

@media print {
  .s-sidebar,
  .s-sidebar-header {
    display: none !important;
  }

  .s-main {
    padding-left: 0 !important;
  }
}