/* stage-45-tablet-sidebar-dock: compact tablet sidebar dock without touching mobile bottom nav. */

@media (min-width: 761px) and (max-width: 1080px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: var(--focus-sidebar-collapsed, 72px) minmax(0, 1fr);
    gap: clamp(12px, 2vw, 18px);
    padding: clamp(12px, 2vw, 18px);
  }

  .sidebar,
  .app-shell.sidebar-collapsed .sidebar {
    width: var(--focus-sidebar-collapsed, 72px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    min-height: calc(100vh - clamp(24px, 4vw, 36px));
    padding: 10px;
    border-radius: 24px;
    overflow: hidden;
  }

  .sidebar::before,
  .app-shell.sidebar-collapsed .sidebar::before {
    inset: 7px;
    border-radius: 18px;
  }

  .sidebar-top,
  .app-shell.sidebar-collapsed .sidebar-top {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: 8px;
    min-height: auto;
    margin: 0;
    padding: 7px;
    border-radius: 18px;
  }

  .brand.compact,
  .app-shell.sidebar-collapsed .brand.compact {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    width: 48px;
    min-width: 48px;
  }

  .brand.compact .brand-mark,
  .app-shell.sidebar-collapsed .brand.compact .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .brand.compact strong,
  .side-button > span:last-child,
  .sidebar-user-text {
    display: none !important;
  }

  #sidebarToggle,
  .app-shell.sidebar-collapsed #sidebarToggle {
    width: 46px;
    min-width: 46px;
    height: 46px;
    border-radius: 16px;
  }

  .side-actions,
  .app-shell.sidebar-collapsed .side-actions {
    display: grid !important;
    align-content: start;
    justify-content: center;
    justify-items: center;
    gap: 7px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .side-button,
  .app-shell.sidebar-collapsed .side-button {
    display: grid !important;
    grid-template-columns: 1fr;
    place-items: center;
    width: 50px;
    min-width: 50px;
    height: 50px;
    min-height: 50px;
    padding: 0;
    border-radius: 17px;
    text-align: center;
  }

  .side-button .icon,
  .app-shell.sidebar-collapsed .side-button .icon {
    width: 23px;
    min-width: 23px;
    height: 23px;
    margin: 0;
  }

  .sidebar-footer,
  .app-shell.sidebar-collapsed .sidebar-footer {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: auto;
  }

  .sidebar-user-card,
  .app-shell.sidebar-collapsed .sidebar-user-card {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 50px;
    min-height: 50px;
    padding: 0;
    border-radius: 17px;
  }

  .sidebar-user-avatar,
  .app-shell.sidebar-collapsed .sidebar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }

  .desktop-logout,
  .app-shell.sidebar-collapsed .desktop-logout {
    display: grid;
    place-items: center;
    width: 50px;
    min-width: 50px;
    min-height: 50px;
    padding: 0;
    border-radius: 17px;
    font-size: 0;
  }

  .desktop-logout::before,
  .app-shell.sidebar-collapsed .desktop-logout::before {
    width: 22px;
    height: 22px;
    display: block;
    border: 2px solid currentColor;
    border-left-color: transparent;
    border-radius: 7px;
    box-shadow: inset -7px 0 0 -5px currentColor;
    opacity: 0.82;
    content: "";
  }

  .desktop-logout:hover::before,
  .app-shell.sidebar-collapsed .desktop-logout:hover::before {
    opacity: 1;
  }

  .main-surface {
    width: min(100%, 1180px);
  }
}

@media (max-width: 760px) {
  .desktop-logout::before {
    content: none;
  }
}

@media (min-width: 761px) and (max-width: 1080px) and (prefers-reduced-motion: reduce) {
  .sidebar,
  .side-button,
  #sidebarToggle,
  .desktop-logout,
  .desktop-logout::before {
    transition: none !important;
  }
}