/* ==========================================================================
   Aivanta application shell: sidebar, topbar, content area, footer,
   command search and toasts.
   ========================================================================== */

.av-app {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- Sidebar ---------- */
.av-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--av-z-sidebar);
  width: var(--av-sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--av-surface);
  border-right: 1px solid var(--av-border);
  transition: width var(--av-duration) var(--av-ease), transform var(--av-duration) var(--av-ease);
}

.av-sidebar__head {
  height: var(--av-topbar-height);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--av-space-3);
  padding: 0 var(--av-space-5);
  border-bottom: 1px solid var(--av-border);
}
.av-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--av-text) !important;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--av-text-lg);
  letter-spacing: -0.02em;
  min-width: 0;
}
.av-brand img { width: 30px; height: 30px; flex: 0 0 auto; }
.av-brand__name { white-space: nowrap; }

.av-sidebar__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--av-space-3) var(--av-space-3) var(--av-space-6);
  overscroll-behavior: contain;
}

.av-nav-group + .av-nav-group { margin-top: 2px; }

.av-nav-group__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: var(--av-text-muted);
  font: inherit;
  font-weight: 600;
  text-align: left;
  border-radius: var(--av-radius);
  cursor: pointer;
  transition: background var(--av-duration), color var(--av-duration);
}
.av-nav-group__toggle:hover { background: var(--av-surface-hover); color: var(--av-text); }
.av-nav-group__toggle > .bi:first-child { font-size: 1.1rem; flex: 0 0 auto; }
.av-nav-group__label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-nav-group__chevron { font-size: 0.7rem; transition: transform var(--av-duration) var(--av-ease); }
.av-nav-group.is-open > .av-nav-group__toggle .av-nav-group__chevron { transform: rotate(90deg); }
.av-nav-group.has-active > .av-nav-group__toggle { color: var(--av-text); }

.av-nav-group__items {
  list-style: none;
  margin: 2px 0 6px;
  padding: 0 0 0 28px;
  display: none;
  position: relative;
}
.av-nav-group.is-open > .av-nav-group__items { display: block; }
.av-nav-group__items::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--av-border);
}

.av-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  margin: 1px 0;
  border-radius: var(--av-radius);
  color: var(--av-text-muted) !important;
  text-decoration: none;
  font-weight: 500;
  transition: background var(--av-duration), color var(--av-duration);
}
.av-nav-link:hover { background: var(--av-surface-hover); color: var(--av-text) !important; }
.av-nav-link[aria-current="page"] {
  background: var(--av-accent-soft);
  color: var(--av-accent-text) !important;
  font-weight: 600;
}

/* Collapsed (desktop only) */
@media (min-width: 992px) {
  html.av-sidebar-collapsed .av-sidebar { width: var(--av-sidebar-collapsed-width); }
  html.av-sidebar-collapsed .av-brand__name,
  html.av-sidebar-collapsed .av-nav-group__label,
  html.av-sidebar-collapsed .av-nav-group__chevron { display: none; }
  html.av-sidebar-collapsed .av-nav-group__items { display: none !important; }
  html.av-sidebar-collapsed .av-sidebar__head { justify-content: center; padding: 0; }
  html.av-sidebar-collapsed .av-nav-group__toggle { justify-content: center; padding: 11px 0; }
}

/* ---------- Main column ---------- */
.av-main-col {
  margin-left: var(--av-sidebar-width);
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  transition: margin-left var(--av-duration) var(--av-ease);
}
@media (min-width: 992px) {
  html.av-sidebar-collapsed .av-main-col { margin-left: var(--av-sidebar-collapsed-width); }
}

/* ---------- Topbar ---------- */
.av-topbar {
  position: sticky;
  top: 0;
  z-index: var(--av-z-topbar);
  height: var(--av-topbar-height);
  display: flex;
  align-items: center;
  gap: var(--av-space-3);
  padding: 0 var(--av-space-6);
  background: color-mix(in srgb, var(--av-surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--av-border);
}
.av-topbar__spacer { flex: 1 1 auto; }
.av-topbar__actions { display: flex; align-items: center; gap: var(--av-space-1); }

.av-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--av-text-muted);
  border-radius: var(--av-radius);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--av-duration), color var(--av-duration);
}
.av-icon-btn:hover { background: var(--av-surface-hover); color: var(--av-text); }
.av-icon-btn .av-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--av-danger);
  border: 2px solid var(--av-surface);
  box-sizing: content-box;
}

.av-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: min(380px, 100%);
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--av-border);
  background: var(--av-surface-2);
  color: var(--av-text-subtle);
  border-radius: var(--av-radius);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--av-duration), background var(--av-duration);
}
.av-search-trigger:hover { border-color: var(--av-border-strong); background: var(--av-surface); }
.av-search-trigger span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-kbd {
  font-family: var(--av-font-sans);
  font-size: var(--av-text-xs);
  padding: 1px 6px;
  border: 1px solid var(--av-border-strong);
  border-radius: 4px;
  background: var(--av-surface);
  color: var(--av-text-muted);
}

.av-avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--av-accent-soft);
  color: var(--av-accent-text);
  font-size: var(--av-text-sm);
  font-weight: 650;
  flex: 0 0 auto;
}
.av-avatar--sm { width: 28px; height: 28px; font-size: var(--av-text-xs); }
.av-avatar--lg { width: 56px; height: 56px; font-size: var(--av-text-lg); }
.av-avatar--xl { width: 88px; height: 88px; font-size: var(--av-text-2xl); }

.av-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px 3px 3px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--av-text);
  border-radius: var(--av-radius-pill);
  font: inherit;
  cursor: pointer;
}
.av-profile-btn:hover { background: var(--av-surface-hover); }

.av-menu-panel {
  background: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-lg);
  box-shadow: var(--av-shadow-lg);
  padding: 6px;
  min-width: 220px;
}
.av-menu-panel .dropdown-item {
  border-radius: var(--av-radius-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: var(--av-text);
}
.av-menu-panel .dropdown-item:hover,
.av-menu-panel .dropdown-item:focus { background: var(--av-surface-hover); color: var(--av-text); }
.av-menu-panel .dropdown-divider { border-color: var(--av-border); margin: 6px 0; }
.av-menu-panel--notifications { width: min(380px, calc(100vw - 24px)); padding: 0; }
.av-menu-panel__head,
.av-menu-panel__foot { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; }
.av-menu-panel__head { border-bottom: 1px solid var(--av-border); font-weight: 650; }
.av-menu-panel__foot { border-top: 1px solid var(--av-border); }
.av-notif-item { display: flex; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--av-text) !important; border-bottom: 1px solid var(--av-border); }
.av-notif-item:last-of-type { border-bottom: 0; }
.av-notif-item:hover { background: var(--av-surface-hover); }
.av-notif-item p { margin: 0; font-size: var(--av-text-sm); }
.av-notif-item small { color: var(--av-text-subtle); }

/* ---------- Content ---------- */
.av-content {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--av-content-max);
  margin: 0 auto;
  padding: var(--av-space-6);
  min-width: 0;
}

.av-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--av-space-3);
  padding: 0;
  list-style: none;
  font-size: var(--av-text-sm);
  color: var(--av-text-subtle);
}
.av-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--av-border-strong); }
.av-breadcrumb a { color: var(--av-text-muted) !important; text-decoration: none; }
.av-breadcrumb a:hover { color: var(--av-accent-text) !important; text-decoration: underline; }
.av-breadcrumb [aria-current="page"] { color: var(--av-text); font-weight: 500; }

.av-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--av-space-4);
  margin-bottom: var(--av-space-6);
}
.av-page-header h1 { margin: 0 0 4px; }
.av-page-header p { margin: 0; color: var(--av-text-muted); max-width: 62ch; }
.av-page-actions { display: flex; flex-wrap: wrap; gap: var(--av-space-2); align-items: center; }

/* Footer */
.av-footer {
  flex: 0 0 auto;
  padding: var(--av-space-5) var(--av-space-6);
  border-top: 1px solid var(--av-border);
  color: var(--av-text-subtle);
  font-size: var(--av-text-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--av-space-2) var(--av-space-6);
  justify-content: space-between;
}

/* ---------- Mobile off-canvas ---------- */
.av-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--av-z-overlay);
  background: var(--av-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--av-duration), visibility var(--av-duration);
}

@media (max-width: 991.98px) {
  .av-sidebar {
    transform: translateX(-100%);
    width: min(300px, 86vw);
    box-shadow: var(--av-shadow-lg);
    visibility: hidden;
    transition: transform var(--av-duration) var(--av-ease), visibility 0s linear var(--av-duration);
  }
  body.av-sidebar-open .av-sidebar {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--av-duration) var(--av-ease), visibility 0s;
  }
  body.av-sidebar-open .av-overlay { opacity: 1; visibility: visible; }
  body.av-sidebar-open { overflow: hidden; }
  .av-main-col { margin-left: 0; }
  .av-topbar { padding: 0 var(--av-space-3); }
  .av-content { padding: var(--av-space-4); }
  .av-footer { padding: var(--av-space-4); }
  .av-search-trigger { width: 38px; padding: 0; justify-content: center; }
  .av-search-trigger span,
  .av-search-trigger .av-kbd { display: none; }
  .av-profile-btn .av-profile-btn__name { display: none; }
}
@media (min-width: 992px) {
  .av-mobile-only { display: none !important; }
}
@media (max-width: 991.98px) {
  .av-desktop-only { display: none !important; }
}

/* ---------- Command search ---------- */
.av-palette {
  position: fixed;
  inset: 0;
  z-index: var(--av-z-palette);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
  background: var(--av-overlay);
}
.av-palette.is-open { display: flex; }
.av-palette__box {
  width: min(600px, 100%);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-lg);
  box-shadow: var(--av-shadow-lg);
  overflow: hidden;
}
.av-palette__input-wrap { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--av-border); color: var(--av-text-subtle); }
.av-palette__input {
  flex: 1;
  height: 54px;
  border: 0;
  background: transparent;
  color: var(--av-text);
  font: inherit;
  font-size: var(--av-text-md);
}
.av-palette__input:focus-visible { outline: none; }
.av-palette__list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.av-palette__item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--av-radius);
  color: var(--av-text) !important;
  text-decoration: none;
}
.av-palette__item a small { margin-left: auto; color: var(--av-text-subtle); }
.av-palette__item a:hover,
.av-palette__item.is-active a { background: var(--av-accent-soft); color: var(--av-accent-text) !important; }
.av-palette__empty { padding: 28px 16px; text-align: center; color: var(--av-text-muted); }

/* ---------- Toasts ---------- */
.av-toast-region {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--av-z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.av-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--av-surface);
  border: 1px solid var(--av-border);
  border-left-width: 4px;
  border-radius: var(--av-radius);
  box-shadow: var(--av-shadow-lg);
  animation: av-toast-in 200ms var(--av-ease);
}
.av-toast--success { border-left-color: var(--av-success); }
.av-toast--success .bi { color: var(--av-success); }
.av-toast--danger { border-left-color: var(--av-danger); }
.av-toast--danger .bi { color: var(--av-danger); }
.av-toast--info { border-left-color: var(--av-info); }
.av-toast--info .bi { color: var(--av-info); }
.av-toast__body { flex: 1; font-size: var(--av-text-sm); }
.av-toast__body strong { display: block; font-size: var(--av-text-base); }
@keyframes av-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Decorative text drawn with CSS so it is not read as part of a control's visible label */
.av-kbd[data-keys]::before, .av-avatar[data-initials]::before { content: attr(data-keys) attr(data-initials); }