/* ==========================================================================
   Admin Dock Nav — macOS-inspired bottom dock (Vuexy / Bootstrap)
   Layout mode is selected via html[data-admin-nav-layout="dock|sidebar"]
   (persisted in localStorage by admin-nav-layout.js).
   ========================================================================== */

html[data-admin-nav-layout="dock"] {
  --dock-z: 1080;
  --dock-bottom: 0.85rem;
  --dock-inset-x: 0.85rem;
  --dock-height: 5.25rem;
}

html[data-admin-nav-layout="dock"] body {
  padding-bottom: calc(var(--dock-height) + var(--dock-bottom) + 0.75rem) !important;
}

/* Theme switcher hidden for now */
.dropdown-style-switcher,
.admin-dock__theme,
.admin-dock__mobile-theme-btn,
[data-dock-panel="theme"],
[data-dock-panel="theme-mobile"] {
  display: none !important;
}

html[data-admin-nav-layout="dock"] .admin-dock__actions > .admin-dock__divider:has(+ .admin-dock__theme),
html[data-admin-nav-layout="dock"] .admin-dock__actions > .admin-dock__theme + .admin-dock__divider {
  display: none !important;
}

html[data-admin-nav-layout="dock"] .layout-menu,
html[data-admin-nav-layout="dock"] .layout-overlay.layout-menu-toggle,
html[data-admin-nav-layout="dock"] .layout-menu-toggle.navbar-nav,
html[data-admin-nav-layout="dock"] .layout-navbar {
  display: none !important;
}

html[data-admin-nav-layout="dock"] .layout-page {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Vuexy reserves sidebar width on .layout-page; remove it in dock for LTR + RTL */
@media (min-width: 1200px) {
  html[data-admin-nav-layout="dock"].layout-menu-fixed .layout-page,
  html[data-admin-nav-layout="dock"].layout-menu-fixed-offcanvas .layout-page,
  html[data-admin-nav-layout="dock"][dir="rtl"].layout-menu-fixed .layout-page,
  html[data-admin-nav-layout="dock"][dir="rtl"].layout-menu-fixed-offcanvas .layout-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

html[data-admin-nav-layout="dock"] body.dock-drawer-open {
  overflow: hidden !important;
}

html[data-admin-nav-layout="dock"] body.dock-drawer-open .layout-wrapper {
  filter: blur(10px);
  transition: filter 0.2s ease;
  pointer-events: none;
  user-select: none;
}

html[data-admin-nav-layout="dock"] .container-p-y,
html[data-admin-nav-layout="dock"] .container-xxl {
  max-width: 100%;
}

/* Hide dock chrome when sidebar mode is active */
html[data-admin-nav-layout="sidebar"] #adminDock,
html[data-admin-nav-layout="sidebar"] #adminDockDrawer,
html:not([data-admin-nav-layout="dock"]) #adminDock,
html:not([data-admin-nav-layout="dock"]) #adminDockDrawer {
  display: none !important;
}

/* ---------- Sidebar shell: floating inset + inner-edge curves ---------- */
html[data-admin-nav-layout="sidebar"] {
  --admin-sidebar-inset-y: 0.85rem;
  --admin-sidebar-radius: 1.35rem;
}

html[data-admin-nav-layout="sidebar"] #layout-menu.layout-menu {
  display: flex;
  flex-direction: column;
}

html[data-admin-nav-layout="sidebar"] #layout-menu.layout-menu > .app-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 4.5rem;
  padding: 0.75rem 0.85rem 0.75rem 1rem;
}

html[data-admin-nav-layout="sidebar"] #layout-menu.layout-menu > .app-brand .app-brand-link {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}

html[data-admin-nav-layout="sidebar"] #layout-menu.layout-menu > .app-brand .app-brand-logo {
  display: block;
  width: auto;
  max-width: 12.5rem;
  max-height: 3rem;
  height: auto;
  object-fit: contain;
}

html[data-admin-nav-layout="sidebar"] #layout-menu.layout-menu > .app-brand .layout-menu-toggle {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

@media (min-width: 1200px) {
  html[data-admin-nav-layout="sidebar"].layout-menu-collapsed:not(.layout-menu-hover) #layout-menu.layout-menu {
    width: 5.25rem !important;
  }

  html[data-admin-nav-layout="sidebar"].layout-menu-collapsed:not(.layout-menu-hover) #layout-menu.layout-menu > .app-brand {
    justify-content: center;
    padding-inline: 0.5rem;
  }

  html[data-admin-nav-layout="sidebar"].layout-menu-collapsed:not(.layout-menu-hover) #layout-menu.layout-menu > .app-brand .app-brand-link {
    display: none;
  }
}

/*
 * Keep menu-inner as the scroll container for PerfectScrollbar (Vuexy).
 * Hide native scrollbars — PS rails stay invisible until hover by theme CSS.
 */
html[data-admin-nav-layout="sidebar"] #layout-menu.layout-menu .menu-inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html[data-admin-nav-layout="sidebar"] #layout-menu.layout-menu .menu-inner::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

@media (min-width: 1200px) {
  html[data-admin-nav-layout="sidebar"] #layout-menu.layout-menu {
    top: var(--admin-sidebar-inset-y) !important;
    bottom: var(--admin-sidebar-inset-y) !important;
    height: auto !important;
    max-height: calc(100dvh - (var(--admin-sidebar-inset-y) * 2)) !important;
    border-radius: 0 var(--admin-sidebar-radius) var(--admin-sidebar-radius) 0 !important;
    overflow: hidden;
  }

  html[data-admin-nav-layout="sidebar"][dir="rtl"] #layout-menu.layout-menu {
    border-radius: var(--admin-sidebar-radius) 0 0 var(--admin-sidebar-radius) !important;
  }

  html[data-admin-nav-layout="sidebar"] #layout-menu.layout-menu .menu-inner {
    height: auto !important;
    max-height: none !important;
  }

  /* Floating sidebar sits over the layout-page gutter; keep containers flat so
     LTR/RTL both show the same page canvas (no tinted strip behind the menu). */
  html[data-admin-nav-layout="sidebar"] .layout-wrapper,
  html[data-admin-nav-layout="sidebar"] .layout-container {
    background-color: transparent !important;
    background-image: none !important;
  }
}

/* Hide Vuexy scroll fade under logo — custom logo height misaligns the white gradient */
html[data-admin-nav-layout="sidebar"] #layout-menu .menu-inner-shadow {
  display: none !important;
}

/* ---------- Desktop glass dock (near full width, inset + rounded) ---------- */
.admin-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--dock-bottom, 0.85rem);
  z-index: var(--dock-z, 1080);
  pointer-events: none;
  display: flex;
  justify-content: center;
  padding: 0 var(--dock-inset-x, 0.85rem);
}

/* Keep dock under Bootstrap modals (1050/1055) so Create/Edit aren't blocked */
body.modal-open .admin-dock,
body.modal-open .admin-dock-drawer {
  z-index: 1030 !important;
}

.admin-dock__desktop,
.admin-dock__mobile {
  pointer-events: auto;
}

.admin-dock__desktop {
  width: 100%;
  max-width: none;
}

.admin-dock__glass {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 1.35rem;
  overflow: visible;
  /* Classic: solid dock */
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(75, 70, 92, 0.14);
  box-shadow:
    0 10px 30px rgba(34, 41, 47, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

html.dark-style .admin-dock__glass,
[data-bs-theme="dark"] .admin-dock__glass {
  background: rgba(47, 51, 73, 0.94);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Glass appearance: frosted dock (matches card glass tokens) */
html[data-admin-card-style="glass"] .admin-dock__glass {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.14) 100%
    ),
    rgba(210, 212, 218, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.12),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(48px) saturate(1.65);
  -webkit-backdrop-filter: blur(48px) saturate(1.65);
}

html.dark-style[data-admin-card-style="glass"] .admin-dock__glass,
[data-bs-theme="dark"][data-admin-card-style="glass"] .admin-dock__glass {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.03) 100%
    ),
    rgba(52, 56, 72, 0.72);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.35),
    0 12px 32px rgba(0, 0, 0, 0.36),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.14);
}

.admin-dock__scroller {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.admin-dock__scroller::-webkit-scrollbar {
  display: none;
}

.admin-dock__items {
  display: flex;
  align-items: stretch;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
}

.admin-dock__item {
  position: relative;
  flex: 0 0 auto;
}

.admin-dock__actions {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  gap: 0.25rem;
  margin-left: auto;
}

.admin-dock__brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 0.35rem 0 0.15rem;
}

.admin-dock__brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.25rem 0.35rem;
  border-radius: 0.75rem;
  line-height: 0;
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.admin-dock__brand-link:hover,
.admin-dock__brand-link:focus-visible {
  background: color-mix(in srgb, var(--admin-primary, #7367f0) 10%, transparent);
  outline: none;
  transform: translateY(-2px);
}

.admin-dock__brand-img {
  display: block;
  height: 2.75rem;
  width: auto;
  max-width: 13rem;
  object-fit: contain;
}

.admin-dock__profile,
.admin-dock__theme,
.admin-dock__locale,
.admin-dock__more {
  position: relative;
  flex: 0 0 auto;
}

.admin-dock__item.is-dock-overflowed {
  display: none !important;
}

[data-dock-more-list] {
  margin: 0;
  padding: 0;
  min-width: 12rem;
  max-width: min(20rem, calc(100vw - 2rem));
}

[data-dock-more-list] > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-dock-more-list] .admin-dock__dropdown-item {
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}

.admin-dock__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 4.25rem;
  max-width: 5.5rem;
  min-height: 44px;
  padding: 0.35rem 0.4rem 0.45rem;
  border: 0;
  border-radius: 0.9rem;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.admin-dock__btn:hover,
.admin-dock__btn:focus-visible {
  background: color-mix(in srgb, var(--admin-primary, #7367f0) 5%, transparent);
  color: var(--admin-primary, #7367f0);
  outline: none;
  transform: translateY(-2px);
}

.admin-dock__item.is-active .admin-dock__btn,
.admin-dock__btn[aria-current="page"] {
  background: transparent;
  color: var(--admin-primary, #7367f0);
  transform: none;
}

.admin-dock__item.is-active .admin-dock__btn:hover,
.admin-dock__item.is-active .admin-dock__btn:focus-visible,
.admin-dock__btn[aria-current="page"]:hover,
.admin-dock__btn[aria-current="page"]:focus-visible {
  background: transparent;
  color: var(--admin-primary, #7367f0);
  transform: none;
}

.admin-dock__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.7rem;
  font-size: 1.35rem;
  line-height: 1;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.admin-dock__item.is-active .admin-dock__icon,
.admin-dock__btn[aria-current="page"] .admin-dock__icon {
  background: color-mix(in srgb, var(--admin-primary, #7367f0) 16%, transparent);
  color: var(--admin-primary, #7367f0);
  box-shadow:
    inset 0 2px 5px rgba(15, 23, 42, 0.16),
    inset 0 -1px 1px rgba(255, 255, 255, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.35);
}

html.dark-style .admin-dock__item.is-active .admin-dock__icon,
html.dark-style .admin-dock__btn[aria-current="page"] .admin-dock__icon,
[data-bs-theme="dark"] .admin-dock__item.is-active .admin-dock__icon,
[data-bs-theme="dark"] .admin-dock__btn[aria-current="page"] .admin-dock__icon {
  background: color-mix(in srgb, var(--admin-primary, #7367f0) 28%, transparent);
  color: var(--admin-primary, #7367f0);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 -1px 1px rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.04);
}

.admin-dock__label {
  display: block;
  max-width: 100%;
  padding: 0 0.15rem;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-dock__divider {
  width: 1px;
  align-self: stretch;
  margin: 0.35rem 0.15rem;
  background: rgba(75, 70, 92, 0.16);
}

html.dark-style .admin-dock__divider,
[data-bs-theme="dark"] .admin-dock__divider {
  background: rgba(255, 255, 255, 0.12);
}

.admin-dock__avatar,
.admin-dock__avatar img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}

.admin-dock__avatar {
  display: inline-flex;
  overflow: hidden;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--admin-primary, #7367f0) 35%, transparent);
}

.admin-dock__theme,
.admin-dock__locale {
  position: relative;
  flex: 0 0 auto;
}

.admin-dock__dropdown--theme,
.admin-dock__dropdown--locale {
  min-width: 10rem;
}

.admin-dock__icon--flag {
  font-size: 1.15rem;
}

.admin-dock__icon--flag .fi {
  width: 1.35rem;
  height: 1.35rem;
  display: inline-block;
  background-size: cover;
}

/* ---------- Dropdown panels (fixed via JS; portaled to body) ---------- */
.admin-dock__dropdown {
  position: fixed;
  left: 0;
  top: 0;
  min-width: 11.5rem;
  max-width: min(18rem, calc(100vw - 1.5rem));
  padding: 0.4rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(75, 70, 92, 0.1);
  box-shadow: 0 12px 28px rgba(34, 41, 47, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: none;
  z-index: calc(var(--dock-z, 1080) + 20);
}

html.dark-style .admin-dock__dropdown,
[data-bs-theme="dark"] .admin-dock__dropdown {
  background: rgba(47, 51, 73, 0.96);
  border-color: rgba(255, 255, 255, 0.08);
}

.admin-dock__dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  font-size: 0.875rem;
  cursor: pointer;
}

.admin-dock__dropdown-item:hover,
.admin-dock__dropdown-item:focus-visible,
.admin-dock__dropdown-item.is-active {
  background: color-mix(in srgb, var(--admin-primary, #7367f0) 12%, transparent);
  color: var(--admin-primary, #7367f0);
  outline: none;
}

.admin-dock__dropdown-divider {
  height: 1px;
  margin: 0.35rem 0.4rem;
  background: rgba(75, 70, 92, 0.12);
}

/* ---------- macOS-style hover tooltip ---------- */
.admin-dock-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: calc(var(--dock-z, 1080) + 30);
  padding: 0.35rem 0.7rem;
  border-radius: 0.45rem;
  background: rgba(34, 41, 47, 0.92);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transition: opacity 0.12s ease, transform 0.12s ease;
  box-shadow: 0 6px 18px rgba(34, 41, 47, 0.28);
}

.admin-dock-tip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.admin-dock-tip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0;
  height: 0;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: rgba(34, 41, 47, 0.92);
}

html.dark-style .admin-dock-tip,
[data-bs-theme="dark"] .admin-dock-tip {
  background: rgba(255, 255, 255, 0.92);
  color: #2f3349;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

html.dark-style .admin-dock-tip::after,
[data-bs-theme="dark"] .admin-dock-tip::after {
  border-top-color: rgba(255, 255, 255, 0.92);
}

/* ---------- Mobile compact bar ---------- */
.admin-dock__mobile {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(75, 70, 92, 0.14);
  box-shadow: 0 10px 28px rgba(34, 41, 47, 0.16);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

html.dark-style .admin-dock__mobile,
[data-bs-theme="dark"] .admin-dock__mobile {
  background: rgba(47, 51, 73, 0.94);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-admin-card-style="glass"] .admin-dock__mobile {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.14) 100%
    ),
    rgba(210, 212, 218, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.12),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(48px) saturate(1.65);
  -webkit-backdrop-filter: blur(48px) saturate(1.65);
}

html.dark-style[data-admin-card-style="glass"] .admin-dock__mobile,
[data-bs-theme="dark"][data-admin-card-style="glass"] .admin-dock__mobile {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.03) 100%
    ),
    rgba(52, 56, 72, 0.72);
  border-color: rgba(255, 255, 255, 0.16);
}

.admin-dock__mobile-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: end;
  margin-left: 0;
}

.admin-dock__mobile-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  min-height: 44px;
  padding: 0.2rem 0.35rem;
  border-radius: 0.75rem;
  line-height: 0;
  text-decoration: none;
}

.admin-dock__mobile-brand img {
  display: block;
  height: 2.25rem;
  width: auto;
  max-width: 10rem;
  object-fit: contain;
}

.admin-dock__mobile-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  gap: 0;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--admin-primary, #7367f0) 12%, transparent);
  color: var(--admin-primary, #7367f0);
  font-weight: 600;
}

.admin-dock__mobile-menu span {
  display: none;
}

.admin-dock__mobile-theme-btn,
.admin-dock__mobile-locale-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 0.85rem;
  color: inherit;
}

.admin-dock__mobile-locale-btn .fi {
  width: 1.35rem;
  height: 1.35rem;
  display: inline-block;
  background-size: cover;
}

.admin-dock__mobile-profile {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}

.admin-dock__mobile-profile img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

/* ---------- Mobile bottom sheet (iPhone-style grid) ---------- */
.admin-dock-drawer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--dock-z, 1080) + 5);
}

.admin-dock-drawer[hidden] {
  display: none !important;
}

.admin-dock-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(34, 41, 47, 0.28);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

.admin-dock-drawer__sheet {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: calc(var(--dock-height, 4.25rem) + var(--dock-bottom, 0.85rem) + 0.45rem);
  min-height: 50vh;
  max-height: min(85vh, 720px);
  padding: 0.35rem 0.75rem 1rem;
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(75, 70, 92, 0.14);
  box-shadow: 0 12px 32px rgba(34, 41, 47, 0.2);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  transform: translateY(0);
  transition: transform 0.22s ease;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
}

html.dark-style .admin-dock-drawer__sheet,
[data-bs-theme="dark"] .admin-dock-drawer__sheet {
  background: rgba(47, 51, 73, 0.94);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

html[data-admin-card-style="glass"] .admin-dock-drawer__sheet {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.14) 100%
    ),
    rgba(210, 212, 218, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.14),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(48px) saturate(1.65);
  -webkit-backdrop-filter: blur(48px) saturate(1.65);
}

html.dark-style[data-admin-card-style="glass"] .admin-dock-drawer__sheet,
[data-bs-theme="dark"][data-admin-card-style="glass"] .admin-dock-drawer__sheet {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.03) 100%
    ),
    rgba(52, 56, 72, 0.72);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.35),
    0 12px 32px rgba(0, 0, 0, 0.32),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
}

.admin-dock-drawer.is-dragging .admin-dock-drawer__sheet,
.admin-dock-drawer.is-closing .admin-dock-drawer__sheet {
  transition: none;
}

.admin-dock-drawer__handle {
  width: 2.75rem;
  height: 0.28rem;
  margin: 0.35rem auto 0.65rem;
  border-radius: 999px;
  background: rgba(75, 70, 92, 0.25);
}

html.dark-style .admin-dock-drawer__handle,
[data-bs-theme="dark"] .admin-dock-drawer__handle {
  background: rgba(255, 255, 255, 0.22);
}

.admin-dock-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  padding: 0 0.15rem;
}

.admin-dock-drawer__body {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  max-height: none;
  padding-bottom: 0.35rem;
}

.admin-dock-drawer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem 0.35rem;
  margin: 0;
  padding: 0.15rem 0 0.35rem;
}

@media (max-width: 379.98px) {
  .admin-dock-drawer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.admin-dock-drawer__item {
  list-style: none;
  margin: 0;
  min-width: 0;
}

.admin-dock-drawer__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  width: 100%;
  min-height: 4.75rem;
  padding: 0.45rem 0.25rem 0.35rem;
  border: 0;
  border-radius: 0.95rem;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.admin-dock-drawer__tile:hover,
.admin-dock-drawer__tile:focus-visible {
  background: color-mix(in srgb, var(--admin-primary, #7367f0) 5%, transparent);
  color: var(--admin-primary, #7367f0);
  outline: none;
  transform: translateY(-1px);
}

.admin-dock-drawer__item.is-active > .admin-dock-drawer__tile,
.admin-dock-drawer__tile.is-active,
.admin-dock-drawer__tile[aria-current="page"] {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 0.55rem;
  background: transparent;
  color: var(--admin-primary, #7367f0);
  transform: none;
}

.admin-dock-drawer__item.is-active > .admin-dock-drawer__tile:hover,
.admin-dock-drawer__item.is-active > .admin-dock-drawer__tile:focus-visible,
.admin-dock-drawer__tile.is-active:hover,
.admin-dock-drawer__tile.is-active:focus-visible,
.admin-dock-drawer__tile[aria-current="page"]:hover,
.admin-dock-drawer__tile[aria-current="page"]:focus-visible {
  background: transparent;
  color: var(--admin-primary, #7367f0);
  transform: none;
}

.admin-dock-drawer__item.is-active > .admin-dock-drawer__tile .admin-dock-drawer__tile-icon,
.admin-dock-drawer__tile.is-active .admin-dock-drawer__tile-icon,
.admin-dock-drawer__tile[aria-current="page"] .admin-dock-drawer__tile-icon {
  background: color-mix(in srgb, var(--admin-primary, #7367f0) 16%, transparent);
  color: var(--admin-primary, #7367f0);
  box-shadow:
    inset 0 2px 5px rgba(15, 23, 42, 0.16),
    inset 0 -1px 1px rgba(255, 255, 255, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.35);
}

html.dark-style .admin-dock-drawer__item.is-active > .admin-dock-drawer__tile .admin-dock-drawer__tile-icon,
html.dark-style .admin-dock-drawer__tile.is-active .admin-dock-drawer__tile-icon,
html.dark-style .admin-dock-drawer__tile[aria-current="page"] .admin-dock-drawer__tile-icon,
[data-bs-theme="dark"] .admin-dock-drawer__item.is-active > .admin-dock-drawer__tile .admin-dock-drawer__tile-icon,
[data-bs-theme="dark"] .admin-dock-drawer__tile.is-active .admin-dock-drawer__tile-icon,
[data-bs-theme="dark"] .admin-dock-drawer__tile[aria-current="page"] .admin-dock-drawer__tile-icon {
  background: color-mix(in srgb, var(--admin-primary, #7367f0) 28%, transparent);
  color: var(--admin-primary, #7367f0);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 -1px 1px rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.04);
}

.admin-dock-drawer__tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  font-size: 1.45rem;
  line-height: 1;
  background: color-mix(in srgb, var(--admin-primary, #7367f0) 6%, transparent);
  color: var(--admin-primary, #7367f0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

html.dark-style .admin-dock-drawer__tile-icon,
[data-bs-theme="dark"] .admin-dock-drawer__tile-icon {
  background: color-mix(in srgb, var(--admin-primary, #7367f0) 22%, transparent);
  box-shadow: none;
}

.admin-dock-drawer__tile-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  padding: 0 0.1rem;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
}

/* Folder panel (submenu as nested grid) — inherit drawer surface (no solid white overlay) */
.admin-dock-drawer__folder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 0.15rem 0.1rem 0.5rem;
  border-radius: 1rem;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.dark-style .admin-dock-drawer__folder,
[data-bs-theme="dark"] .admin-dock-drawer__folder,
html[data-admin-card-style="glass"] .admin-dock-drawer__folder,
html.dark-style[data-admin-card-style="glass"] .admin-dock-drawer__folder,
[data-bs-theme="dark"][data-admin-card-style="glass"] .admin-dock-drawer__folder {
  background: transparent;
}

.admin-dock-drawer__folder[hidden] {
  display: none !important;
}

.admin-dock-drawer__folder-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
  padding: 0 0.15rem;
}

.admin-dock-drawer__folder-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 0.65rem;
  color: var(--admin-primary, #7367f0);
}

.admin-dock-drawer__folder-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.admin-dock-drawer.is-folder-open [data-dock-mobile-grid] > .admin-dock-drawer__item > .admin-dock-drawer__tile {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  html[data-admin-nav-layout="dock"] {
    --dock-height: 4.25rem;
  }
}


/* ---------- Notifications (dock) ---------- */
.admin-dock__notifications {
  position: relative;
  flex: 0 0 auto;
}

.admin-dock__notifications .admin-dock__btn,
.admin-dock__mobile-notifications .admin-dock__btn,
.admin-dock__mobile-notifications .admin-dock__mobile-locale-btn {
  position: relative;
  overflow: visible;
}

.admin-dock__notifications .admin-dock__icon {
  position: relative;
  overflow: visible;
}

.admin-dock__notifications .badge-notifications,
.admin-dock__mobile-notifications .badge-notifications {
  position: absolute;
  top: -0.2rem;
  inset-inline-end: -0.3rem;
  inset-inline-start: auto;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.28rem;
  font-size: 0.625rem;
  line-height: 1.05rem;
  z-index: 3;
  pointer-events: none;
  /* Override Vuexy badge-notifications translate that pulls it away */
  transform: none !important;
  margin: 0 !important;
}

.admin-dock__mobile-notifications .badge-notifications {
  top: -0.15rem;
  right: -0.15rem;
  inset-inline-end: -0.15rem;
}

[dir="rtl"] .admin-dock__mobile-notifications .badge-notifications {
  right: auto;
  left: -0.15rem;
}

/* Sidebar navbar bell badge — keep tight to the icon */
.dropdown-notifications > .nav-link > .position-relative > .badge-notifications {
  position: absolute;
  top: -0.15rem;
  inset-inline-end: -0.35rem;
  inset-inline-start: auto;
  transform: none !important;
  margin: 0 !important;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.28rem;
  font-size: 0.625rem;
  line-height: 1.05rem;
}

.admin-dock__dropdown--notifications {
  min-width: min(22rem, calc(100vw - 1.5rem));
  max-width: min(24rem, calc(100vw - 1.5rem));
  padding: 0;
  overflow: hidden;
}

.admin-dock__notifications-list {
  max-height: 22rem;
  overflow: auto;
}

.admin-dock__notifications-header,
.admin-dock__notifications-footer {
  background: transparent;
}

.admin-dock__theme,
.admin-dock__locale,
.admin-dock__notifications {
  position: relative;
  flex: 0 0 auto;
}

/* Notification dismiss slide (panel + modal) */
.dropdown-notifications-item,
.notifications-modal-list > .list-group-item[data-notification-id] {
  transition: transform 0.28s ease, opacity 0.28s ease, max-height 0.28s ease, margin 0.28s ease, padding 0.28s ease;
  transform: translateX(0);
  opacity: 1;
}

.dropdown-notifications-item.is-dismissing,
.notifications-modal-list > .list-group-item[data-notification-id].is-dismissing {
  opacity: 0;
  transform: translateX(-110%);
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  pointer-events: none;
  overflow: hidden;
}

[dir="rtl"] .dropdown-notifications-item.is-dismissing,
[dir="rtl"] .notifications-modal-list > .list-group-item[data-notification-id].is-dismissing {
  transform: translateX(110%);
}

#notificationsAllModal .modal-dialog {
  max-width: min(56rem, calc(100vw - 1.5rem));
  width: calc(100vw - 1.5rem);
  margin: 1rem auto;
}

#notificationsAllModal .notifications-all-modal__content {
  max-height: calc(100vh - 2rem);
  min-height: min(36rem, calc(100vh - 2rem));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem 1rem !important;
  position: relative;
}

#notificationsAllModal .notifications-all-modal__chrome {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 2.25rem;
  margin-bottom: 0.25rem;
}

/* Vuexy .modal .btn-close uses translate(23px, -25px) which clips against overflow */
#notificationsAllModal .notifications-all-modal__chrome .btn-close,
#notificationsAllModal .notifications-all-modal__chrome .btn-close:hover,
#notificationsAllModal .notifications-all-modal__chrome .btn-close:focus,
#notificationsAllModal .notifications-all-modal__chrome .btn-close:active {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0.5rem !important;
  box-sizing: content-box;
  opacity: 1;
  z-index: 5;
}

[dir="rtl"] #notificationsAllModal .notifications-all-modal__chrome {
  justify-content: flex-start;
}

#notificationsAllModal .notifications-all-modal__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 2rem - 1.5rem);
  overflow: hidden;
  padding: 0;
  position: relative;
}

#notificationsAllModal .notifications-all-modal__header {
  flex: 0 0 auto;
  margin-bottom: 1rem;
}

#notificationsAllModal .notifications-all-modal__tabs {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--bs-border-color, #d9dee3);
}

#notificationsAllModal .notifications-all-modal__tabs .nav-item {
  flex: 1 1 0;
  min-width: 0;
}

#notificationsAllModal .notifications-all-modal__tabs .nav-link {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 0.75rem;
}

#notificationsAllModal .notifications-all-modal__tab-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#notificationsAllModal .notifications-all-modal__pane {
  min-height: 0;
  overflow: hidden;
}

#notificationsAllModal .notifications-all-modal__pane.active {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

#notificationsAllModal .notifications-all-modal__toolbar {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

#notificationsAllModal .notifications-modal-list {
  flex: 1 1 auto;
  min-height: 16rem;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0 0 0.5rem;
}

#notificationsAllModal .notifications-modal-item {
  padding: 1rem 0.25rem;
  border-inline: 0;
}

#notificationsAllModal .notifications-modal-item .notifications-item-body {
  min-width: 0;
}

#notificationsAllModal .notifications-modal-item__title {
  font-size: 1rem;
  line-height: 1.4;
  word-break: break-word;
}

#notificationsAllModal .notifications-item-text {
  color: var(--bs-secondary-color, #697a8d);
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#notificationsAllModal .notifications-modal-list > .list-group-item {
  overflow: visible;
}

#notificationsAllModal .notifications-modal-item .dropdown-notifications-actions {
  margin-inline-start: 0.5rem;
  padding-top: 0.15rem;
}

/* ---------- Sidebar mode: top-right profile (dock profile equivalent) ---------- */
html:not([data-admin-nav-layout="sidebar"]) .sidebar-profile-menu {
  display: none !important;
}

html[data-admin-nav-layout="sidebar"].has-sidebar-profile:not(.has-company-top-dock) body {
  padding-top: 4.35rem !important;
}

.sidebar-profile-menu {
  position: fixed;
  top: 0.75rem;
  right: 0.85rem;
  z-index: 1095;
  max-width: min(18rem, calc(100vw - 1.5rem));
}

html[dir="rtl"] .sidebar-profile-menu {
  right: auto;
  left: 0.85rem;
}

body.modal-open .sidebar-profile-menu {
  z-index: 1030 !important;
}

.sidebar-profile-menu__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 100%;
  padding: 0.35rem 0.65rem 0.35rem 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(75, 70, 92, 0.14);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 10px 28px rgba(34, 41, 47, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  color: inherit;
  cursor: pointer;
}

html.dark-style .sidebar-profile-menu__btn,
[data-bs-theme="dark"] .sidebar-profile-menu__btn {
  background: rgba(47, 51, 73, 0.94);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.sidebar-profile-menu__btn:hover,
.sidebar-profile-menu.is-open .sidebar-profile-menu__btn {
  background: rgba(255, 255, 255, 0.98);
}

.sidebar-profile-menu__avatar {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(67, 89, 113, 0.08);
}

.sidebar-profile-menu__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-profile-menu__name {
  min-width: 0;
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}

.sidebar-profile-menu__chevron {
  flex: 0 0 auto;
  font-size: 0.95rem;
  opacity: 0.65;
  transition: transform 0.15s ease;
}

.sidebar-profile-menu.is-open .sidebar-profile-menu__chevron {
  transform: rotate(180deg);
}

.sidebar-profile-menu__dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 12rem;
  padding: 0.4rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(75, 70, 92, 0.14);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 32px rgba(34, 41, 47, 0.16);
  z-index: 2;
}

html[dir="rtl"] .sidebar-profile-menu__dropdown {
  right: auto;
  left: 0;
}

html.dark-style .sidebar-profile-menu__dropdown,
[data-bs-theme="dark"] .sidebar-profile-menu__dropdown {
  background: rgba(47, 51, 73, 0.98);
  border-color: rgba(255, 255, 255, 0.12);
}

.sidebar-profile-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.65rem;
  background: transparent;
  color: inherit;
  text-align: start;
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.25;
}

.sidebar-profile-menu__item:hover {
  background: rgba(67, 89, 113, 0.08);
  color: inherit;
}

.sidebar-profile-menu__divider {
  height: 1px;
  margin: 0.25rem 0.4rem;
  background: rgba(75, 70, 92, 0.12);
}

@media (max-width: 575.98px) {
  .sidebar-profile-menu__name {
    display: none;
  }

  .sidebar-profile-menu__btn {
    padding: 0.3rem;
  }

  .sidebar-profile-menu__chevron {
    display: none;
  }
}