/*
 * TIP portal sidebar refresh
 *
 * This stylesheet is shared by every signed-in portal shell. It deliberately
 * builds on Metronic's existing drawer attributes rather than replacing them,
 * so every existing route, accordion and desktop minimise toggle keeps working.
 */

:root {
  --tip-sidebar-ink: #242936;
  --tip-sidebar-muted: #73798a;
  --tip-sidebar-line: rgba(36, 41, 54, 0.09);
  --tip-sidebar-hover: #fff4f5;
  --tip-sidebar-active: #fde8ea;
  --tip-sidebar-accent: #d94f5d;
  --tip-sidebar-expanded-width: 288px;
  --tip-sidebar-compact-width: 64px;
  --tip-sidebar-motion: cubic-bezier(.2, .8, .2, 1);
}

/* Client document filenames are controlled by the document request. No staff
   or client portal exposes a rename control for those files. */
.rename-trigger,
.rename-doc,
[data-kt-filemanager-table="rename"] { display: none !important; }

/* ── Data workspaces ──────────────────────────────────────────────────────
   Customer lists already use a fluid layout, but many older admin pages put
   their tables inside Metronic's capped `.container-xxl`. The result is that
   equally dense lists have very different usable widths. `admin_head.html`
   marks only content containers that actually contain a table, so forms and
   reading/detail pages retain their intentionally narrower measure. */
#kt_content .tip-wide-data-container {
  width: 100%;
  max-width: none;
}

#kt_content .tip-wide-data-container .card,
#kt_content .tip-wide-data-container .table-responsive {
  min-width: 0;
}

/* Keep every portal's drawer panel above its backdrop. This prevents an
   invisible legacy overlay from intercepting the close control or links. */
.drawer-overlay { z-index: 1090 !important; }
#kt_aside.aside.aside-default.drawer.drawer-on { z-index: 1091 !important; }

/* Metronic reserves 40px at the right edge of `.wrapper` on desktop. That
   exposes the body background beside both the header and page surface. Keep
   spacing inside each content container instead, so the application shell
   reaches the viewport edge. */
@media (min-width: 992px) {
  .aside-default-enabled.aside-fixed .wrapper,
  .aside-default-enabled.aside-fixed[data-kt-aside-minimize=on] .wrapper {
    padding-right: 0 !important;
  }
}

/* ── Shared top bar: compact, practical utilities that match the sidebar ── */
#kt_header {
  border-bottom: 1px solid var(--tip-sidebar-line);
  background: color-mix(in srgb, var(--bs-body-bg) 94%, transparent);
  backdrop-filter: blur(12px);
}

#kt_header .container-fluid { gap: 16px; }
#kt_header .tip-topbar-actions { gap: 8px; }
#kt_header .tip-topbar-quick { position: relative; }

#kt_header .tip-topbar-quick-toggle,
#kt_header .tip-topbar-activity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--tip-sidebar-line);
  border-radius: 10px;
  background: var(--bs-body-bg);
  color: var(--tip-sidebar-muted);
  font-size: .92rem;
  font-weight: 650;
  line-height: 1;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

#kt_header .tip-topbar-quick-toggle { cursor: pointer; }
#kt_header .tip-topbar-quick-toggle > i:first-child,
#kt_header .tip-topbar-activity > i { color: var(--tip-sidebar-accent); font-size: 1.18rem; }
#kt_header .tip-topbar-activity { width: 42px; padding: 0; cursor: pointer; }
#kt_header .tip-topbar-quick-toggle:hover,
#kt_header .tip-topbar-activity:hover { border-color: rgba(217, 79, 93, .24); background: var(--tip-sidebar-hover); color: var(--tip-sidebar-accent); }
#kt_header .tip-topbar-quick-toggle:active,
#kt_header .tip-topbar-activity:active { transform: scale(.97); }
#kt_header .tip-topbar-quick-toggle:focus-visible,
#kt_header .tip-topbar-activity:focus-visible { outline: 3px solid rgba(242, 99, 110, .28); outline-offset: 2px; }

#kt_header .tip-topbar-separator { width: 1px; height: 24px; margin: 0 3px; background: var(--tip-sidebar-line); }

#kt_header .tip-topbar-profile-trigger {
  min-height: 38px;
  padding: 3px 6px 3px 3px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background-color .15s ease, border-color .15s ease;
}

#kt_header .tip-topbar-profile-trigger:hover { border-color: var(--tip-sidebar-line); background: var(--tip-sidebar-hover); }
#kt_header .tip-topbar-profile-trigger .symbol { width: 35px; height: 35px; }
#kt_header .tip-topbar-profile-trigger .symbol img { border-radius: 9px; }

#kt_header .tip-topbar-signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--tip-sidebar-line);
  border-radius: 10px;
  color: var(--tip-sidebar-muted);
  font-size: .92rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

#kt_header .tip-topbar-signout i { color: var(--tip-sidebar-accent); font-size: 1.1rem; }
#kt_header .tip-topbar-signout:hover { border-color: rgba(217, 79, 93, .24); background: var(--tip-sidebar-hover); color: var(--tip-sidebar-accent); }
#kt_header .tip-topbar-signout:active { transform: scale(.97); }
#kt_header .tip-topbar-signout:focus-visible { outline: 3px solid rgba(242, 99, 110, .28); outline-offset: 2px; }

/* Older role shells use Metronic utility classes rather than the refreshed
   admin controls. Keep their profile, activity and sign-out labels at the
   same readable scale without affecting page content below the top bar. */
#kt_header #kt_header_user_menu_toggle .fs-8 { font-size: .92rem !important; }
#kt_header #kt_header_user_menu_toggle .fs-9 { font-size: .78rem !important; }
#kt_header #kt_activities_toggle { min-width: 42px; min-height: 42px; }
#kt_header a.btn.btn-light-danger { font-size: .9rem; font-weight: 650; min-height: 38px; }
#kt_header .menu-sub .menu-link { font-size: .95rem; }

@media (max-width: 575.98px) {
  #kt_header .container-fluid { gap: 8px; }
  #kt_header .tip-topbar-actions { gap: 5px; }
  #kt_header .tip-topbar-quick-toggle { width: 42px; padding: 0; }
  #kt_header .tip-topbar-separator { margin: 0 1px; }
  #kt_header .tip-topbar-profile-trigger { padding-right: 3px; }
}

/* Shared signed-in account panel. It reuses the existing account and
   disconnect routes; this is presentation only, not a second auth flow. */
#kt_aside .aside-footer {
  display: block !important;
  flex: 0 0 auto;
  padding: 12px 16px 18px !important;
  border-top: 1px solid var(--tip-sidebar-line);
}

/* The menu absorbs the available height and scrolls internally. This keeps
   the account and release controls inside the fixed sidebar at any height. */
#kt_aside .aside-menu {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto !important;
  overflow: hidden;
}

/* Keep a long, open accordion inside the navigation workspace instead of
   allowing it to grow behind the footer. KTScroll normally calculates a
   height once on load, but that value can become stale after an accordion
   opens. Flexbox always reserves the logo and footer first. */
#kt_aside #kt_aside_menu {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

#kt_aside #kt_aside_menu_wrapper {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* tip-sidebar-workspace.js re-groups the server-rendered flat menu into
   sections on DOMContentLoaded. On a slow load the flat list can paint first
   and then visibly jump into the sectioned layout. Keep the menu hidden
   until the script marks it built, but never longer than 1.5s — the
   keyframe is a fail-safe reveal in case the script never runs (e.g. a JS
   error) so the sidebar is never left permanently hidden. */
#kt_aside_menu:not([data-tip-sidebar-built="true"]) > #kt_aside_menu_wrapper {
  visibility: hidden;
  animation: tipSidebarReveal 0s linear 1.5s forwards;
}

@keyframes tipSidebarReveal {
  to { visibility: visible; }
}

#kt_aside .tip-sidebar-guide { margin: 0 0 10px; }
#kt_aside .tip-client-sidebar-guide { position: relative; }
#kt_aside .tip-sidebar-guide-dismiss { position: absolute; z-index: 1; top: 7px; right: 7px; width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: var(--tip-sidebar-muted); cursor: pointer; font-size: 1.2rem; line-height: 1; }
#kt_aside .tip-sidebar-guide-dismiss:hover { background: rgba(255,255,255,.12); color: #fff; }
#kt_aside .tip-sidebar-guide-dismiss:focus-visible { outline: 3px solid rgba(242, 99, 110, .28); outline-offset: 2px; }

#kt_aside .tip-sidebar-guide-trigger {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  width: 100%;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(217, 79, 93, .16);
  border-radius: 13px;
  background: linear-gradient(135deg, #fff9fa 0%, #fff3f5 100%);
  color: var(--tip-sidebar-ink);
  cursor: pointer;
  text-align: left;
  transition: transform .16s cubic-bezier(.23, 1, .32, 1), border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

#kt_aside .tip-client-sidebar-guide .tip-sidebar-guide-trigger {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 116px;
  padding: 16px;
  overflow: hidden;
  border-color: rgba(217, 79, 93, .2);
  border-radius: 15px;
  background: linear-gradient(135deg, #fffafb 0%, #fff2f4 100%);
}

#kt_aside .tip-client-sidebar-guide .tip-sidebar-guide-cursor {
  position: absolute;
  right: -6px;
  bottom: -20px;
  color: rgba(217, 79, 93, .12);
  font-size: 5.8rem;
  pointer-events: none;
  transform: rotate(-14deg);
}

#kt_aside .tip-client-sidebar-guide .tip-sidebar-guide-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 5px;
  max-width: 205px;
}

#kt_aside .tip-sidebar-guide-copy { display: grid; min-width: 0; gap: 1px; }
#kt_aside .tip-sidebar-guide-title { color: var(--tip-sidebar-ink); font-size: .86rem; font-weight: 750; line-height: 1.2; }
#kt_aside .tip-sidebar-guide-description { overflow: hidden; color: var(--tip-sidebar-muted); font-size: .72rem; font-weight: 550; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
#kt_aside .tip-sidebar-guide-arrow { color: var(--tip-sidebar-accent); font-size: .85rem; transition: transform .16s cubic-bezier(.23, 1, .32, 1); }

#kt_aside .tip-client-sidebar-guide .tip-sidebar-guide-title { font-size: .92rem; line-height: 1.28; }
#kt_aside .tip-client-sidebar-guide .tip-sidebar-guide-description { overflow: visible; font-size: .75rem; font-weight: 500; line-height: 1.4; text-overflow: clip; white-space: normal; }
#kt_aside .tip-client-sidebar-guide .tip-sidebar-guide-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--tip-sidebar-accent); font-size: .75rem; font-weight: 750; line-height: 1.2; }
#kt_aside .tip-client-sidebar-guide .tip-sidebar-guide-cta i { font-size: .7rem; transition: transform .16s cubic-bezier(.23, 1, .32, 1); }

@media (hover: hover) and (pointer: fine) {
  #kt_aside .tip-sidebar-guide-trigger:hover {
    border-color: rgba(217, 79, 93, .34);
    box-shadow: 0 7px 16px rgba(217, 79, 93, .1);
    transform: translate3d(0, -1px, 0);
  }

  #kt_aside .tip-sidebar-guide-trigger:hover .tip-sidebar-guide-arrow,
  #kt_aside .tip-client-sidebar-guide .tip-sidebar-guide-trigger:hover .tip-sidebar-guide-cta i { transform: translate3d(2px, 0, 0); }
}

#kt_aside .tip-sidebar-guide-trigger:active { transform: scale(.98); }
#kt_aside .tip-sidebar-guide-trigger:focus-visible { outline: 3px solid rgba(242, 99, 110, .28); outline-offset: 2px; }

#kt_aside .tip-sidebar-release {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid var(--tip-sidebar-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--tip-sidebar-hover) 64%, var(--bs-body-bg));
  cursor: default;
  animation: tip-sidebar-release-enter .26s cubic-bezier(.23, 1, .32, 1) both;
}

#kt_aside .tip-sidebar-release-label {
  color: var(--tip-sidebar-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.25;
  text-transform: uppercase;
}

/* Live dot: solid core with a soft expanding pulse */
#kt_aside .tip-sidebar-release-status {
  position: relative;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #59c36a;
}

#kt_aside .tip-sidebar-release-status::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #59c36a;
  content: '';
  animation: tip-sidebar-live-pulse 1.8s ease-out infinite;
}

@keyframes tip-sidebar-live-pulse {
  from { opacity: .55; transform: scale(1); }
  to { opacity: 0; transform: scale(2.6); }
}

/* Guided access is a page-level coachmark, intentionally independent of
   Metronic menus so it can explain any admin screen. */
.tip-guided-access {
  position: fixed;
  z-index: 2200;
  inset: 0;
  pointer-events: none;
}

.tip-guided-access[hidden] { display: none; }

.tip-guided-access-spotlight {
  position: fixed;
  z-index: 1;
  border: 2px solid rgba(242, 99, 110, .8);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(29, 33, 43, .48), 0 0 0 5px rgba(242, 99, 110, .14);
  pointer-events: none;
  transition: top .2s cubic-bezier(.23, 1, .32, 1), left .2s cubic-bezier(.23, 1, .32, 1), width .2s cubic-bezier(.23, 1, .32, 1), height .2s cubic-bezier(.23, 1, .32, 1);
}

.tip-guided-access-card {
  position: fixed;
  z-index: 2;
  width: min(360px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 52px rgba(23, 26, 35, .2);
  color: var(--tip-sidebar-ink);
  pointer-events: auto;
  transform-origin: top left;
  animation: tip-guided-access-enter .2s cubic-bezier(.23, 1, .32, 1) both;
}

.tip-guided-access-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tip-sidebar-muted);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
}

.tip-guided-access-close:hover { background: var(--tip-sidebar-hover); color: var(--tip-sidebar-accent); }
.tip-guided-access-close:focus-visible,
.tip-guided-access-button:focus-visible { outline: 3px solid rgba(242, 99, 110, .28); outline-offset: 2px; }
.tip-guided-access-count { display: block; margin: 0 34px 7px 0; color: var(--tip-sidebar-accent); font-size: .69rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.tip-guided-access-title { margin: 0; color: var(--tip-sidebar-ink); font-size: 1.08rem; font-weight: 750; line-height: 1.25; }
.tip-guided-access-description { margin: 8px 0 18px; color: var(--tip-sidebar-muted); font-size: .84rem; font-weight: 500; line-height: 1.5; }
.tip-guided-access-progress { height: 3px; margin-bottom: 16px; overflow: hidden; border-radius: 99px; background: rgba(217, 79, 93, .12); }
.tip-guided-access-progress > span { display: block; width: var(--tip-guided-progress, 20%); height: 100%; border-radius: inherit; background: var(--tip-sidebar-accent); transition: width .2s cubic-bezier(.23, 1, .32, 1); }
.tip-guided-access-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tip-guided-access-actions-end { display: flex; gap: 8px; }
.tip-guided-access-button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--tip-sidebar-line);
  border-radius: 8px;
  background: #fff;
  color: var(--tip-sidebar-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 700;
  transition: transform .14s ease, border-color .14s ease, background-color .14s ease, color .14s ease;
}

.tip-guided-access-button:hover { border-color: rgba(217, 79, 93, .28); background: var(--tip-sidebar-hover); color: var(--tip-sidebar-accent); }
.tip-guided-access-button:active { transform: scale(.97); }
.tip-guided-access-button-primary { border-color: var(--tip-sidebar-accent); background: var(--tip-sidebar-accent); color: #fff; }
.tip-guided-access-button-primary:hover { border-color: #c54150; background: #c54150; color: #fff; }
.tip-guided-access-button[disabled] { visibility: hidden; }

@keyframes tip-guided-access-enter {
  from { opacity: 0; transform: translate3d(0, 6px, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes tip-sidebar-release-enter {
  from { opacity: 0; transform: translate3d(0, 6px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #kt_aside .tip-sidebar-release,
  .tip-guided-access-card {
    animation: none;
  }

  #kt_aside .tip-sidebar-release-status::after { animation: none; }
}

#kt_aside .tip-sidebar-session { display: grid; gap: 8px; }

/* Footer: release pill and an icon-only sign out share one row */
#kt_aside .tip-sidebar-footer-row { display: flex; align-items: center; gap: 8px; }
#kt_aside .tip-sidebar-footer-row .tip-sidebar-release { flex: 1 1 auto; min-width: 0; margin: 0; }
#kt_aside .tip-sidebar-signout-icon { width: 38px; min-width: 38px; padding: 0; }
/* Client / FA: sign out as a quiet full-width row aligned with the cards above */
#kt_aside .tip-sidebar-signout-row {
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-color: transparent;
  background: transparent;
  color: var(--tip-sidebar-muted);
  font-size: .82rem;
}
#kt_aside .tip-sidebar-signout-row:hover { border-color: transparent; }
#kt_aside .tip-sidebar-footer-row .tip-sidebar-session { display: block; }

#kt_aside .tip-sidebar-account {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  color: var(--tip-sidebar-ink);
  text-decoration: none;
  transition: background-color .15s ease;
}

#kt_aside .tip-sidebar-account:hover { background: var(--tip-sidebar-hover); color: var(--tip-sidebar-ink); }

#kt_aside .tip-sidebar-avatar {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--tip-sidebar-active);
  color: var(--tip-sidebar-accent);
  font-size: .8rem;
  font-weight: 700;
}

#kt_aside .tip-sidebar-account-copy { display: grid; min-width: 0; gap: 1px; }
#kt_aside .tip-sidebar-account-name { overflow: hidden; color: var(--tip-sidebar-ink); font-size: .88rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
#kt_aside .tip-sidebar-account-email { overflow: hidden; color: var(--tip-sidebar-muted); font-size: .76rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

#kt_aside .tip-sidebar-signout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--tip-sidebar-line);
  border-radius: 9px;
  color: var(--tip-sidebar-muted);
  font-size: .78rem;
  font-weight: 650;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#kt_aside .tip-sidebar-signout i { color: currentColor; font-size: 1.1rem; }
#kt_aside .tip-sidebar-signout:hover { border-color: rgba(217, 79, 93, .24); background: var(--tip-sidebar-hover); color: var(--tip-sidebar-accent); }
#kt_aside .tip-sidebar-account:focus-visible,
#kt_aside .tip-sidebar-signout:focus-visible { outline: 3px solid rgba(242, 99, 110, .28); outline-offset: 2px; }

/* The Admins area has enough routes to need visual organisation, but a third
   nested accordion is awkward on both desktop and touch. Section labels keep
   the information scan-friendly without adding another interaction layer. */
#kt_aside .tip-sidebar-group + .tip-sidebar-group { margin-top: 10px; }
#kt_aside .tip-sidebar-group-label {
  margin: 10px 10px 5px;
  color: var(--tip-sidebar-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.25;
  text-transform: uppercase;
}

/* ── Desktop: calm navigation surface with clearer hierarchy ─────────────── */
@media (min-width: 1200px) {
  #kt_aside.aside.aside-default {
    border-right: 1px solid var(--tip-sidebar-line);
    box-shadow: 10px 0 30px rgba(36, 41, 54, 0.035);
  }

  #kt_aside .aside-logo {
    position: relative;
    min-height: 92px;
    padding: 13px 24px !important;
    border-bottom: 1px solid var(--tip-sidebar-line);
    justify-content: center;
  }

  #kt_aside .tip-sidebar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0;
    color: var(--tip-sidebar-ink);
    text-decoration: none;
    min-width: 0;
    width: 100%;
    justify-content: center;
  }

  /* The full brand is used in the expanded sidebar, with the compact mark
     reserved for the icon-only state. These are portal assets, independent
     of Metronic's logo-default/logo-minimize swapping. */
  #kt_aside .tip-sidebar-brand-full {
    display: block;
    width: 140px;
    height: 56px;
    object-fit: cover;
    object-position: center;
  }

  #kt_aside .tip-sidebar-brand-mark {
    display: none;
    width: 34px !important;
    height: 34px;
    flex: 0 0 34px;
    object-fit: contain;
  }

  #kt_aside #kt_aside_menu_wrapper {
    margin: 16px 14px 20px !important;
    padding: 0 2px 18px;
  }

  /* Shared navigation workspace. Role-specific links are grouped by the
     runtime manifest, so every portal has the same navigation grammar while
     retaining its own routes and permissions. */
  #kt_aside .tip-sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 0 0 14px;
    padding: 0 11px;
    border: 1px solid var(--tip-sidebar-line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--tip-sidebar-hover));
    color: var(--tip-sidebar-muted);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  }

  #kt_aside .tip-sidebar-search:focus-within {
    border-color: rgba(217, 79, 93, .4);
    background: var(--bs-body-bg);
    box-shadow: 0 0 0 3px rgba(217, 79, 93, .1);
  }

  #kt_aside .tip-sidebar-search i { color: var(--tip-sidebar-accent); font-size: 1rem; }
  #kt_aside .tip-sidebar-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tip-sidebar-ink);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
  }
  #kt_aside .tip-sidebar-search input::placeholder { color: var(--tip-sidebar-muted); opacity: .86; }

  #kt_aside .tip-sidebar-section { margin: 0 0 14px; }
  #kt_aside .tip-sidebar-section-heading {
    margin: 0 10px 5px;
    color: var(--tip-sidebar-muted);
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .07em;
    line-height: 1.3;
    text-transform: uppercase;
  }
  #kt_aside .tip-sidebar-section-items { display: grid; gap: 2px; }
  #kt_aside .tip-sidebar-section[hidden],
  #kt_aside .tip-sidebar-section .menu-item[hidden] { display: none !important; }

  #kt_aside .tip-sidebar-customise {
    position: absolute;
    top: 50%;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--tip-sidebar-muted);
    opacity: 0;
    transform: translate3d(-3px, -50%, 0);
    transition: opacity .16s ease, transform .16s ease, color .16s ease, background-color .16s ease, border-color .16s ease;
  }
  #kt_aside .aside-logo:hover .tip-sidebar-customise,
  #kt_aside.tip-sidebar-customising .tip-sidebar-customise {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
  }
  #kt_aside .tip-sidebar-customise:hover,
  #kt_aside.tip-sidebar-customising .tip-sidebar-customise {
    border-color: rgba(217, 79, 93, .24);
    background: var(--tip-sidebar-hover);
    color: var(--tip-sidebar-accent);
  }
  #kt_aside .tip-sidebar-customise:focus-visible { outline: 3px solid rgba(242, 99, 110, .28); outline-offset: 2px; }

  #kt_aside.tip-sidebar-customising .tip-sidebar-section {
    cursor: grab;
    outline: 1px dashed rgba(217, 79, 93, .34);
    outline-offset: 3px;
    border-radius: 10px;
  }
  #kt_aside.tip-sidebar-customising .tip-sidebar-section::after {
    content: 'Drag to rearrange';
    display: block;
    margin: 3px 10px 7px;
    color: var(--tip-sidebar-accent);
    font-size: .67rem;
    font-weight: 700;
  }
  #kt_aside.tip-sidebar-customising .tip-sidebar-section.is-dragging { opacity: .42; cursor: grabbing; }

  #kt_aside .menu-item { padding: 2px 0; }

  #kt_aside .menu-item .menu-link {
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--tip-sidebar-muted);
    transition: background-color .15s ease, color .15s ease;
  }

  /* Navigation is read frequently; make both the primary choices and the
     nested admin routes comfortably legible at a glance. */
  #kt_aside .menu-item > .menu-link .menu-title {
    font-size: 1.1rem;
    line-height: 1.35;
  }

  #kt_aside .menu-item .menu-link:hover {
    background: var(--tip-sidebar-hover) !important;
    color: var(--tip-sidebar-accent) !important;
  }

  #kt_aside .menu-item.here > .menu-link,
  #kt_aside .menu-item > .menu-link.active,
  #kt_aside .menu-item.here > .menu-link.active {
    background: var(--tip-sidebar-active) !important;
    color: var(--tip-sidebar-accent) !important;
    font-weight: 700;
  }

  #kt_aside .menu-item.here > .menu-link::before,
  #kt_aside .menu-item > .menu-link.active::before {
    content: '';
    width: 3px;
    align-self: stretch;
    margin: -3px 8px -3px -12px;
    border-radius: 0 99px 99px 0;
    background: var(--tip-sidebar-accent);
  }

  #kt_aside .menu-item .menu-link .menu-icon { color: inherit; }
  #kt_aside .menu-item .menu-link:focus-visible {
    outline: 3px solid rgba(242, 99, 110, .28) !important;
    outline-offset: 2px;
  }

  #kt_aside .menu-sub {
    margin: 3px 0 7px;
    padding: 2px 0 2px 8px;
    border-left: 1px solid var(--tip-sidebar-line);
  }

  #kt_aside .menu-sub .menu-link {
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 1.08rem;
    font-weight: 650;
  }

  /* The desktop aside is deliberately fixed and fully expanded. On tablet
     and mobile it remains a drawer, so it does not consume the content area. */
  #kt_aside.aside.aside-default {
    border-right: 1px solid var(--tip-sidebar-line);
    box-shadow: 10px 0 30px rgba(36, 41, 54, 0.035);
  }

  [data-kt-toggle-name=aside-minimize] {
    display: none !important;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-sidebar-search,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-sidebar-section-heading {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-sidebar-release {
    display: none;
  }

  /* This control sits in the logo bar and has an auto margin. Leaving it
     merely invisible still reserves space, which shifts the compact logo
     off-centre. Remove it from layout until the sidebar is expanded. */
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-sidebar-customise {
    display: none;
  }

  /* Native titles are populated by the shared script in Metronic's compact
     state. Browser tooltips are not clipped by the fixed aside. */
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .menu-item .menu-link[title] {
    cursor: pointer;
  }

  /* Let Metronic keep accordion visibility and keyboard semantics. The
     visual layer only animates transform and opacity, avoiding the sluggish
     height animation that was noticeable in longer menu groups. */
  #kt_aside .menu-item.menu-accordion.showing > .menu-sub-accordion {
    will-change: transform, opacity;
    animation: tip-sidebar-submenu-in .22s var(--tip-sidebar-motion) both;
  }

  #kt_aside .menu-item.menu-accordion.hiding > .menu-sub-accordion {
    will-change: transform, opacity;
    animation: tip-sidebar-submenu-out .14s ease-in both;
  }

  #kt_aside .menu-item.menu-accordion.show > .menu-link .menu-arrow::after {
    transition-duration: .2s;
    transition-timing-function: var(--tip-sidebar-motion);
  }

  @keyframes tip-sidebar-submenu-in {
    from { opacity: 0; transform: translate3d(0, -6px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  @keyframes tip-sidebar-submenu-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(0, -4px, 0); }
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-sidebar-brand-full {
    display: none;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-sidebar-brand-mark {
    display: block;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-logo {
    justify-content: center;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-sidebar-brand {
    width: 100%;
    justify-content: center;
  }

  /* Compact admin navigation is an icon rail. Do not leave clipped account
     labels or a wrapped sign-out action in the narrow footer. */
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-admin-sidebar-footer {
    padding: 10px 12px 14px !important;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-sidebar-footer-row {
    justify-content: center;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-admin-sidebar-footer .tip-sidebar-session {
    justify-items: center;
    gap: 8px;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-admin-sidebar-footer .tip-sidebar-guide {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-admin-sidebar-footer .tip-sidebar-guide-trigger {
    display: inline-flex;
    width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 4px;
    border-radius: 10px;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-admin-sidebar-footer .tip-sidebar-guide-copy,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-admin-sidebar-footer .tip-sidebar-guide-arrow {
    display: none;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-client-sidebar-footer .tip-sidebar-guide {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-client-sidebar-footer .tip-sidebar-guide-trigger {
    display: inline-flex;
    width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 4px;
    border-radius: 10px;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-client-sidebar-footer .tip-sidebar-guide-copy,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-client-sidebar-footer .tip-sidebar-guide-arrow {
    display: none;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-client-sidebar-footer .tip-client-sidebar-guide .tip-sidebar-guide-cursor {
    position: static;
    color: var(--tip-sidebar-accent);
    font-size: 1.1rem;
    transform: none;
  }

  /* Every portal uses this signed-in footer. Keep it as a true icon rail in
     compact mode so names, emails and actions cannot wrap or clip in client,
     copywriter and adviser sidebars. */
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer {
    padding: 10px 12px 14px !important;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-session {
    justify-items: center;
    gap: 8px;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-account {
    width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 4px;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-account-copy,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-signout > span,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-guide-copy,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-guide-arrow {
    display: none;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-signout,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-guide-trigger {
    width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 4px;
    border-radius: 10px;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-signout {
    border-color: rgba(217, 79, 93, .2);
    background: var(--tip-sidebar-hover);
    color: var(--tip-sidebar-accent);
  }

  /* Compact footer controls are a quiet utility stack, not three oversized
     tiles. Keep the avatar as the only coloured surface and make guide/sign
     out simple, evenly spaced icon actions. */
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer {
    padding: 8px 10px 10px !important;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-guide {
    margin-bottom: 4px;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-session {
    gap: 4px;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-account,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-signout,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-guide-trigger {
    width: 36px;
    min-height: 36px;
    height: 36px;
    border-radius: 11px;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-account {
    padding: 2px;
    background: transparent;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-signout {
    border-color: transparent;
    background: transparent;
    color: var(--tip-sidebar-muted);
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .aside-footer .tip-sidebar-signout:hover {
    background: var(--tip-sidebar-hover);
    color: var(--tip-sidebar-accent);
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-client-sidebar-footer .tip-sidebar-guide-trigger {
    border-color: transparent;
    background: #fff7f8;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-client-sidebar-footer .tip-client-sidebar-guide .tip-sidebar-guide-cursor {
    font-size: 1rem;
  }

  /* A coachmark must never point at a collapsed or changing sidebar. While
     the client tour is open, hold the desktop aside in its readable state. */
  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active {
    width: 300px !important;
  }

  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .tip-sidebar-brand-full {
    display: block;
  }

  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .tip-sidebar-brand-mark {
    display: none;
  }

  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .aside-menu .menu-title,
  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .aside-menu .menu-content {
    opacity: 1;
  }

  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .aside-menu .menu-item.show > .menu-sub {
    height: auto;
    overflow: visible;
  }

  /* The compact rail paints its selected state behind an icon. Once the tour
     holds the full sidebar open, return to the normal full-row selection so
     an extra oversized tile does not sit behind the highlighted icon. */
  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .menu-item.here > .menu-link,
  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .menu-item > .menu-link.active {
    background: var(--tip-sidebar-active) !important;
    color: var(--tip-sidebar-accent) !important;
  }

  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .menu-item.here > .menu-link .menu-icon::before,
  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .menu-item > .menu-link.active .menu-icon::before {
    content: none;
  }

  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .aside-footer .tip-sidebar-guide {
    display: block;
    margin-bottom: 10px;
  }

  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .aside-footer .tip-sidebar-guide-trigger {
    display: grid;
    width: 100%;
    min-height: 58px;
    justify-content: stretch;
    padding: 9px 10px;
    border-radius: 13px;
  }

  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .aside-footer .tip-sidebar-guide-copy {
    display: grid;
  }

  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .aside-footer .tip-sidebar-guide-arrow {
    display: block;
  }

  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .aside-footer .tip-sidebar-account {
    width: auto;
    min-height: 48px;
    justify-content: flex-start;
    padding: 8px;
  }

  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .aside-footer .tip-sidebar-account-copy {
    display: grid;
  }

  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .aside-footer .tip-sidebar-signout {
    width: auto;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 9px;
  }

  [data-kt-aside-minimize=on] #kt_aside.tip-guided-access-active .aside-footer .tip-sidebar-signout > span {
    display: inline;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-admin-sidebar-footer .tip-sidebar-account {
    width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 4px;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-admin-sidebar-footer .tip-sidebar-account-copy,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-admin-sidebar-footer .tip-sidebar-signout > span {
    display: none;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .tip-admin-sidebar-footer .tip-sidebar-signout {
    width: 40px;
    min-height: 40px;
    padding: 0;
    border-color: rgba(217, 79, 93, .2);
    border-radius: 10px;
    background: var(--tip-sidebar-hover);
    color: var(--tip-sidebar-accent);
  }

  /* Keep Metronic's icon layout intact. The selection is drawn behind the
     existing icon instead of resizing the link that contains it. */
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .menu-item.here > .menu-link,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .menu-item > .menu-link.active {
    background: transparent !important;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .menu-item.here > .menu-link::before,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .menu-item > .menu-link.active::before {
    content: none;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .menu-item.here > .menu-link .menu-icon,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .menu-item > .menu-link.active .menu-icon {
    position: relative;
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .menu-item.here > .menu-link .menu-icon::before,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .menu-item > .menu-link.active .menu-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--tip-sidebar-active);
    transform: translate(-50%, -50%);
  }

  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .menu-item.here > .menu-link .menu-icon > i,
  [data-kt-aside-minimize=on] #kt_aside:not(:hover) .menu-item > .menu-link.active .menu-icon > i {
    position: relative;
    z-index: 1;
  }

}

/* ── Tablet and mobile: a true, spacious overlay drawer ─────────────────── */
@media (max-width: 1199.98px) {
  /* The drawer trigger is the only mobile header navigation control. The
     sidebar shows the brand once it is open, so repeating the logo here uses
     valuable space without adding orientation. */
  #kt_header a.d-lg-none { display: none !important; }

  /* The sidebar's own data attribute activates the drawer below xl. The
     desktop wrapper offsets must disappear at this same breakpoint. */
  .aside-default-enabled.aside-fixed .wrapper,
  .aside-default-enabled.aside-fixed[data-kt-aside-minimize=on] .wrapper {
    padding-left: 0 !important;
  }

  .aside-default-enabled.aside-fixed[data-kt-sticky-header=on] .header,
  .aside-default-enabled.aside-fixed[data-kt-sticky-header=on][data-kt-aside-minimize=on] .header {
    left: 0 !important;
  }

  /* Metronic's base desktop selector is more specific than its generic
     data-drawer rule at 992–1199px. Explicitly keep the panel hidden until
     KTDrawer opens it, avoiding a narrow fixed sidebar on tablets. */
  #kt_aside.aside.aside-default:not(.drawer-on) { display: none !important; }

  #kt_aside.aside.aside-default.drawer.drawer-on {
    display: flex !important;
    /* admin_head places the shared drawer backdrop at 1090. Keep this panel
       one layer above it so its logo, close control and links receive taps. */
    z-index: 1091 !important;
    width: min(88vw, 360px) !important;
    max-width: 360px;
    height: 100dvh;
    min-height: 100dvh;
    border-right: 1px solid var(--tip-sidebar-line);
    box-shadow: 16px 0 40px rgba(36, 41, 54, .18) !important;
  }

  #kt_aside.drawer-on .aside-logo {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--tip-sidebar-line);
  }

  #kt_aside.drawer-on .tip-sidebar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--tip-sidebar-ink);
    text-decoration: none;
  }

  #kt_aside.drawer-on .tip-sidebar-brand-full {
    display: block;
    width: 140px;
    height: 54px;
    object-fit: cover;
    object-position: center;
  }
  #kt_aside.drawer-on .tip-sidebar-brand-mark { display: none; }

  #kt_aside.drawer-on .aside-menu {
    min-height: 0;
    overflow: hidden;
    padding: 0 8px !important;
  }

  #kt_aside.drawer-on #kt_aside_menu_wrapper {
    /* The menu owns all remaining flex space, so it can scroll without
       pushing the fixed release and sign-out controls offscreen. */
    margin: 12px 6px 18px !important;
    padding: 0 2px 24px;
    -webkit-overflow-scrolling: touch;
  }

  #kt_aside.drawer-on .tip-sidebar-search { margin: 0 4px 14px; }
  #kt_aside.drawer-on .tip-sidebar-section { margin-bottom: 16px; }
  #kt_aside.drawer-on .tip-sidebar-section-heading { margin-left: 10px; font-size: .71rem; }
  #kt_aside.drawer-on .tip-sidebar-customise { display: none; }

  #kt_aside.drawer-on .menu-item { padding: 2px 0; }
  #kt_aside.drawer-on .menu-item .menu-link {
    min-height: 48px;
    padding: 11px 12px;
    border-radius: 11px;
    color: var(--tip-sidebar-ink);
  }

  #kt_aside.drawer-on .menu-item > .menu-link .menu-title {
    font-size: 1.1rem;
    line-height: 1.35;
  }

  #kt_aside.drawer-on .menu-item.here > .menu-link,
  #kt_aside.drawer-on .menu-item > .menu-link.active {
    background: var(--tip-sidebar-active) !important;
    color: var(--tip-sidebar-accent) !important;
    font-weight: 700;
  }

  #kt_aside.drawer-on .menu-sub {
    margin: 4px 0 7px 14px;
    padding: 2px 0 2px 8px;
    border-left: 1px solid var(--tip-sidebar-line);
  }

  #kt_aside.drawer-on .tip-sidebar-group + .tip-sidebar-group { margin-top: 12px; }
  #kt_aside.drawer-on .tip-sidebar-group-label { margin: 12px 10px 6px; font-size: .77rem; }

  #kt_aside.drawer-on .menu-sub .menu-link { min-height: 50px; font-size: 1.1rem; font-weight: 650; }
  #kt_aside.drawer-on .menu-item .menu-link:focus-visible {
    outline: 3px solid rgba(242, 99, 110, .28) !important;
    outline-offset: 2px;
  }
}

.tip-sidebar-close {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tip-sidebar-line);
  border-radius: 10px;
  background: #fff;
  color: var(--tip-sidebar-ink);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.tip-sidebar-close:hover { background: var(--tip-sidebar-hover); color: var(--tip-sidebar-accent); }
.tip-sidebar-close:active { transform: scale(.96); }
.tip-sidebar-close:focus-visible { outline: 3px solid rgba(242, 99, 110, .28); outline-offset: 2px; }

@media (max-width: 1199.98px) {
  #kt_aside.drawer-on .tip-sidebar-close { display: inline-flex; }
}

/* ── Dark navigation surface ─────────────────────────────────────────────
   Navigation is visually separate from the work surface: a quiet blue-charcoal
   gives it weight without turning the whole application into dark mode. The
   variables are scoped to the aside so header and page components retain their
   existing light-theme contrast. */
#kt_aside.aside.aside-default {
  --tip-sidebar-ink: #f5f7fb;
  --tip-sidebar-muted: #ffffff;
  --tip-sidebar-line: rgba(220, 229, 242, .14);
  --tip-sidebar-hover: rgba(255, 255, 255, .075);
  --tip-sidebar-active: rgba(217, 79, 93, .2);
  --tip-sidebar-accent: #ff929d;
  background: #202733 !important;
  box-shadow: 10px 0 30px rgba(15, 19, 27, .2);
}

#kt_aside.aside.aside-default .tip-sidebar-search,
#kt_aside.aside.aside-default .tip-sidebar-release,
#kt_aside.aside.aside-default .tip-sidebar-close {
  background: rgba(255, 255, 255, .055);
}

#kt_aside.aside.aside-default .tip-sidebar-search:focus-within {
  background: rgba(255, 255, 255, .09);
}

#kt_aside.aside.aside-default .tip-sidebar-close:hover {
  background: var(--tip-sidebar-hover);
}

/* The client portal's guide card used a pale campaign surface before the
   sidebar became dark. Keep its warm pink cue, but give the white copy a
   proper charcoal surface and a visibly separate interactive boundary. */
#kt_aside.aside.aside-default .tip-client-sidebar-guide .tip-sidebar-guide-trigger {
  border-color: rgba(255, 146, 157, .38);
  background: linear-gradient(135deg, #384250 0%, #2a323f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 18px rgba(11, 15, 23, .2);
}

#kt_aside.aside.aside-default .tip-client-sidebar-guide .tip-sidebar-guide-cursor {
  color: rgba(255, 146, 157, .22);
}

#kt_aside.aside.aside-default .tip-client-sidebar-guide .tip-sidebar-guide-title,
#kt_aside.aside.aside-default .tip-client-sidebar-guide .tip-sidebar-guide-description {
  color: #fff;
}

#kt_aside.aside.aside-default .tip-client-sidebar-guide .tip-sidebar-guide-description {
  color: rgba(255, 255, 255, .82);
}

/* Defensive legacy state: desktop sidebars are now fixed open, but older
   saved minimise preferences must not reveal the former pale guide tile. */
@media (min-width: 1200px) {
  [data-kt-aside-minimize=on] #kt_aside.aside.aside-default:not(:hover) .tip-client-sidebar-footer .tip-sidebar-guide-trigger {
    border-color: rgba(255, 146, 157, .32);
    background: #303946;
  }
}

/* Keep the navigation itself monochrome. Location is expressed through the
   active-row surface and rail, not by changing label or icon colour. */
#kt_aside.aside.aside-default .menu-item .menu-link,
#kt_aside.aside.aside-default .menu-item .menu-link .menu-title,
#kt_aside.aside.aside-default .menu-item .menu-link .menu-icon,
#kt_aside.aside.aside-default .menu-item .menu-link .menu-icon i,
#kt_aside.aside.aside-default .menu-item .menu-link .menu-arrow,
#kt_aside.aside.aside-default .menu-item .menu-link .menu-bullet,
#kt_aside.aside.aside-default .menu-item .menu-link .menu-bullet .bullet {
  color: #fff !important;
}

/* Profile pictures: fill the frame without stretching. New uploads are already
   512px squares (helpers/avatar.py); this also fixes older non-square files. */
.symbol > img,
.symbol .symbol-label > img,
img[src*="_profilepic"],
img[src*="/uploads/avatars/"],
img[src*="/avatars/"] {
  object-fit: cover;
  object-position: center 40%;
}