:root {
    --sidebar-primary: #1d4ed8;
    --sidebar-primary-soft: rgba(29, 78, 216, .10);
    --sidebar-primary-strong: #1e3a8a;
    --sidebar-bg: #ffffff;
    --sidebar-border: #dbe4f0;
    --sidebar-muted: #64748b;
    --sidebar-text: #0f172a;
    --sidebar-page: linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
  }

  body {
    background: var(--sidebar-page);
  }

  .wrapper {
    min-height: 100vh;
    background: var(--sidebar-page);
  }

  #appSidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1035;
    width: 16rem;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    transition: width .22s ease, transform .22s ease;
  }

  #appSidebarBackdrop {
    position: fixed;
    inset: 0;
    z-index: 1034;
    background: rgba(15, 23, 42, .48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }

  body:not(.sidebar-collapse) .content-wrapper,
  body:not(.sidebar-collapse) .main-header,
  body:not(.sidebar-collapse) .main-footer {
    margin-left: 16rem !important;
    transition: margin-left .3s ease;
  }

  .content-wrapper {
    background: var(--sidebar-page) !important;
  }

  body.sidebar-collapse #appSidebar {
    width: 5rem;
  }

  body.sidebar-collapse.sidebar-hover-open #appSidebar {
    width: 16rem;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .12);
  }

  body.sidebar-collapse .content-wrapper,
  body.sidebar-collapse .main-header,
  body.sidebar-collapse .main-footer {
    margin-left: 5rem !important;
  }

  #appSidebar .tail-menu-link,
  #appSidebar .tail-parent-trigger,
  #appSidebar .tail-logout-link {
    text-decoration: none !important;
    font-size: .9375rem;
    line-height: 1.25rem;
    min-height: 2.875rem;
    transition: background-color .16s ease, color .16s ease;
  }

  #appSidebar .tail-menu-link:hover,
  #appSidebar .tail-parent-trigger:hover {
    background: rgba(148, 163, 184, .08) !important;
  }

  #appSidebar .tail-logout-link:hover {
    background: rgba(239, 68, 68, .08) !important;
  }

  #appSidebar .tail-menu-entry + .tail-menu-entry {
    margin-top: .375rem;
  }

  #appSidebar .tail-menu-parent + .tail-menu-entry,
  #appSidebar .tail-menu-entry + .tail-menu-parent {
    margin-top: 0;
  }

  #appSidebar .tail-menu-link.active {
    background: var(--sidebar-primary) !important;
    color: #fff !important;
    font-weight: 600;
  }

  #appSidebar .tail-menu-parent.menu-open > .tail-parent-trigger,
  #appSidebar .tail-parent-trigger.active,
  #appSidebar .tail-menu-children .tail-menu-link.active {
    color: var(--sidebar-text) !important;
  }

  #appSidebar .tail-menu-parent.menu-open > .tail-parent-trigger *,
  #appSidebar .tail-parent-trigger.active *,
  #appSidebar .tail-menu-children .tail-menu-link.active * {
    color: inherit !important;
  }

  #appSidebar .tail-menu-link.active .tail-menu-icon {
    color: #fff !important;
  }

  #appSidebar .tail-parent-trigger.active,
  #appSidebar .tail-menu-parent.menu-open > .tail-parent-trigger,
  #appSidebar .tail-menu-parent.treeview.active > .tail-parent-trigger {
    background: var(--sidebar-primary-soft) !important;
    color: var(--sidebar-text) !important;
    font-weight: 700;
  }

  #appSidebar .tail-parent-trigger.active .tail-copy,
  #appSidebar .tail-menu-parent.menu-open > .tail-parent-trigger .tail-copy,
  #appSidebar .tail-menu-parent.treeview.active > .tail-parent-trigger .tail-copy {
    color: var(--sidebar-text) !important;
  }

  #appSidebar .tail-parent-trigger.active .tail-menu-icon,
  #appSidebar .tail-menu-parent.menu-open > .tail-parent-trigger .tail-menu-icon,
  #appSidebar .tail-menu-parent.treeview.active > .tail-parent-trigger .tail-menu-icon,
  #appSidebar .tail-parent-trigger.active .tail-chevron,
  #appSidebar .tail-menu-parent.menu-open > .tail-parent-trigger .tail-chevron,
  #appSidebar .tail-menu-parent.treeview.active > .tail-parent-trigger .tail-chevron {
    color: var(--sidebar-text) !important;
  }

  #appSidebar .tail-menu-parent.menu-open > .tail-parent-trigger .tail-chevron svg,
  #appSidebar .tail-parent-trigger.active .tail-chevron svg,
  #appSidebar .tail-menu-parent.treeview.active > .tail-parent-trigger .tail-chevron svg {
    transform: rotate(180deg);
  }

  #appSidebar .tail-menu-children .tail-menu-link.active {
    background: transparent !important;
    color: var(--sidebar-text) !important;
    font-weight: 700;
  }

  #appSidebar .tail-menu-children .tail-menu-link.active .tail-child-copy {
    color: var(--sidebar-text) !important;
  }

  #appSidebar .tail-menu-children .tail-menu-link.active .tail-child-copy {
    text-decoration: none;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
  }

  #appSidebar .tail-menu-children .tail-menu-link.active .tail-child-marker {
    background: var(--sidebar-primary) !important;
  }

  #appSidebar .tail-menu-children .tail-menu-link:hover {
    background: rgba(148, 163, 184, .06) !important;
  }

  #appSidebar .tail-child-link {
    min-height: 2.25rem;
  }

  #appSidebar .tail-menu-children {
    margin-top: .375rem !important;
    padding-top: .125rem;
    padding-bottom: .125rem;
  }

  #appSidebar .tail-menu-children .tail-menu-link + .tail-menu-link {
    margin-top: .125rem;
  }

  #appSidebar .tail-child-marker {
    width: .45rem;
    height: .45rem;
    border-radius: 9999px;
    background: #cbd5e1;
    display: inline-block;
    transition: background-color .18s ease, transform .18s ease;
  }

  #appSidebar .tail-child-copy {
    display: inline-block;
    min-width: 0;
  }

  #appSidebar .tail-menu-children .tail-menu-link.active .tail-child-marker {
    background: var(--sidebar-primary);
    transform: scale(1.15);
  }

  #appSidebar .tail-copy,
  #appSidebar .tail-brand-copy,
  #appSidebar .tail-branch-copy,
  #appSidebar .tail-search-wrap,
  #appSidebar .tail-chevron,
  #appSidebar .tail-logout-copy {
    transition: opacity .2s ease;
  }

  #appSidebar .tail-menu-link .tail-menu-icon,
  #appSidebar .tail-parent-trigger .tail-menu-icon,
  #appSidebar .tail-logout-link .tail-menu-icon {
    width: 1.5rem;
    min-width: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #appSidebar .tail-menu-link .tail-copy,
  #appSidebar .tail-parent-trigger .tail-copy,
  #appSidebar .tail-logout-link .tail-logout-copy {
    min-width: 0;
  }

  #appSidebar .tail-parent-copy {
    flex: 1 1 auto;
  }

  #appSidebar .tail-brand-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .14);
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
  }

  #appSidebar .tail-brand-badge {
    background: var(--sidebar-primary);
    box-shadow: 0 4px 10px rgba(29, 78, 216, .18);
  }

  #appSidebar .tail-brand-badge-collapsed {
    display: none;
  }

  body.sidebar-collapse #appSidebar .tail-brand-badge {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0;
  }

  #appSidebar .tail-search-box {
    border: 1px solid rgba(148, 163, 184, .20);
    background: rgba(255, 255, 255, .92);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  }

  #appSidebar .tail-search-box:focus-within {
    border-color: rgba(29, 78, 216, .34);
    box-shadow: 0 0 0 2px rgba(29, 78, 216, .10);
    background: #fff;
  }

  #appSidebar .tail-search-input {
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: 0;
  }

  #appSidebar .tail-search-input::placeholder {
    color: #94a3b8;
  }

  #appSidebar .tail-menu-label {
    letter-spacing: .18em;
  }

  #appSidebar .tail-parent-trigger .tail-chevron {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, color .18s ease;
  }

  body.sidebar-collapse #appSidebar .tail-copy,
  body.sidebar-collapse #appSidebar .tail-brand-copy,
  body.sidebar-collapse #appSidebar .tail-branch-copy,
  body.sidebar-collapse #appSidebar .tail-search-wrap,
  body.sidebar-collapse #appSidebar .tail-chevron,
  body.sidebar-collapse #appSidebar .tail-logout-copy {
    display: none !important;
  }

  body.sidebar-collapse #appSidebar .tail-brand-badge-full {
    display: none !important;
  }

  body.sidebar-collapse #appSidebar .tail-brand-badge-collapsed {
    display: inline !important;
  }

  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-copy,
  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-brand-copy,
  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-branch-copy,
  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-search-wrap,
  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-chevron,
  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-logout-copy {
    display: initial !important;
  }

  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-brand-badge-full {
    display: inline !important;
  }

  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-brand-badge-collapsed {
    display: none !important;
  }

  body.sidebar-collapse #appSidebar .tail-brand-row,
  body.sidebar-collapse #appSidebar .tail-logout-link,
  body.sidebar-collapse #appSidebar .tail-menu-link,
  body.sidebar-collapse #appSidebar .tail-parent-trigger,
  body.sidebar-collapse #appSidebar .tail-branch-card {
    justify-content: center !important;
  }

  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-brand-row,
  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-logout-link,
  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-menu-link,
  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-parent-trigger,
  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-branch-card {
    justify-content: initial !important;
  }

  body.sidebar-collapse #appSidebar .tail-menu-link,
  body.sidebar-collapse #appSidebar .tail-parent-trigger,
  body.sidebar-collapse #appSidebar .tail-logout-link {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-menu-link,
  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-parent-trigger,
  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-logout-link {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  body.sidebar-collapse #appSidebar .tail-menu-children {
    display: none !important;
  }

  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-menu-parent.menu-open .tail-menu-children {
    display: block !important;
  }

  body.sidebar-collapse #appSidebar #appSidebarMenu {
    overflow-y: hidden !important;
    padding-right: 0 !important;
  }

  body.sidebar-collapse.sidebar-hover-open #appSidebar #appSidebarMenu {
    overflow-y: auto !important;
    padding-right: .25rem !important;
  }

  body.sidebar-collapse #appSidebar .tail-menu-icon {
    margin-right: 0 !important;
  }

  body.sidebar-collapse.sidebar-hover-open #appSidebar .tail-menu-icon {
    margin-right: .75rem !important;
  }

  body.sidebar-collapse #appSidebar .tail-branch-card {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  @media (max-width: 991.98px) {
    #appSidebar {
      transform: translateX(-100%);
      box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
      width: 16rem;
    }

    body.sidebar-open #appSidebar {
      transform: translateX(0);
    }

    body.sidebar-open #appSidebarBackdrop {
      opacity: 1;
      pointer-events: auto;
    }

    body.sidebar-open #appSidebar .tail-menu-children.hidden {
      display: none !important;
    }

    body.sidebar-open #appSidebar .tail-menu-parent.menu-open .tail-menu-children {
      display: block !important;
    }

    body:not(.sidebar-collapse) .content-wrapper,
    body:not(.sidebar-collapse) .main-header,
    body:not(.sidebar-collapse) .main-footer,
    body.sidebar-collapse .content-wrapper,
    body.sidebar-collapse .main-header,
    body.sidebar-collapse .main-footer,
    body.sidebar-open .content-wrapper,
    body.sidebar-open .main-header,
    body.sidebar-open .main-footer {
      margin-left: 0 !important;
    }
  }